As mentioned earlier, CSS can be specified in an HTML document or in a separate document. When it is specified within an HTML document, it is known as inline CSS, and when it is specified in a separate document, it is known as external CSS.
1. Inline CSS
There are two ways in which inline CSS can be implemented; one way is to use the style attribute on the element to be styled, and the other way is to use the <style> element, which is usually placed in the <head> element but can also be used in the body of a document. When placed in the body of a document, the scoped attribute can be used on it to target a specific element and its children.
1.1. Using the style Attribute
Figure 8.17 shows how the style attribute is used, and Figure 8.18 the result. The same result can also be achieved with the <style> element, and how is shown in the next sub-section.
1.2. Using the <style> Element
Figure 8.19 shows how the <style> element is used in the <head> element to achieve the same result as Figure 8.18. The type attribute specifies that the content of the <style> element is CSS, and the p.first_para{} rule specifies to make the text contained in the element belonging to class=“first_para” red.
The inline CSS method is not recommended for any serious use. This is because it is limiting and inefficient, in that it can only be used by one document. For example, if another document requires exactly the same CSS styling as the one used in one document, the same CSS has to be repeated for it. This can be especially timeconsuming and costly if a number of rules are involved. Not only that, maintenance can be unnecessarily unwieldy. So, in essence, inline should really only be used for the purpose of quick styling, such as for prototyping purposes, and, like with {important exception, for page-specific CSS designed to override some site-wide or global styles.
1.2.1 Using the scoped Attribute
The scoped attribute, when used on the <style> element, allows styles to be applied to only an element and its children and overrides previously set styles. The <style> element is placed inside the target element. Figure 8.20 shows how the attribute is used, and Figure 8.21 depicts the result.
2. External CSS
No doubt, the best document-styling practice for a website is to use external CSS, and the bigger a site, the more mandatory this, almost, becomes. To link an HTML document to an external CSS document, the <link> element, discussed in Chapter 2, is used in the <head> element. Figures 8.22 and 8.23 show how this is done and Figure 8.24 shows the rendered result.
In the <link> element in the example, the href attribute specifies the URL for the style sheet (i.e., style.css), rel specifies its relationship with the HTML document, and type says that the content of style.css is CSS text.
2.1. Multiple Style Sheets
It is also possible to offer multiple external style sheets, using multiple <link> elements. This is usually done to offer alternative style sheets and so to provide multiple ways of presenting the same document. This is so that users have a choice of multiple styles. Figure 8.25 shows an example of how this is done.
The example provides three style sheets (default.css, basic.css, and classy.css). Notice that in the <link> elements for the alternative style sheets, the rel attributes each has a space-separated list of values: “alternative stylesheet.” It must be in this way in order for an alternative style sheet to be specified. Also, the title attribute must be used, and it must not be empty. Its value is what is listed as a style option for users to choose under the style sub-menu of the View menu of some browsers. When a user chooses an alternative style sheet, the page is immediately rendered using the style. Style sheets that have the same value for the title attribute are treated as part of the same style option.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.