How to use CSS
Cascading Style Sheets (CSS) belong to modern ways of Web design. We can easily impress attributes of all tags HTML and XHTML documents. The importance of css is in external joint to other files. The style files have the affix .css (example - style.css)
The advantage is clear - the document is made by knock-down formatting information and its data format is smaller. The file is read more rapidly by a browser. If you use an old browser, you get the same information but without design. Everything should be all right for new browser versions of Internet Explorer, Mozilla, Opera,…).
Shortly, Styles Sheets offer some advantages:
- separation of content and design
- efficient control over large document sets
- greater typographic control with less code
- different ways of sitting within margins
- how elements are positioned ot the page.
Connection to XHTML document
CSS must be connected to a document. The known three ways of connecting are:
A) by the element link - for external file
B) by the element style - the formula can be filled into the document
C) by the rule @import - the formula is read from external file (by the element style, too)
Element "link"
<link rel="stylesheet" type="text/css" href="styl.css />
Element "style"
<style type="text/css">
body {font-family: Verdana, Helvetica}
</style>
Rule "@import"
<style type="text/css">
@import "css/styl.css";
</style>
I use the third way and recommend it. This is available for older browsers - they don´t read it and you get the information only. But the whole information without new design, only.
Simple examples
Some examples for motivation in Style Sheets using. All of them are read from external files.
How to use css (1)
How to use css (2)
How to use css (3)
How to use css (4)
Style Sheets body
The Cascading Style Sheets are formed by sequence of definitions. They are the group of rules. A selector is at the beginning of this group. Declarations are filled in braces. These ones are separated by the colon.
Important words - always without commas
width: auto;
font-family: arial;
background: #000000;
Declaration
Declaration is formed of an attribute and its value. The values can be associated into one declaration:
h1 {color: #cc0000; font-size: 140%; font-weight: bold; font-stretch: wider}
h2 {font-size: 100%; font-weight: bold}.
Values
Values are defined for particular attributes and they depend on kinds of values. Relative values are very important for the relative size of fonts (depends on browser). We use percentage or rate, no fixed sizes.
Element classes and identifiers (names)
We use element classes when we need change a style (another text-colour, text-size). Thank to this way, we can change the form of picture-size, data classification inside tables, into the layout without table (only view is like a table). Element classes are important for the repeating of some attributes.
We use an identifier when we want the same as element classes using, but at once only (in one page).
Would-be classes
Special selectors without common tags. We can use them for links, for example.
Class joint to document
<div class="thumbnail">
<img src="images/photo.jpg" width="250" height="200" alt="photography" /></div>
Class definition by CSS
div.thumbnail {float: left; width: 260px; height: 220px;}
Identifier joint to document
<div id="footer">
<p>Document content</p>
</div>
Identifier definition by CSS
#footer {background: #000000; font-size: 90%; text-align: center;}
Would-be classes
a:link { color: #800ccc; text-decoration: none}
a:visited {color: #800ccc; text-decoration: none}
a:hover {background: #800ccc; color: #ffffff; text-decoration: none}
The tag div is used for the right dokument decomposition. It isn´t for formatting.