Beginning HTML & CSS 3

Notes from “Pages Web avec HTML5 et feuilles de style CSS 3 : S’initier


Understanding CSS

In order to understand how CSS works you need to understand some basic concepts that lie behind it.

The Cascade

The C is CSS stands for cascade and refers to the algorithm used to decide which style takes precedence. In short the cascade goes from left to right and top to bottom. In reality this means that if you have a set of styles such as,

p {
	background-color: red; background-color: blue; font: yellow;
}

p {
	background-color: yellow;
	background-color: orange;
}

Then in the top style blue would be applied (left to right) and in the bottom orange but because the bottom style takes precedence (top to bottom) on the page the paragraph would be orange.

Because font has not been specified in the bottom style the end result after the cascade is that the paragraph style will be,

p {
	background-color: orange;
	font: yellow;
}

Selectors

Calculating precedence

To calculate which which item takes precedence as things become more complex takes three selectors.

  • Type (h1,h2, p)
  • Class (.h1, .h2. .p)
  • ID (#idname)

Type has the lowest value with 0-0-1, class the next with 0-1-0 and ID the highest with 1-0-0. It is also important not to think that these 0-0-0 method has any relationship to base ten. 11 in the first column does not translate to 0-1-1. It is merely 0-0-11. Also, the more specific a style is the higher weight it has.

So if a paragraph is targeted by a type selector in one place 0-0-1 and an ID selector in another 1-0-0 the ID selector will have precedence. For example the HTML,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

<p>
Lorem. Duis. Elementum curae ve augue id risus tempus tellus augue. Lacinia. Sodales. Dictumst primis vestibulum justo nunc fusce, rhoncus risus. Magna hendrerit condimentum nec pede duis volutpat montes. Ad. Facilisi montes, cras. Fermentum aptent tempor, justo adipiscing faucibus lacus ultricies. Nunc luctus cursus malesuada sapien vestibulum torquent eros vehicula viverra curae.
</p>

<p id="highlight">
Lorem. Duis. Elementum curae ve augue id risus tempus tellus augue. Lacinia. Sodales. Dictumst primis vestibulum justo nunc fusce, rhoncus risus. Magna hendrerit condimentum nec pede duis volutpat montes. Ad. Facilisi montes, cras. Fermentum aptent tempor, justo adipiscing faucibus lacus ultricies. Nunc luctus cursus malesuada sapien vestibulum torquent eros vehicula viverra curae.
</p>

</body>
</html>

with the CSS,

#highlight {
    color: red;
{

p {
    color:blue;
}

would resolve to the top paragraph being red and the bottom being blue even though the CSS for p is further down the page. This is because the ID #highlight (1-0-0) is more specific than the type p (0-0-1).

It is important to keep in mind the various weights of selectors as when a style does not resolve correctly it can be because of this.

Combining selectors

We can also combine selectors. This allows us to be more specific in what elements or group of elements we want to target. For instance if we wanted to target all links in paragraphs then the CSS could look like.

.connect p {
   color:red;
}

.connect p.disconnect {
    color: blue;
}

and the HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p class="disconnect">
Lorem. Duis. Elementum curae ve augue id risus tempus tellus augue. Lacinia. Sodales. Dictumst primis vestibulum justo nunc fusce, rhoncus risus. Magna hendrerit condimentum nec pede duis volutpat montes. Ad. Facilisi montes, cras. Fermentum aptent tempor, justo adipiscing faucibus lacus ultricies. Nunc luctus cursus malesuada sapien vestibulum torquent eros vehicula viverra curae.
</p>
<div class="connect">
<p>
Lorem. Duis. Elementum curae ve augue id risus tempus tellus augue. Lacinia. Sodales. Dictumst primis vestibulum justo nunc fusce, rhoncus risus. Magna hendrerit condimentum nec pede duis volutpat montes. Ad. Facilisi montes, cras. Fermentum aptent tempor, justo adipiscing faucibus lacus ultricies. Nunc luctus cursus malesuada sapien vestibulum torquent eros vehicula viverra curae.
</p>
<p class="disconnect">
Lorem. Lacus hendrerit euismod aptent magna condimentum. Taciti fringilla mi, justo. Magnis, amet magnis ut molestie. Senectus sed, nibh leo class quam quis. Etiam. Mi morbi vel erat consequat litora. Quam, praesent mi, class tortor diam ipsum montes consectetuer tincidunt neque ut consequat parturient, leo. Curae ut pede integer nec, integer amet quis amet commodo. Cursus eget, massa mus amet class hymenaeos nulla ac porta sollicitudin facilisi. Est porta ornare tristique risus eu lectus.
</p>
</div>
</body>
</html>

The all paragraphs wrapped in the <div class=connect> would be red except for paragraphs with the disconnect class which would be blue but this would only occur within the div wrapper with connect. The class=”disconnect” declaration in the first paragraph has no effect as disconnect only applies to paragraph elements within the connect class.

It is not good practice to target use a type to prefix a class selector such as in the CSS,

.connect p.disconnect {
    color: blue;
}

Instead we should try to target any elements with the class disconnect inside connect by writing,

.connect.disconnect {
    color: blue;
}

Combined selectors weights

As you combine selectors you also have to combine their weights in order to gauge their effect. In out example CSS we hadtwo selectors, .connect and .connect.disconnect. Connect has a weight of 0-1-0 because it is a type and .connect.disconnect has a weight of 0-2-0 because it has two types. If we had of kept our initial class p then .connect p .disconnect would have had a weight of 0-2-1.

One way to keep the weights of our selectors lower is to be as modular as possible. If all the paragraphs are to have certain styles in common then we should have one class for the common styles and another for the more specific.For example with CSS of,

.common {
    font-size: 1.5em;
}

.specific {
    color: green;
}

and HTML of,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p class="common">
Lorem. Duis. Elementum curae ve augue id risus tempus tellus augue. Lacinia. Sodales. Dictumst primis vestibulum justo nunc fusce, rhoncus risus. Magna hendrerit condimentum nec pede duis volutpat montes. Ad. Facilisi montes, cras. Fermentum aptent tempor, justo adipiscing faucibus lacus ultricies. Nunc luctus cursus malesuada sapien vestibulum torquent eros vehicula viverra curae.
</p>
<p class="common specific">
Lorem. Duis. Elementum curae ve augue id risus tempus tellus augue. Lacinia. Sodales. Dictumst primis vestibulum justo nunc fusce, rhoncus risus. Magna hendrerit condimentum nec pede duis volutpat montes. Ad. Facilisi montes, cras. Fermentum aptent tempor, justo adipiscing faucibus lacus ultricies. Nunc luctus cursus malesuada sapien vestibulum torquent eros vehicula viverra curae.
</p>
<p class="common">
Lorem. Lacus hendrerit euismod aptent magna condimentum. Taciti fringilla mi, justo. Magnis, amet magnis ut molestie. Senectus sed, nibh leo class quam quis. Etiam. Mi morbi vel erat consequat litora. Quam, praesent mi, class tortor diam ipsum montes consectetuer tincidunt neque ut consequat parturient, leo. Curae ut pede integer nec, integer amet quis amet commodo. Cursus eget, massa mus amet class hymenaeos nulla ac porta sollicitudin facilisi. Est porta ornare tristique risus eu lectus.
</p>
</body>
</html>

We would have the common style applied to all paragraphs but the common and specific class applied to the centre paragraph with the use of the multiple classes in class=”common specific”.

CSS property values

Colour

Colour in CSS is defined in terms of sRGB or standard red, blue and green. There are four main ways this is done.

NameExample
RGBrgb(255,0,0)
Hexidecimal#ff0000
HSLHSL(0, 100%, 50%)
Keywordsred

All of these systems work by mixing red, blue and green together to create other colours. In the above example all the examples are red.

Keywords

Although keywords are very simple to use they offer little choice in the range of colours. They are very easy to read in CSS though.

Hexidecimal

Hexadecimals are a little harder to read and consist of a # followed by six numbers. These numbers are hexadecimal so they are in base 16 which are counted as 0,1,2,3,4,5,6,7,8,9,a,b,c,d,f. With f being the highest value. It is easier to think of the numbers as three sets of two representing the amounts of red, green and blue in the colour. Looking at the example above you can see that there is one set of ff at the start followed by two sets of 00. This can be translated to full red and no blue or green.

There are 16.7 million colours that can be represented by hexadecimal.

RGB and RGBa

An RGB value is actually three values. Red from 0 to 255, green from 0 to 255 and blue from 0 to 255. A value of rgb(0,0,0) is equivalent to black and a value of rgb(255,255,255) is equivalent to white. Red would be represented by rgb(255,0,0) and so on.

An RGBa value is just RGB with an alpha channel for opacity. This is represented by a number between 0 and 1 where 0 is transparent and 1 is opaque. So if you wanted a shade of red to be 50% opaque then you would specify rgba(255,0,0,0.5) and the RGBa value.

HSL and HSLa

HSL values are a chromatic function represented by hue, saturation and luminosity. Hue is represented by a whole number from 0 to 360, saturation by a percentage value, and lightness by a percentage value. Like RGBa there is also HSLa with an alpha channel value from 0 to 1 to represent the transparency.

HSL and HSLa aren’t as common as the hexadecimal and RGB colour schemes as many people don’t find them as intuitive they are a more recent addition to browsers.

Size

The size values in CSS can be of two different types, relative or absolute.

Pixels

Pixels are an absolute value represented by a number followed by px. One pixel is designated as 1/96th of an inch in size but the actual size may change slightly depending on the resolution of the screen. They have been around a long time and are very common but as screen sizes have begun to wildly vary, from cinema to phone they can cause problems as an 18px font on a cinema screen may be unreasonably small and on a cell phone unreasonably big.

Percentages

Percentages are a relative size and are represented by a number between 1 and 100 with a % sign after it. They are very popular for setting the width of columns and so on but it needs to be remembered that they are a ratio of their parent element. For instance a column with a 50% size might take up half the screen but another item with a 50% size inside that column will only take up half the column.

Em

Em is also a relative measure and is represented by a number and then em. 1em is equivalent to the font size of the element so if an element has a font size of 20px and a width of 5em then it will be 100px wide. When the font size is not defined for an element the em unit will use the nearest parent element with a defined font size to calculate measurements.

Rem

Because em is relative to the nearest parent element with a fixed font size, as HTML becomes more complex and nested it it is easier to have a em unit that refers to the root em size. This is called Rem. To use Rem properly you need to set the font size of the document in the CSS. This can be done while still providing a relative measure with the CSS,

html {
font-size: 100%;
}

Most browsers default to a font size of 16px so using that measure it doesn’t matter where is the document you use it 1rem will always be 16px, 2rem 32px and so on. A handy trick is to set the rem at,

html {
font-size: 62.5%;
}

which will equate to 10px. Now 1.4rem will 14px and 1.8rem will be 18px making things a lot easier to calculate. Rem and em are not just used to calculate the size of fonts though, they are also used for margins, etc.. so if someone resizes the site then the ratios still stay the same.

Leave a comment