CSS (Cascading Style Sheets) Is A Formatting Language

- CSS (Cascading Style Sheets) is a formatting language
which helps define the appearance (style) of Web pages.
CSS has far bigger designer possibilities from pure HTML. Today,
CSS is irreplaceable in Web pages design.
The first version of CSS was created in 1996.
Advantages of CSS:
- Eases Web page writing.
- It saves space on the host.
- Opens pages faster (a CSS file can be applied on more than
one HTML page).
CSS rules 1
- Every correct HTML document written after Web standards

needs to have a separated content (structure) from the
appearance (style).
- In other words, first you need to write the HTML code (the
title, paragraphs, pictures, sections, forms etc.) as a
separate document, than you need to link that document to
the CSS document in which you have defined the styles.
- In rare cases CSS can be written inside an HTML document.
- A CSS document is the simplest textual document which
contains instructions/commands for the Web browsers, and
which define styles for particular HTML elements on the Web
page.
CSS rules 2
CSS rule (syntax):
Selector {characteristic1: value1; characteristic2: value2; }

CSS comments are specified between characters /* and */.
CSS rules 3
If the selector is an HTML element (tag):

p {characteristic1: value1; characteristic2: value2; }
If the selector is a class of HTML elements:
.nameoftheClass {characteristic1: value1; characteristic2:
value2; }
If the selector is an identified value (ID) of HTML elements:

#IDvalue {characteristic1: value1; characteristic2: value2;
}
CSS rules 4
- The descriptions of styles are set between the initial and

final mark of the style (<style> ... <style>) in the header
of the HTML code of the Web page.
- The description of styles contains one or more rules.
Where can a CSS code (style) be located

A CSS code can be set in three standard places:
- Directly in the HTML tag, using the argument style (inline).
- In the header of the document inside the tag <style>.
- In the extern file, which is linked with the tag <link>.
In order to completely use the advantages of CSS, you need to

use the extern style. The extern style is a textual file with the
extension .css.
The order of stacking (priority) and interpretation of

styles
Priority and interpretation (from the lowest to the highest):

1. Browser default.
2. External style sheet.
3. Internal style sheet (inside the <head> tag).
4. Inline style (inside the HTML element)
This means that the inline of CSS (inside the HTML element) has
the highest priority, which means that it will run over every
definition of the three previous types of styles. The style defined
inside the head section of the document is older than the extern
file and the browser default.
Characteristics
Some of the characteristics (attributes) of CSS can be categorized

as the following groups:
- Definition of the background of the element,
- Edge/margin,
- Appearance,
- Dimensions,
- Font,
- Position etc.
Values
The values of attributes can be:

- Predefined key words,
- Numerical values.
Measurement units
The most important CSS measurement units are:

- px pixel, which means the number of dots on the screen
- pt point, mostly used for setting the font size (1pt = 1/72
inch).
The most important styles
There are tens of different styles which control the appearance of

the HTML document. All the styles are grouped according to the
type of appearance they control:
- background,
- fonts, text and colors,
- box and border styles (borders),
- lists,
- positioning.
CSS background and colors

In order to define the styles for the background of a specific
sector we use the option background.
The order of characteristics:

background-color
background-image
background-repeat
background-attachment
background-position
Color of the background
In order to define the color of the background we use the

