Inline style sheets

Finally, the third type of style sheet is the inline style sheet. And its not really a style sheet - more like just an inline style. What we could do is write a style attribute actually inside an element in our HTML:

<h2 style="">

Inline styles are a little different from external and embedded style sheets that use the traditional rule set; here there's no selector and there's no complete rule set because you're writing it inside an HTML tag. We can enter a font-size of 10px. We write that property and value the same way we do in a rule set and we should cap it with a semicolon:

<h2 style="font-size: 10px;">

We can also change the color and cap that with a semicolon:

<h2 style="font-size: 10px; color: deeppink;">

Save this, refresh the website, and you can see the result:

This is by far the most inefficient way to write styles. However, writing CSS directly in an HTML element gives it the most weight and will overrule all embedded styles and all external styles that target the same element, unless the !important keyword is used. In Chapter 4, Creating Buttons with Modular, Reusable CSS Classes, and CSS3 in the Specificity Rules section, I dive into cascades and other factors that make certain rules weigh more and override other rules.

Okay, so we have now created a rule set and learned what each part of a rule set is called, specifically, the selector, property, and value. This information will be helpful for you to retain, as I'll use this terminology often. We also reviewed the three different places you can create a style sheet: externally, embedded within the <head> tag, and inline, directly inside of an element. Again, external style sheets are the most efficient because they can control an entire website. This is the only place I write CSS if I can help it. Next, we'll review two more core concepts: the box model and the display property.

上一章目录下一章