Styling
'Styling' means to make formatting changes, such as you would in a word processor (e.g. font size, colour, line spacing etc), and to do that we use something called CSS. The difference with CSS is that you write it all out manually. This may sound tedious, but it gives you great control, and it is not so tedious once you have accumulated some experience.
Separating styling from content
Remember that the CSS is in a separate stylesheet, not the HTML file. The browser refers to the CSS information in the stylesheet as it reads the HTML file.
The idea of having separate files (i.e. HTML and CSS) is to separate the webpage content from the layout and appearance information. This produces simpler code that is easy to read and modify. Back in the day the HTML and styling information were in the same place, and it was messy and awkward. Have a look at the code for an old website to see what it's like. To see the code, right click on each website and select 'view source' (or similar).
The three parts of CSS
We use CSS by 'selecting' an element in the HTML, nominating the 'properties' we wish to specify for that element, and then entering the values for those properties. The three parts are summarised below:
- Selector: Selects the element you want to style (e.g. paragraph).
- Properties: The characteristics of the element you want to specify (e.g. font size, font colour).
- Values: How you want those characteristics to be (e.g. 110%, blue).
You can see how they all fit together in Lesson 14.