Technologies for web publishing

Ing. Václav Freylich

Lecture 5

aTNPW1-5

Content

CSS – cascading style sheets

aTNPW1-5

What is CSS

Tool for the website developers Powerful „extension“ of the HTML

CSS give us more control over the layout and design of the website than HTML ever did.

CSS allow us to develop the website according the XHTML respecting all standards

aTNPW1-5

CSS – inline declaration

CSS values and properties can be written directly in the HTML code inside the atribute style (availiable in all HTML elements)

<p style="color: red;"></p>

aTNPW1-5

CSS – external style sheet

CSS are usualy defined in the external file

Example: mystyle.css

External file is linked with HTML document

Example:<link rel="stylesheet" type="text/css"

href="mystyle.css" />

aTNPW1-5

CSS – rule syntax

CSS rule consists of selector and list of definitions

Example:body {

background: white; margin: 0 0 0 0;

}

aTNPW1-5

CSS –types of selectorsSelector types (binding the style rule to the element)

1) element selectorCSS p { text-align: right; }HTML <p>Hello world</p>

2) class selectorCSS .myclass { text-align: right; }HTML <p class="myclass">Hello world </p>

3) id selectorCSS #myid { text-align: right; }HTML <p id="myid">Hello world </p>