033.1 Lesson 1

The simplest way to modify the style of a specific element is to write it directly in the element tag using the style attribute. All visible HTML elements allow a style attribute, whose value may be one or more CSS rules, also known as properties. Let’s start with a simple example, a paragraph element:

The basic syntax of a customized CSS property is property: value, where property is the particular aspect you want to change in the element and value defines the replacement for the default option made by the browser. Some properties apply to all elements and some properties apply only to specific elements. Likewise, there are appropriate values to be used in each property.

To change the color of our plain paragraph, for example, we use the color property. The color property refers to the foreground color, that is, the color of the letters in the paragraph. The color itself goes in the value part of the rule and it can be specified in many different formats, including simple names like red, green, blue, yellow, etc. Thus, to make the letter of the paragraph purple, add the customized property color: purple to the style attribute of the element:

Other customized properties can go in the same style property, but they must be separated by semicolons. If you want to make the font size larger, for example, add font-size: larger to the style property:

To see the result of these changes, save the following HTML in a file and then open it in a web browser (results are shown in Figure 1):

You can imagine every element in the page as a rectangle or a box whose geometric properties and decorations you can manipulate with CSS. The rendering mechanism uses two basic standard concepts for element placement: block placement and inline placement. Block elements occupy all the horizontal space of their parent element and are placed sequentially, from top to bottom. Their height (their vertical dimension, not to be confused with their top position in the page) generally depends on the amount of content they have. Inline elements follow the left-to-right method similar to Western written languages: elements are placed horizontally, from left to right, until there is no more space in the right side, whereupon the element continues on a new line just under the current one. Elements such as p, div, and section are placed as blocks by default, whereas elements such as span, em, a, and single letters are placed inline. These basic placement methods can be fundamentally modified by CSS rules.

The rectangle corresponding to the p element in the body of the sample HTML document will be visible if you add the background-color property to the rule (Figure 2):

As you add new CSS customized properties to the style attribute, you’ll note that the overall code starts to get cluttered. Writing too many CSS rules in the style attribute undermines the separation of structure (HTML) and presentation (CSS). Moreover, you’ll soon realize that many styles are shared among different elements and it is not wise to repeat them in every element.

Rather than styling the elements directly in their style attributes, it is much more practical to tell the browser about the entire collection of elements to which the custom style applies. We do it by adding a selector to the customized properties, matching elements by type, class, unique ID, relative position, etc. The combination of a selector and corresponding customized properties — also known as declarations — is called a CSS rule. The basic syntax of a CSS rule is selector { property: value }. As in the style attribute, properties separated by semicolons can be grouped together, as in p { color: purple; font-size: larger }. This rule matches every p element in the page and applies the customized color and font-size properties.

A CSS rule for a parent element will automatically match all its children elements. This means that we could apply the customized properties to all text in the page, regardless of whether it is inside or outside a <p> tag, by using the body selector instead: body { color: purple; font-size: larger }. This strategy frees us from writing the same rule again for all its children, but it may be necessary to write additional rules to “undo” or to modify the inherited rules.

The <style> tag lets us write CSS rules inside the HTML page we want to style. It allows the browser to differentiate the CSS code from the HTML code. The <style> tag goes in the head section of the document:

The type attribute tells the browser what kind of content is inside the <style> tag, i.e. its MIME type. Because every browser that supports CSS assumes that the type of the <style> tag is text/css by default, including the type attribute is optional. There is also a media attribute that indicates the media — computer screens or printing, for example — to which the CSS rules in the <style> tag apply. By default, the CSS rules apply to any medium where the document is rendered.

As in HTML code, line breaks and code indentation do not change how the CSS rules are interpreted by the browser. Writing:

has the exact same result as writing:

The extra bytes used by the spaces and line-breaks make little difference in the final size of the document and do not have a significant impact on page’s loading time, so the choice of layout is a matter of taste. Note the semicolon after the last declaration (font-size: larger;) of the CSS rule. That semicolon is not mandatory, but having it there makes it easier to add another declaration in the next line without worrying about missing semicolons.

Having the declarations in separate lines also helps when you need to comment out a declaration. Whenever you want to temporarily disable a declaration for troubleshooting reasons, for example, you can enclose the corresponding line with /* and */:

or:

Written like this, the font-size: larger declaration will be ignored by the browser. Be careful to open and close the comments properly, otherwise the browser may be not able to interpret the rules.

Comments are also useful to write reminders about the rules:

Reminders like the one in the example are expendable in stylesheets containing a small number of rules, but they are essential to help navigate stylesheets with hundreds (or more) rules.

Even though the style attribute and the <style> tag are adequate for testing custom styles and useful for specific situations, they are not commonly used. Instead, CSS rules are usually kept in a separate file that can be referenced from the HTML document.

The preferred method to associate CSS definitions with an HTML document is to store the CSS in a separate file. This method offers two main advantages over the previous ones:

CSS files have the .css extension and, like HTML files, they can be edited by any plain text editor. Unlike HTML files, CSS files have no top level structure built with hierarchical tags such as <head> or <body>. Rather, the CSS file is just a list of rules processed in sequential order by the browser. The same rules written inside a <style> tag could instead go in a CSS file.

The association between the HTML document and the CSS rules stored in a file is defined in the HTML document only. To the CSS file, it does not matter whether elements matching its rules exist, so there is no need to enumerate in the CSS file the HTML documents it is linked to. On the HTML side, every linked stylesheet will be applied to the document, just as if the rules were written in a <style> tag.

The <link> HTML tag defines an external stylesheet to be used in the current document and should go in the head section of the HTML document:

Now you can place the rule for the p element we used before into the style.css file, and the results seen by the visitor to the web page will be the same. If the CSS file is not in the same directory as the HTML document, specify its relative or full path in the href attribute. The <link> tag can refer to different types of external resources, so it is important to establish what relationship the external resource has with the current document. For external CSS files, the relationship is defined in rel="stylesheet".

The media attribute can be used in the same way as for the <style> tag: it indicates the media, such as computer screens or printing, to which the rules in the external file should apply.

CSS can completely change an element, but it is still important to use the appropriate element for the components of the page. Otherwise, assistive technologies such as screen-readers may not be able to identify the correct sections of the page.