Browsers set the stage for the style cascade by shipping with an expansive set of default rules. The developers of each browser decide most of these default rules; there is no standard baseline.
Your browser, for instance, will decide what this page of phrases taken out of context from Håkon Wium Lie's personal website will look like:
In many browsers, you may examine the default rules applied to these paragraphs by right-clicking on one of them in the Preview panel and inspecting the element. Your browser's developer console will appear, and somewhere you will find a view showing the styles. Try this in your browser.
Authors add to the cascade by creating stylesheets using the CSS language. A stylesheet is made up of rulesets, and each ruleset is a collection of key-value pairs. In CSS, a ruleset follows this grammatical pattern:
selector {
some-property: some-value;
another-property: another-value;
...
}A selector tells the browser to which HTML elements the rules apply. The selector can be expressed in many ways, as you shall see. The properties refer to visual features of the HTML elements that the browser is prepared to customize. The properties and their legal values are specified in the CSS standard.
For example, you can change the background color of the paragraphs to a dark gray using this ruleset:
p {
background-color: rgb(30, 30, 30);
}Styles are best placed in an external stylesheet. The HTML file is associated with the CSS file by placing in the head element a link tag whose rel attribute is set to stylesheet:
The browser's default styles were better. The author styles make this page mostly unreadable. Fiddle with the red, green, and blue intensities of the background color to make it readable again.
The rgb() color syntax expects three integers in the interval [0, 255]. You can alternatively express a color using a hexadecimal triplet. Try setting the color to #ff0099. The CSS standard also defines a set of named colors. Try setting the color to cornflowerblue, which is a very nice color, or rebeccapurple, whose story will break your heart.
Maybe the dark background is what you want. In that case, you'll need to change the foreground color, whose property is just plain color.
There's not enough contrast on this page for comfortable reading. Try using a lighter color, like limegreen.
The selector p tells the browser to apply these colors to all paragraph elements. Suppose you want to apply them to just the first paragraph. To make that happen, you can give the first paragraph an id attribute and change your selector to match:
That didn't work! That's because a selector made of bare text is for matching tag names. There are no tags named opener. To target an id, you must prepend a hashtag on the selector:
That's better, but you decide that the last paragraph should be styled the same way as the first. A naive solution would be to duplicate the ruleset and add another id:
This is trash CSS. You now have two rulesets to keep synchronized. A better solution is apply the ruleset to multiple targets by making the selector a comma-separated list of other selectors:
This is more maintainable. However, there's an even better solution. Instead of treating the paragraphs as individual elements, you can cluster them in a group using the class attribute and target all members of a group by using a selector that begins with a dot (.):
So, you've seen how to select elements and change the background and foreground colors. Let's visit one last idea. Suppose you want to make all the text on your page be crimson. Using the ideas described above, you could write this CSS:
But see what happens when you later add a heading to the document:
The heading is not crimson. Try fixing this with a multiple selector. Try fixing it with a class.
Neither of these strategies is sustainable as the number of elements grows. Thankfully, some CSS properties are passed down from parent elements to their children. Not all of them are inherited, but color and background-color are. The sustainable solution here is to set the color on the body element:
The body is also a good target for setting a common background color.