The contents of this course are derived from the CSS Crash Course located on The Codevolution YouTube Page.
While this is not a completely exhaustive list, what follows is an extensive list of topics to get beginners going. I found a lot of value in the crash courses when I was first beginning to code and took extensive notes as I followed along. So, in coder fashion, I made websites out of the content and depoyed them through Netlify
You can find the GitHub Repo with all of the code Here
Inline styles and inline style sheets should be avoided on sites that contain more than one page so I will not even include examples here. There are also more advanced methods of selecting External style sheets are the most efficient as you can keep all styles in a separate file, usually styles.css, and then link the stylesheet in the head tag of the index.html file.
Syntax consists of a selector, and a style declaration consisting of a property and a value. ie. h1 {color: orange} h1 is the selector, color is the property and orange is the value.
h1, h2, p, etc...
i. h1 { color: green}
using the asterisk *, you can style every element.
ie. * {color: green}
Most common way. you can declare a class in the opening tag and reference it on the style sheet.
ie: .error { color: red; }
ie: .succes { color: green; }
similar to class selector, but only targets one specific element with that ID. references using hashtag. ID selectors are great when you're also using external style libraries.
ie: #test { color: maroon; }
#123456 or #8c3d1c
Specify Red, Green and Blue values and opacity.
"color: rgba(50,100,34,0.5
Here's Verdana
Here's Helvetica
To create a fall-back font, using a comma after you declare the font that you intend in the css styles sheet.
Here is italic font created using the font-style: italic
Here is bold font using font-weight: bold
Here is underlined text using text-decoration: underline
Here is 20px text using font-size: 20px
This text uses Helvetica, italic, bold, underline 20px.
This is centered text using text-align: center
This is text-align: right
Here is line-height: 4
Here is letter-spacing: 4px
Here is word-spacing: 20px
The box model mainly revolves around three properties
In web design, every element is considered a rectangular box
The CSS box model is sort of a standard by which browsers render HTML elements
The box model consists of 4 parts
You can use the developer tools in your browser to inspect elements by clicking on 'Styles' once you are in the inspector.
When two rules apply that have equal specifity, the one that comes last in the CSS is the one that will be used.
In the heading above, we targeted the class 'cascade', first coloring it red and next coloring it blue. Since blue is the color that was declared last, that is what style was applied
A big part of the above mentioned definition of cascade is equal specificity. A class selector is more specific than an element selector. An ID selector is more specific than a class selector. An inline-style is more specific than an ID selector.
When multiple style rules are applied to the same element, the browser will decide the most specific rule and apply that one.
You can override specificity by tagging something as important using '!important'. This method works, but it is kind of a last choice option for styling and there are more efficient ways to style.
ie. h3 { color: red !important}
Some CSS propery values set on parent elements are inherited by their child elements, and some aren't
This paragraph tag inherited styles from the div tag that it is wrapped in.
To style this table, I targted the th and td tags and used 'border: 1px solid #ccc;' in the style sheet. Then, I targeted the 'table' tag and gave a border property of border-collapse: collapse;. To expand the width of the table, I set the width to 60%
To center align the table data, I set the td tag to text-align center. ie. td { text-align: center; }
You can change vertical alignment and the cell height by using 'height: 50px' and vertical-align: center.
To add spacing within the cells, you can add padding to td and th tags. I did this instead of altering the height and vertical alignment
To remove most of the borders, I changed border to only border-bottom
| Heading 1 | Heading 2 | Heading 3 |
|---|---|---|
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
| Data 7 | Data 8 | Data 9 |
The three main display values you should know as a beginner are block, inline and none.
In this example, I used 'display' to change the div content into an inline element and the span content into a block element.
'display: none' is sometimes used in JavaScript in order to hide elements.
These topics are addressed in their corresponding Crash Course videos.
There are five types of position properties
Below, we set red and blue borders. By default, the position property on an element is set to static. With a static position, elements are placed according to the normal flow of the page. I changed the position of position content 1 to relative and then adjusted the top and bottom position. Position content 1 moved below position content 2. Content 2 stayed static and content 2 changed around it.
In the example below, content 4 has a position of fixed, and has been placed in the bottom, right side of the viewport. Even when you scroll, the content stays fixed in that position.
If you use an absolute positioning, content behaves differently from content with the fixed position. The content is fixed to the bottom right of the screen, but stays in that location on the page while you scroll. However, if the element has a different parent element with a relative position, the position will then be relative to that parent element.
I wrapped the second element with a div tag and added a class of container. Then, I added a a css styles for the container class. The content is fixed to the bottom right of the container, since it is enclosed in the container div, which is its parent element.
Sticky positioning is based on the user's scroll position.
You can see that once you reach the content, the position of the content moves with the scroll
Beyond an offset, it just sticks in one place.
This is great if you have something on the webpage that you want to be in the normal layout of the page and always visible.
Absolute Units are generally considered to always be the same size. There are several, but pixel is the most common. Absolute units are useful for layouts where the page needs to be printed.
Relative Units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit is that, with some careful planning, you can make it so that the size of the text or elements scales relatively with other elements on the page.
I set the font-size of this text to 20px and the height to 2em. In this example, 1em is equal to the font size of the element. So, the height is actually 40px.
Em can also be used on font-size of a child element. So, I've added another div tag within this current parent div and gave it a class of 'em-child'. This is text in the em-child div with a font-size of 3em, meaning it has a size of 60px (the font-size set in the parent, em-container div.)
Rem is sized relative to the Root Element
This is VH text enclosed in a 1px border that is set to height: 50vh, meaning it will take up 50% of the viewport height.
Works similarly to VH, but on the width of an element. This text has a width: 50vw and a height: 50vh, meaning it takes up 50% of the width and 50% of the height of the viewport.
This text is formatted with a 'height: calc(50vh-100px)'
This is useful for when you have to subtract the navbar height for calculating the available height for your content.
Uses the largest value from a comma-separated list of values.This text is formatted with a 'height: max(50vh, 600px)'. The height is 600px, as that is the larger of the two values
Uses the smallest value from a comma-separated list of valuesThis text is formatted with a ' height: min(50vh, 600px);'. The height is 50vh, as that is the smaller of the two values