HTML + CSS step by step (2014)
Chapter 5: More On CSS
“Sometimes abstraction and encapsulation are at odds with performance — although not nearly as often as many developers believe — but it is always a good practice first to make your code right, and then make it fast.”- Brian Goetz
In this chapter, you will learn about more on CSS, including:
• Properties
• How to combine selectors
• Working with specificity weights low
• Lengths
The default style for all web browsers differ. This means that you would have to use different style headings, paragraphs and such like, differently on Google Chrome and Internet Explorer.
The advantage of CSS is that it enables you to ensure that there is cross-browser compatibility. In other words, it is because of style sheets that you can see the same web page on different browsers. What CSS does is that it takes common HTML elements and unifies predefined styles so for cross-browser compatibility. Check out the following website to read more about CSS resets: http://meyerweb.com/eric/tools/css/reset/.
You can use style sheets to change the background color of certain parts of the text, too. Suppose you want to change the value of the color and font-size- in this case you will do the following:
p {
background: orange;
font-size: 16px;
}
p {
background: green;
}
Using this you will have changed the color of the background of paragraphs on the top and then, you will have done the same for paragraphs that are situated at the bottom of the style sheet. So, the paragraph situated at the top of the HTML document will appear to be orange in color while the background of the paragraph that appears below this paragraph will be green in color.
Properties
You can also apply the cascade to properties within individual selectors. Let’s consider this example:
p {
background: orange;
background: green;
}
If you change the value of the background to green after orange, the paragraph’s background will be green in color. You will find that the styles cascade from top to bottom. In some instances the specificity of your selectors will break.
Every selector has a specificity weight. The weight and placement of the selectors will determine the style of the cascade.
We spoke about type, class and ID selectors in previous chapters. Type selectors are the lowest in specificity weight and one type selector has a value of 0-0-1. One class selector has a weight of 0-1-0 while one ID selector, being the heaviest of the 3, has a specificity weight of 1-0-0. When using selectors, always give preference to those that have greater specificity weights than the rest. A selector with a high specificity weight will always appear regardless of whether other selectors show.
Let’s say you want to stylize the following HTML content:
<p id="food">...</p>
Here’s how you will go about this:
#food {
background: orange;
}
p {
background: green;
}
You can see a type selector (p) and an ID selector here. The ID selector is heavier than the type selector. Hence, the paragraph will appear to be orange instead of green. If your style sheet doesn’t seem right and if the styles aren’t being applied properly, chances are that selectors are breaking your cascade because due to the specificity weights.
How To Combine Selectors
If you have read the previous chapters carefully, you will have learned about selectors, specificity weights and how these can affect the cascade. Now, let’s look at how to combine various selectors by using the following HTML content as an example:
<div class="fries">
<p>...</p>
<p>...</p>
<p class="red">...</p>
</div>
Now, let’s suppose that you want to change the paragraph elements within the class attribute that has a value of ‘fries’ so that it is green in color. At the same time, you also want to set the background color of the class attribute with a value of red, so it appears to be yellow. Here’s how you will style the content:
. fries p {
background: green;
}
.fries p.red {
background: red;
}
Combined selectors should be read from left to right. The selector that is situated to the right is called the key selector. In the example given above, p is the key selector. The key selector is prequalified with the class selector, fries. Hence, the combined selector will only target the paragraph elements within the class element that has a class attribute value of fires.
In the second selector, red appears to the right and so, this will be the key selector. What this means is that selectors that come before red are all pre-qualifiers.
Working With Specificity In Combined Selectors
When you use selectors, their specificity weights are combined, too. You can figure out the total by adding the individual specificity weights of various selectors. Consider the examples above:
.fries p {
background: green;
}
.fries p.red {
background: red;
}
The first selector has a class and type selector. The point value of the class selector is 0-1-0 while the weight of the type selector is 0-0-1. Add their weight and you’d get a total specificity weight of 0-1-1 for that selector.
In the second selector you can see 2 class selectors and one type selector. If you add up their specificity weights you’ll get a value of 0-2-1.
The second selector has a higher specificity weight than the second one and so, this will take preference over the first selector.
Always be wary of the specificity weights because those with higher weights are likely to break the cascade.
How To Keep Specificity Weights Low
The problem of breaks in the cascade can be fixed by using similar styles for every element. This way you could reduce the specificity weight of the selectors, too.
You can insert multiple class attribute values though each value must be separated. All you need to do is insert a space between the values. The benefit of this is that you can use one style on all elements of the same sort. At the same time you can also use different styles for certain elements that belong to the same category, too.
This bit can be confusing but if you are interested in reading up on this, click on the following link: http://learn.shayhowe.com/html-css/getting-to-know-css/#combining-selectors.
The link will also teach you how to use different colors to stylize your text and so, I would advise you to go through the contents on the web page. Since this book is meant to be a guide for beginners, I will not address the topic here.
Lengths
There are two type of lengths where CSS style sheets are concerned: absolute and relative. The former length is measured in centimeters, millimeters, inches and such like. However, the most popular choice, amongst programmers, is the pixel. The pixel is great for beginners.
p {
font-size: 14px;
}
Relative lengths, as the name suggests, depend on one another and these are much more difficult to control for beginners. Percentages and em values are used for relative lengths. So, if you want to set the width of any element to 50%, you need to know of the width of the parent value. Once this is identified, you can adjust the width accordingly.
. col {
width: 50%;
}
You can use percentages to adjust the height and width of an element. Utilizing percentages will also enable you to alter the layout of your web page.
In case of em units you need to consider the font size first.
Summary
This chapter teaches you about specificity weights of various selectors and how these can affect the cascade itself. Always remember to go for lower specificity weights to prevent the cascade from breaking. It also touches upon absolute and relative lengths that programmers use in their HTML documents.