Lecture
CSS (Cascading Style Sheets) is a set of formatting settings that is applied to the elements of a web page to control their appearance and position.
Styles are a convenient, practical and effective tool when building web pages and formatting text, links, images and other elements. Below are the advantages that CSS provides.
The idea that HTML code should be free of presentational elements such as setting color, font size and other parameters is as old as the hills. Ideally, a web page should contain only logical formatting tags, and the appearance of the elements is defined through styles. With this kind of separation, the design and the layout of the site can be developed in parallel.
A site is not just a set of documents linked to one another, but also a unified arrangement of the main blocks and their design. Applying consistent design to headings, body text and other elements creates continuity between pages and makes it easier for users to work with the site and perceive it as a whole. For developers, using styles considerably simplifies the design process.
Styles are usually stored in one or several special files, which are linked to from all the documents of the site. This makes it convenient to edit the style in one place, while the appearance of the elements automatically changes on all pages that are linked to the specified file. Instead of modifying dozens of HTML files, it is enough to edit a single style file and the design of the required documents changes immediately.
Unlike HTML, styles offer far more options for formatting the elements of web pages. With simple means you can change an element's background color, add a border, set the font, define the size, position and much more.
When styles are stored in a separate file, it is cached and retrieved from the browser cache on subsequent requests. Thanks to caching, and to the fact that the styles are stored in a separate file, the code of web pages is reduced and the loading time of documents decreases.
Note
The cache is a special location on the user's local computer where the browser saves the site's files the first time it is accessed. On subsequent visits to the site, these files are no longer downloaded over the network but are taken from the local disk. This approach makes it possible to significantly increase the loading speed of web pages.
Nowadays, the modern approach to building websites involves actively using styles to control the appearance of web page elements and their layout. So-called block layout, or layout using layers, is gaining more and more followers, and this in turn requires knowledge of CSS properties and their correct application on a site.
Note
Conventionally, page layout is divided into table-based layout, where the table cells serve as an invisible modular grid, and layout using layers. Further on, by a layer we will mean a <DIV> or <SPAN> element to which style parameters are added to change the element's appearance and position.
There are several ways to add styles to a web page, which differ in their capabilities and purpose. The ways of attaching CSS are discussed below.
When using a linked style sheet, the description of the selectors and their properties is placed in a separate file, usually with a css extension, and the <LINK> tag is used to link the document to this file. This tag is placed inside the <HEAD> container, as shown in example 2.1.
Example 2.1. Attaching a linked style sheet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Styles</title>
<link rel="stylesheet" type="text/css" href="mysite.css">
<link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">
</head>
<body>
<h1>Heading</h1>
<p>Text</p>
</body>
</html>The values of the <LINK> tag's parameters — rel and type — remain unchanged, as shown in this example. The href parameter specifies the path to the CSS file; it can be set either relatively or absolutely. Note that this way you can also attach a style sheet located on another site.
The contents of the mysite.css file attached via the <LINK> tag are shown in example 2.2.
Example 2.2. Style file
H1 {
color: navy;
font-size: 200%;
font-family: Arial, Verdana, sans-serif;
text-align: center;
}
P {
padding-left: 20px;
}As this example shows, the style file stores nothing but CSS syntax. In turn, the HTML document contains only a link to the style file, i.e. this way fully implements the principle of separating a site's content and presentation. That is why using a linked style sheet is the most universal and convenient method of adding style to a site. After all, the styles are stored in a single file, and the HTML documents contain only a reference to it.
When using a global style sheet, the CSS properties are described in the document itself and are usually placed in the header of the web page. In terms of flexibility and capabilities, this method is inferior to the previous one, but it also allows all the styles to be placed in one location — in this case, directly in the body of the document, using the <STYLE> container, as shown in example 2.3.
Example 2.3. Using a global style sheet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Global styles</title>
<style type="text/css">
H1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>In this example a style is defined for the <H1> tag, which can then be used throughout this web page.
Note
A global style sheet can be placed not only inside the <HEAD> container, but also anywhere in the code of the HTML document.
An inline style is essentially an extension for a single tag used on a web page. To define the style, the tag's style parameter is used, and its attributes are specified using the style sheet language (example 2.4).
Example 2.4. Using inline styles
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Inline styles</title>
</head>
<body>
<h1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336">Heading</h1>
</body>
</html>In this example, the style of the <H1> tag is set using the style parameter, in which the style attributes are listed separated by semicolons.
Note
The use of inline styles on a site is recommended to be limited, or avoided altogether. The reason is that adding such styles increases the overall size of the files, which increases their loading time in the browser and makes it harder for developers to edit the documents.
All the described methods of using CSS can be applied both independently and in combination with one another. In this case it is necessary to keep their hierarchy in mind. The inline style is always applied first, then the global style sheet, and lastly the linked style sheet. In example 2.5, two methods of adding style sheets to the document are used together.
Example 2.5. Combining different methods of attaching styles
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Attaching a style</title>
<style type="text/css">
H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
</style>
</head>
<body>
<h1 style="font-size: 36px; font-family: Times, serif; color: red">Heading
1</h1>
<h1>Heading 2</h1>
</body>
</html>In this example, the first heading is set to red color and a size of 36 pixels using an inline style, while the next one is set to green color via the global style sheet.
You can import the contents of a CSS file into the current style sheet using the @import command. This method may be used together with a linked or global style sheet, but not with inline styles. The general syntax is as follows.
@import url("file name") media types;
@import "file name" media types;
After the @import keyword, the path to the style file is specified in one of the two ways shown — using the url directive or without it. Example 2.6 shows how to import a style from an external file into a global style sheet.
Example 2.6. Importing CSS into a global style sheet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Import</title>
<style type="text/css">
@import url("/style/header.css");
H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>This example shows how to attach the header.css file, which is located in the style folder.
Importing happens the same way in the style file that is then attached to the document (example 2.7).
Example 2.7. Importing in a linked style sheet
@import "/style/print.css" print;
@import "/style/palm.css" handheld;
BODY {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 90%;
background: white;
color: black;
}This example shows the contents of the mysite.css file, which is attached to the required documents using the method shown in example 2.1, namely via the <LINK> tag.
styles for tags
Now I'll explain how you can avoid creating any classes at all, and not open any CSS code. In this very article, you will see how to insert styles directly into a tag!
Styles are inserted into a tag using the STYLE attribute, that is, you write it like this: «style=" style "».
<b style="color:#00FF00;">Green text using CSS</b>
Comments