CSS

Well done, you've made your first webpage. With somewhere to host it (more in this later) you now have a fully-functioning portfolio that proves you know how to make websites. If yo8u haven't alrady, this might be a good point to take a short break and let your brain digest what you've learned so far. We will be cahnging tack a little in this section and starting to learn a new languauge, and some space between might help to stop things getting muddled. Once you feel you're ready to learn some more new things, read on.

Adding style: CSS

At the end of the previous section we made the finishing touches to our first webpage. If you're anyhting like me, however, you might have though that it looks a little, boring. Those of you old enough to remember the world wide web of the 90s and early 2000s may remember the plain-text and blue hyperlinks with some nostalgia, but the fact is that most website don't look like this anymore; pick 5 different sites at random, and it's likely you'll see 5 very different combinations of page layout, fonts, colours, and overall 'feel'. All of these websites' content is still defined using HTML, so how do they look so different? The answer, is CSS.

CSS is another computer language like HTML. The acronym stand for Cascading Style Sheets, and its purpose is to add style to HTML documents, to change the way they display on a screen. Just like HTML, it's also written entirely in text.

Properties and Values

At the core of CSS are what's called properties and values. A property is something that can be styled, such as the colour or typeface of text, or the width of images. A value is whatever you want to set that property to, such as "Times New Roman", red, or 200px (px is an abbreviation of pixels). To add styling to an element using CSS, we use the style attribute, like so: style="property: value;". Eache set of property and value pairs is seperated by a colon (:) and ends with a semi-colon (;).

To return to the previous example, if we wanted ta red paragraph set in Times New Roman, we would write it like so:

<p style="color: red; font-family: Times New Roman;">This is a red paragraph</p>

There are many, many more properties and values that can be used to style elements; far more than would be practical to cover in this book. Once again, MDN is your friend for referencing them. For now, let's just practice what we've learned by making all of the paragraphs in our portfolio page ???. I'll do the first one for you:

Now go and change the rest yourself.

In the next chapoter, we'll introduce some more properties that can be styled, and discuss some potential problems with the style attribute.