|
CSS layout of web pages enjoys deserved popularity among modern web developers. CSS – Cascading Style Sheets – allow webmasters to set very flexible styles of document presentation, help to save time and efforts. How to create CSS layout of web pages?
CSS style information can be provided by different sources. There are several types of author styles (styles provided by the author of the web page): inline styles, embedded style and external style sheets. The most rational way of style sheets use is external style sheets: the CSS code is saved as a separate CSS file that can be referenced from any HTML-, XHTML- or XML-page.
The main advantages of CSS layout as compared to HTML layout are:
- more convenient management of the website pages design
- more precise presentation of elements irrespective of the user's web browser
- more convenient coding thanks to separation of the site content from presentation
- considerable enhancement of standard HTML facilities
To reference to a CSS file from a document you should use the following construction:
<link rel="stylesheet" type="text/css" href="/style.css">, where
style.css is the name of the cascading style sheet file
Such approach provides an opportunity to use one style and one CSS file for many websites.
To make CSS layout of web pages you can use special visual CSS editors or common text editors. Each cascading style sheet consists of a certain set of rules. Rules, in their turn, consist of a set of selectors and a declaration block. Any selector may be presented by any element (tag) of the markup language (HTML, XHTML, XML). The declaration block consists of the set of tag properties and their values. Each declaration block is separated with the help of curly brackets (braces).
CSS syntax is described in the following way:
Selector {
Property: Value;
Property: Value;
}
This way you can specify font color, font size, font style, color and style of table borders, table rows and columns, style of hovered and visited links and many other properties. If an HTML tag has been chosen as a selector, this selector influences on all tags of this type that are present on the pages of the site.
Let us give an example:
p {
color: black;
font-size: 18px;
}
In this example any text within the <p> tags will have black color and 18 pt font size.
And what should you do if you face a necessity to set a separate style of presentation for certain paragraphs without affecting the presentation style of the whole web page? In this case you have to use classes. Classes set style of presentation for the elements to which this class has been applied.
In HTML code of a web page classes of elements are specified in the following way:
<tag name class="class name">
In a CSS document the style of presentation for this class is described in the following way:
.class name
{
property: value;
property: value;
…...
}
Pseudo-classes and pseudo-elements allow to set dynamic properties for presentation of markup elements. The use of pseudo-classes and pseudo-elements is described in this article in detail.
CSS layout of web pages, as it has already been mentioned, allows to make the code of pages more space-saving and convenient. For instance, you can group selectors in order to set the same properties of presentation for several elements at once.
For example, you have to sent font type, font size and font color for the tags p, div and h1. It is enough just to enumerate the selectors of these tags separating them with a comma and set desired values for the properties:
div, p , h1 { color:red; font-size:12px; }
This code means, that any text within div, p and h1 tags will have red color and 12-pt font size.
CSS layout of web pages may be used for development of websites devoted to any topic and having any structure. It is compatible with most of modern browsers. CSS layout of web pages enables flexible management of element properties depending on the user's behavior.
TAGS
css layout,
website layout,
css layout of web pages,
style sheets,
cascading style sheets |
web programming 