characteristic background-color. The color of the background for
the whole page is defined in the <body> tag.
Example 1: body {background-color: #B0C4DE;}
The color is prompted in one of three ways:

- by name ex. red, yellow...
- by RGB value ex. rgb(255,0,0)
- by Hex value ex. #FF0000
Picture as background
In order to define the pictures as background we use the

characteristic background-image. It is defined the <body> tag.
Example 1: body {background-image: url(background.gif);}
To control the repeating we use the characteristic background-

repeat (repeat-x, repeat-y, no-repeat).
The position of the picture is determined with the characteristic

background-position (vertical: top/center/bottom; horizontal:
left/center/right).
We can decide if the picture scrolls or not with the characteristic
background-attachment (scroll, fixed).
Fonts
With the help of different characteristics you can choose the font,
to change to size and to give characteristics as are bold and italic.
By using the characteristic font-family you can choose the font

(we advise choosing the list of fonts and the browser will use the
first available font from the list).
Example 1: p {font-family: Verdana, Tahoma, Arial, Helvetica;}
- Font-style: values can be normal, italic and oblique.

- Font-weight: can have values normal, bold, bolder,
lighter or numerical value.
- Font-variant: can have values normal or small-caps.
Example 3: h1 {
font-family: Verdana, Tahoma, Arial, Helvetica;
font-size: 14px;
color: #00F00;
font-style: italic;
font-variant: small-caps;
}
CSS offers you many options for defining the styles of text
appearance:
color defines color of the text.
Example 1: p {(color: #00F00;}
direction changes direction of the text.
line-height changes the distance between text lines. Can have

the values:
- normal
- number
- length
- %
Example 3: h1 {line-height: 30px;}
Text
Letter-spacing increases or reduces the distance between

letters. Can have values:
Example 4: h1 {letter-spacing: 2px;}
Text-align changes position of the text in the element. Can

have values: left, right, center and justify.
Example 5: h1 {text-align: center;}
Text-indent sets the first text line. Can have values:

- Length defines where will the first line be, exactly in pixels,
dots, centimeters,
- % defines at what percent will the line be
Example 7: p {text-indent: 50px;}
Text-shadow changes the effect of text shadow/shading. Can

have values:
- none
- color
- length
Example 8: p {text-shadow: 2px 2px 2px #000;}
Text-transform is used for controlling the letters. Can have

values:
- none
- capitalize
- uppercase
- lowercase
Example 9: h2 {text-transform: uppercase;}
Word-spacing is used to increase and decrease the space

between words.
Example 10: p {word-spacing: 30px;}

CSS (Cascading Style Sheets) Is A Formatting Language

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

CSS (Cascading Style Sheets) Is A Formatting Language

Caricato da

Copyright:

Formati disponibili

- CSS (Cascading Style Sheets) is a formatting language

which helps define the appearance (style) of Web pages.

- Every correct HTML document written after Web standards

CSS rule (syntax):

Selector {characteristic1: value1; characteristic2: value2; }

If the selector is an HTML element (tag):

If the selector is an identified value (ID) of HTML elements:

- The descriptions of styles are set between the initial and

Where can a CSS code (style) be located

In order to completely use the advantages of CSS, you need to

The order of stacking (priority) and interpretation of

Priority and interpretation (from the lowest to the highest):

Some of the characteristics (attributes) of CSS can be categorized

The values of attributes can be:

The most important CSS measurement units are:

The most important styles

There are tens of different styles which control the appearance of

CSS background and colors

The order of characteristics:

Color of the background

In order to define the color of the background we use the

Example 1: body {background-color: #B0C4DE;}

The color is prompted in one of three ways:

In order to define the pictures as background we use the

Example 1: body {background-image: url(background.gif);}

To control the repeating we use the characteristic background-

The position of the picture is determined with the characteristic

By using the characteristic font-family you can choose the font

Example 1: p {font-family: Verdana, Tahoma, Arial, Helvetica;}

- Font-style: values can be normal, italic and oblique.

color defines color of the text.

Example 1: p {(color: #00F00;}

direction changes direction of the text.

line-height changes the distance between text lines. Can have

Example 3: h1 {line-height: 30px;}

Letter-spacing increases or reduces the distance between

Example 4: h1 {letter-spacing: 2px;}

Text-align changes position of the text in the element. Can

Example 5: h1 {text-align: center;}

Text-indent sets the first text line. Can have values:

Example 7: p {text-indent: 50px;}

Text-shadow changes the effect of text shadow/shading. Can

Example 8: p {text-shadow: 2px 2px 2px #000;}

Text-transform is used for controlling the letters. Can have

Example 9: h2 {text-transform: uppercase;}

Word-spacing is used to increase and decrease the space

Example 10: p {word-spacing: 30px;}

Potrebbero piacerti anche