Figure 2.3 The result of adding a rule to a style sheet to color h1s green, and then paste the style sheet to the document using the style elements. (try it) Now you have the basics of creating CSS rules and style sheets. However, they are not yet finished. For the style sheet to have an effect, you must “paste” your style sheet to your HTML document. The font-family CSS property is used to specify the font in a rule set. The fonts must be available for the browser to display correctly, either on the computer or linked as a web font. If no font value is available, browsers display their default font. If you use a font name with multiple words, it is recommended that you enclose them in quotation marks. The selector references the HTML element that you want to format. What you see above is a simple CSS rule that contains a rule.

A rule is a statement about a stylistic aspect of one or more elements. A style sheet is a set of one or more rules that apply to an HTML document. The above rule specifies the color of all top-level titles (h1). Let`s take a look at what the visual result of the rule might be: the font-style property does not change the font size or family, only the existing font. When the ul element is defined, the li elements inside are biased because the font style is inherited. Here`s the result when applied to the test page you know now: A particular item corresponds to a select list if it matches at least one of the selectors on that select list. It allows us to apply the same styles to different selectors without repetition. After you declare a rule for a selector, any content in your HTML document marked with that selector is displayed according to the rule. However, exceptions occur when a conflicting CSS rule takes precedence. Here is an example of a CSS rule.

Write the following rule in your styles.css file: You can combine interpolation with the parent selector, @at-root rule, and selector functions to seriously perform dynamic generation of selector selectors. For more information, see the documentation for the parent selection. The reason why the second rule prevails is that it is more specific than the first. The first rule is very general – it affects all elements of the canvas. The second rule only affects the h1 elements of the document and is therefore more specific. Selectors define the elements to which a set of rules applies. These can be simple selectors, composite selectors, complex selectors, or lists of selectors. Other browsers that do not know the style element, such as Netscapes Navigator 1 and Microsoft Internet Explorer 2, ignore the style tags but display the contents of the style element.

This gives the user the style sheet printed on top of the canvas. At the time of writing, only a few percent of Internet users will have this problem. To avoid this, you can insert your style sheet into an HTML comment we discussed in Chapter 1. Because comments do not appear on the screen, prevent older browsers from displaying the content of the style element by placing the style sheet in an HTML comment. CSS-enhanced browsers are aware of this trick and treat the content of the style element as a style sheet. We`ve known for years that designers want to create their own style sheets. However, we found that users also want to be able to influence the presentation of their documents. With CSS, they can do this by providing a personal style sheet that merges with browser and designer stylesheets.

Conflicts between different style sheets are resolved by the browser. Typically, the designer`s style sheet has the strongest claim on the document, followed by the user`s style sheet, and then the browser`s default. However, the user can say that a rule is very important, and it will then replace any author or browser styles. Style rules are the basis of Sass, just like CSS. And they work the same way: you choose which items to format with a selector and declare the properties that affect the appearance of those items. To make it easier for users to navigate hypertext documents, links should have a style that distinguishes them from regular text. HTML browsers often emphasize the text of hyperlinks. In addition, different color schemes were used to indicate whether the user has already visited the link or not. Because hyperlinks are a fundamental part of the web, CSS provides specialized support for styling them.

Here`s a simple example: in this article, I`ll go over the CSS style rules, highlighting the right terms that need to be bolded. Brevity was a goal when designing CSS. We thought that if we could reduce the size of style sheets, we could allow designers to write and edit style sheets “by hand.” In addition, short style sheets load faster than longer ones. CSS therefore includes several mechanisms for truncating style sheets by grouping selectors and declarations. Style rules determine the styles applied to elements in a document. Each style rule consists of a selector and a declaration. In this tutorial, you will learn how to understand and create CSS rules (also known as rule sets) to style and control the layout of HTML content. The tutorial begins with a sample CSS rule

that renders HTML elements blue to explore how CSS rules work in action before explaining each component of a CSS rule.

In the last set of examples, you saw that the color of the link text turned blue without it being specified in the style sheet. In addition, the browser knew how to format blockquote and h1 elements without explicitly saying so. Everything the browser knows about formatting is stored in the browser`s default style sheet and merged with the author and user`s style sheets when the document is viewed. A CSS rule set contains one or more selectors and one or more declarations. The selector(s), h1 in this example, reference(s) an HTML element. The declaration(s) that, in this example, are blue and aligned with the text: Center the item with a property and value. The rule set is the main building block of a CSS. CSS rules must be specified in a style element or in an external CSS file. Let`s start with fonts. If you`ve used DTP apps in the past, you should be able to read this little style sheet: In CSS, a declaration is the key-value pair of a CSS property and its value.

CSS declarations are used to set style properties and create rules applied to individual elements or groups. The name and value of the property are separated by a colon and the entire declaration must be completed with a semicolon. The links are underlined, as we have indicated, but they are also blue, which we have not done. If authors do not specify all possible styles, browsers use default styles to fill in the gaps. The interaction between author styles, browser default styles, and user styles (user settings) is another example of CSS conflict resolution rules. This is called the waterfall (the “C” in CSS). We will discuss the waterfall below. Next, add HTML content tagged with the element

to the index file.html (just below the line at the top of the document): Remember the discussion in Chapter 1 about HTML, which is a document with a tree structure, and how HTML elements have children and parents. There are many reasons for tree documents.

With style sheets, there`s a very good reason: legacy. Just as children inherit from their parents, so do HTML elements. Instead of inheriting genes and money, HTML elements inherit stylistic properties. If we have identical selectors, the style placed further down the style sheet takes precedence. Those who don`t use CSS-enhanced browsers can still read pages that use style sheets. CSS has been carefully designed to keep all content visible, even if the browser doesn`t know anything about CSS. Some browsers, such as Netscape Navigator versions 2 and 3, do not support style sheets, but they know enough about the style element to ignore it completely. In addition to supporting style sheets, this is the right behavior. Now let`s look at the sample CSS rule to understand the different components.

Typically, a CSS rule consists of a selector, a declaration block, properties, and values. The following diagram shows how each of these parts is represented in a rule: The rule you just added tells the browser to give a blue color to any HTML text content marked with the HTML element

. (For a refresher on how HTML elements work, please see our tutorial How to use and understand HTML elements.) CSS changes that. CSS puts the designer in the driver`s seat. We spend much of the rest of the book explaining what you can do with CSS. In this chapter, we`ll first walk you through the basics of writing style sheets and how CSS and HTML work together to describe both the structure and appearance of your document. A fundamental feature of CSS is that multiple style sheets can affect the appearance of a document. This feature is called waterfall because the different style sheets are designed to be aligned. Waterfall is a fundamental feature of CSS because we realized that every document can most likely end up with style sheets from multiple sources: the browser, the designer, and possibly the user.