The HTML5 Diaries – Part 2 – Cascading Style Sheets

This is the second blog post covering the Microsoft 70-480 HTML5 certification. These are my notes for the videos  covering module two, which looks at CSS, giving a rather general covering of CSS selectors, combinators and properties. If you have no idea what I’m on about, click here to learn more about the Microsoft 70-480 certification. If you want to read the previous blog post in the series, click here.

If HTML is the roof and the walls of your house, then CSS serves as the wallpaper and the shingles and the tiles. Basically, it  applies formatting and decoration to the structure you set out in your markup. CSS works out what it’s going to apply formatting to with these things called selectors.

Type selectors are a kind of selector and they work in a really simple manner. What they do is they apply formatting to every single element of the  type you specify, within your HTML document.

So, to make every single <p> element in your document turn red, you type:

p { color: red; }

Note that “color” is spelled in the American fashion. If you’re from the UK, Ireland, Canada or the Antipodes where you  spell words slightly differently to American English, please take note here.

Class selectors apply formatting to every single element that has a class declaration. So, if you have a bunch of  headers with a class of “arabicacoffee”, you would format those headers by writing in your stylesheet:

.arabicacoffee { color: red; }

Applying formatting to elements with a certain ID is fairly similar. Except, instead of starting your stylesheet selector with a period, you start it with the pound (hash) sign.

#thisisanid { color: red; }

Attribute selectors allow you to apply formating to elements based upon certain attributes. So, suppose you have a table which is declared as so:

<table data-author=”Quentin”>

You can apply formatting to that object based upon the “data-author” attribute really easily:

[data-author=Quentin] { color: red; }

With attribute selectors, you can also apply formatting to elements that start or end with, or contain certain characters.

[data-author$=tin] { color: red; }

This applies styling to anything with a data-author attribute that ends with “tin”.

[data-author^=Q] { color: red; }

This applies formatting to anything that starts with ‘Q’.

[data-author*=q] { color: red; }

If there’s anything in your HTML document that has a data attribute which has the letter ‘q’ in it, it will now be colored red.

You can also format your HTML document by using pseudo classes and pseudo elements. These are a bit tricky, and there are an awful lot of them. I won’t be writing about them all, but you can read more about them here.

li:hover { color: red; }

You might have seen something like this before. Basically, when your mouse pointer hovers over that element, its color will change to be red. Another useful pseudo-class allows you to format certain elements, based upon the order in which they’re presented.

li:first-child { color: red; }

This formats the first element in a list. Suppose you want to edit the nth element in a list?

li:nth-child(2) { color: red; }

This is fairly self explanatory. It’s worth noting that this pseudo-class isn’t zero indexed, so you’ll start counting from 1, not 0. This might trap a lot of people who do programming, particularly in languages like C, Java and PHP which are zero indexed.

Pseudo-Elements are similar to pseudo classes. Suppose you want to apply formatting to the first letter of a <p> element. Simple.

p::first-letter { color: red; }

This will format the first letter in a <p> element as red. Easy enough stuff. I’m not going to list every single one,  but you can read more about them here.

This module also talks extensively about combinators. These allow you to apply styling to elements based upon how they  relate to other elements.

Descendant combinators allow you to apply styling to sub-elements. So, suppose you have a bunch of <p> tags buried  within a div with an ID of “DiV”? You can apply formatting to those tags by using:

#DiV p { color: red; }

Those paragraph tags will be formatted, regardless of how buried it is within other elements. Similarly, a child combinator will format an element, but it has to be a direct descendant. Child combinators are used like so:

#DiV > p { color: red; }

The general sibling combinator works by styling the first element mentioned and the next element of the type specified. Confused?

p ~ li { color: red; }

So, this will format the first <p> element, and every <li> element that follows it. Adjacent siblings work in a similar  manner, but they must follow and be adjacent. They look a bit like this.

ul + div { color: red; }

And that concludes selectors and combinators. But what about properties? These are the things that define what formatting should take place. Now, it’s worth noting that this is a huge field. A HUGE field. CSS has existed since 1996. To put that in context, CSS was created when I was 5. That means there’s a huge overhead of things to learn. It’s a big language. And no. I’m not going to cover it in this blog post. However, I do highly recommend that you grab a copy of ‘HTML and CSS, The Complete Reference’ from McGraw Hill. It’s a massive, weighty tome and it costs a fair bit of cash. But it covers absolutely everything. If you want to buy it from Amazon, please consider buying it through this referral link.

