HTML + CSS step by step (2014)

Chapter 4: Cascade Style Sheets

“If you've never programmed a computer, you should. There's nothing like it in the whole world. When you program a computer, it does exactly what you tell it to do.”- Cory Doctorow

In this chapter, you will learn about cascade style sheets, including:

• Selectors

• Referencing CSS within HTML

So, in the first chapter you learned that CSS style sheets are used to change, modify and determine how you content will be presented. This chapter will shed some light on the following terms: selectors, properties and values. These are basic terms that you need to know about style sheets.

Note: do not confuse CSS with HTML. Elements, tags and attributes are specific to the markup language while selectors, properties and values are specific to the presentation language. They work differently, have different purposes and both contribute to the creation of the webpage in different ways.

Selectors

Selectors are used to style CSS using HTML elements. Programmers use style sheets to target and style various elements in the HTML document. For example, CSS can be used to change the color, size or the position of the text in the document.

These are usually used to target attribute values or elements that control the header and/or paragraphs.

These are usually followed by curly brackets: {}. Here’s an example of how this would work:

p {

color: ...;

height: ...;

}

In this example, the color and height of the paragraph can be modified and styled differently. Once the style is determined, you need to decide the values too. In case of “color” this can be orange, red, green etc. Let’s take the same example:

p {

color: red;

height: 16 px;

}

p is the selector while color and height are the properties and orange and 16px are the values of the properties. There are 3 kinds of selectors: type, class and ID selectors.

Type selectors target elements according their types. By way of example, if you want to target division elements, you will use the d i v type selector for all such elements like this:

Here’s the corresponding HTML:

<div>...</div>

<div>...</div>

Then, there are class selectors that target an attribute based on its class. You can select a group of elements instead of targeting one type of selector. The same attribute values can be used for more than one element. Here’s an example:

1. <Div class= “nice”>…</div>

2. <p class=“nice”>…</p>

ID selectors are much more specific than the aforementioned selectors and these select the ID of the attribute. You can use these once per stage and the hash sign (#) is used to denote them. Here’s how you can select an element using the ID selector:

1. #johndoe {…}

Here’s the corresponding HTML for this:

1. <div id="shayhowe">...</div>

Go through various tutorials, books and examples on CSS and HTML and you will find that these are some of the most common types of selectors you will come across. However, there are many others out there, too.

Referencing CSS Within HTML

To give effect to CSS you must refer to the CSS file within your HTML file. When you use one style sheet for a website, you can apply the same style everywhere on the same site. Once you make certain changes, these changes will be applied throughout the site. This can be done by making an external style sheet.

You also have the option of referring to the CSS in an internal style sheet and internal styles but not many programmers go for internal style sheets.

Remember how you were taught to use the text editor above? Well, you’ll be using the same editor again. This will have the .css extension. The .css extension notifies that you have saved a css file. Save the html and css file in the same location and files so you can find and click on them whenever you feel the need to do so.

Take this example to see how this can be done:

What’s happening here is that you are defining the relationship between the two languages by using the rel attribute. The ‘stylesheet’ value allows you to specify the kind of relationship the two will have in your document and the main.css file will be saved in the same file as the HTML file. This is referred to as the root directory. The href attribute indicates where the subfolder for the attribute is stored. In this case the path is correlated with the main.css file with the subdirectory ‘stylesheet’.

Summary

This chapter teaches you how to use style sheets to make a web page. If you will have noticed, selectors are used to control the presentation and NOT the content of the web page. That is precisely what the CSS is meant to do.

Questions

1. What are selectors?

2. Why must you use CSS references?