CSS works closely with HTML, but is its own language with its own rules. Learn about the syntax, terminology, and naming conventions.
- [Narrator] Now that we have all our files in HTML ready to go, let's dive into CSS. It's a different language from HTML, so it has its own syntax rules. CSS is used to add styles and separates the presentation from the content. You may have seen HTML tags in the past that we used for styling, such as the classic blink or center tag. These presentational HTML tags have been deprecated and are no longer officially supported by modern browsers.
Selectors are used to determine which HTML element to apply the styles to. Declaration blocks contain the style rules, they are wrapped in curly braces to contain these styles to the specific selector. The declarations are the style rules, and are written using property:value; pairs. The property name is followed by a colon and ends with a semicolon, to indicate that the rule is complete. Properties determine the type of style to be applied to the element.
And values are specific to that property, and will vary depending on the property type. Let's take a look at the TESSy access that we had added to our project in the previous exercise. Body is the selector, and it selects the entire page because the body tag represents the viewable area in the browser, also referred to as the view port. Background is the property, which is used to change the background styles of the element. And lightblue is the value, which changes the background property to that specific color.
Just like HTML, use whitespace and tabs for readability. Each declaration can be written on a separate line, and tapped in the visually see which styles belong within each declaration block. I'll be going over more CSS properties throughout this course, but there are so many to explore. So it's good to have a few go to resources to keep on hand. Two of my favorite resources are Codrops and the Mozilla Developer Network. Codrops CSS reference is nicely organized and very detailed.
The write up for each property contains extensive information and examples. The Mozilla Developer Networks reference is also pretty great. It's not as detailed, but still contains important information, such as syntax and browser compatibility, makes it a useful resource for quick referencing.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property