By now, you’ve probably worked out how to color an attribute. You have the declaration. Then the curly braces. Then “color: “. Then the color you want to give it. And then a semi colon. Obvious stuff.

Now, in CSS there are a lot of ways to do the same thing. You can set a color with the English name of the color. You can write a hex value. You can write an RGB value. You can write a HSL value. And then you’ve got HSLA and RGBA. Now, you’ll never remember every single hex and rgb value in the world and I’ve got no desire (or time) to write down what each one is. When looking for the hex or rgb value I need, I always end up using Color Schemer.

HSL stands for hue, saturation and lightness, and is a new feature in CSS3 that allows for a slightly more intuitive specification of color values. However, it’s worth noting that support for it can be a bit… Well? Patchy. Y’know with certain older browsers not really supporting CSS3 and HTML5 all that well. You can read more about it here.

CSS3 also has a rather nice feature that allows you to set the opacity of an object that’s significantly semantically nicer than the older ways of defining opacity.

p { opacity:0.4; }

Fairly self explanatory stuff.

The next part of the training course (and which my notes are about) refers to CSS properties that deal with how text is formatted.

The font-style property is fairly obvious. You’re saying how you want your text to look. In this case, it can either be bold, italic or oblique. If you want to set the contents of every <p> element, simply use:

p { font-style: italic; }

The font-weight property allows you to set how “heavy” a text is. It can either be normal (the default), lighter, bold or bolder. You can also set the weight of the font with number values. Font-weight values start at 100 and end at 900. You can use font-weight like so:

p { font-weight: bold; }

Font-size allows you to set the size of the text that you wish to format. If you’ve ever used Microsoft Word or any similar word processor, this will be immediately apparent to you and I won’t insult your intelligence by explaining more than I have to. Just look at the example below.

p { font-size: 24px; }

Font-size is really flexible with what you can throw at it; Inches, centimetres and pixels. It’s all good.

Line-height allows you to set the spacing of an element. It works just like font-weight and you just specify a height like before. So, if you want to double space your text, just write:

p { font-size: 24px; line-height: 48px; }

Font-family allows you to specify the font of the text that you’re formatting. Now, you have to be careful with this as this depends on fonts being present on the client’s computer. So, best just to keep it simple. Using this property isn’t hard. Just use:

p { font-family: “Helvetica”; }

CSS3 has this cool thing called font-faces. What do they do? They allow you to specify a font that’s located in a publicly accessible folder, and then allowing you to use it in your web page. You effectively become a server of fonts. You can read more about them here.

The last thing talked about is box properties. You know how I mentioned how CSS is big? Well, the amount of things you can do to format the space around text and images is… Well… Immense.

Before I go any further, I’m going to mention that you really need to learn about the box model to make heads or tails of what I’m about to discuss. Have a look here. But, can I recommend another book? Design For Hackers is actually amazing. I’m not a design oriented guy (I much prefer hacking about with back end stuff) that book gives me a grounding in design principles. It also taught me to respect the thought and hard work that goes into design. I honestly cannot recommend it enough.

Anyway, so you have the box model. Which you totally know by now, because you read up on it. Right? Anyway, have a look at this.

#thisdiv { padding: 20px; border: 20px solid black; margin: 20px; offset: 20px; }

Obvious stuff. Now, you can apply formatting to certain parts of the box model. So, if you want to format the left hand side of the border, and nothing else? Easy.

#thisdiv { border-left: 20px solid black; }

You can see certain patterns emerge, right? And this ends my notes for the second module on the 70-480 HTML5, CSS3 and Javascript training course. Jeremy Foster and Michael Palermo go on to talk about setting visibility of an element, but not in any great deal, so I’m not going to talk about it much. I will suggest you look into the display, visibility, white-space and overflow CSS properties, as these were quickly mentioned and may come up on the test.

I hope you’re finding these notes useful. If you have any questions, comments, or feedback, please leave them in the comments box below.

About Matthew Hughes

Matthew Hughes is a software developer, student and freelance writer from Liverpool, England. He is seldom found without a cup of strong black coffee in his hand and absolutely adores his Macbook Pro and his camera. You should follow him at @matthewhughes.

Leave a Reply