Join James Williamson for an in-depth discussion in this video CSS syntax, part of CSS: Core Concepts.
- View Offline
Usually one of the hardest parts of learning any new scripting or markup language is mastering the syntax. In the case of CSS, however, the syntax is remarkably simple, making it one of the easier languages to learn. The CSS is a style sheet language, which means that it is used to describe the presentation of structured documents such as HTML. This presentation is defined by using rules that target specific elements within a document. A collection of those rules is then considered a style sheet. Let's take a look at a sample formatting rule.
Now CSS style are made up of two parts. The selector here P for paragraph tells the browser which elements or elements within the document to style, so based on this selector, all paragraphs within the styled document would be 16 pixels and blue. Now selectors can be really simple, like the ones that we're seeing here, or extremely complex, depending upon which group of elements on the page that you're trying to target. By using a comma, for example, you can group selectors together in order to write more efficient rules, so this would apply to all paragraphs, list items, and unordered lists on the page.
You can also use whitespace or other combinators to make rules which target more specific elements. So in this case, for example, you'd be targeting any paragraph inside of a div tag. By adding the, say, adjacent sibling combinator, we change the meaning of this selector significantly. In this case, the selector would now only target paragraphs that immediately follow a div element. So as you can imagine, learning the various combinations of selectors and how to properly target elements on the page is a huge part of understanding CSS syntax, and we're going to go into those in a lot more detail a little bit later on.
Now the declaration, which is enclosed in these curly braces, gives the formatting instructions for the style. Here there are two rules: one telling the browser which size to make the text and then another one that's defining the color. The rules themselves are made up of two parts: the property and the value. Now, these are separated by colons, and then a semicolon is used at the end of the rule to tell the browser to stop evaluating this one and move on to the next one. While this declaration syntax is also pretty simple, you'll need to learn which properties you can set for each element, which values are allowed for those properties, and then how to properly format those values.
But for the most part, the use of whitespace in your rules does not matter. For example, both of the CSS rules that you can see here would give you the exact same formatting. Now in some cases it does matter. Within a selector, it often results in determining which elements are targeted, so you need to be familiar with when whitespace is important and when it's not. Occasionally, you may need to use inline rules. These rules, such as @font-face, @media, @import, and @page, allow you to group common styles together or group specific formatting definitions together.
And here, for example, you can see an @media rule being used to group rules together that are specific to a single media type and screen size. There are also certain syntax rules such as shorthand notation, pseudo-elements, and pseudo-classes that you'll need to learn as well and as we go through this title, we're going to discuss those in a lot more detail. But you can also use comments to your CSS. Comments are useful for organizing styles, annotating your code for other team members or future authors or frankly, just helping you remember why a certain selector was used.
CSS allows only a single type of comment. You start it with a /* and then at the end of the comment, you just close it with a */. Now the comments can be used for single lines or multiple lines, and you can put them almost anywhere within your CSS. Now best practices limit them to what you see here: before or after rules or directly after individual properties. Now throughout this course we're going to be focusing on the proper syntax of CSS and how to write rules a little bit more efficiently. I also highly recommend reading through the CSS specifications, as well, as they also provide a much deeper look into why rules are formatted in a specific way.
There are a couple places online that I want you to go take a look at. One is the CSS Current Work page, which is found at this address, and there you get a nice big snapshot of what's happening with CSS currently, and also it links to the individual modules and specifications. Also, right now the standard recommended CSS is the CSS 2.1 specification. You can find that on its own page at the w3c.org site at w3.org/TR/CSS2. So go through those specifications, even as we're going through this course, and you're going to get a much deeper understanding of why the CSS syntax is formatted the way that it is.
- Exploring default styling
- Writing a selector
- Setting properties
- Working with common units of measurement, including ems and pixels
- Structuring HTML correctly
- Understanding the cascade and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Styling container elements
- Working with RGB vs. HSL values
- Styling drop shadows