Scribd
Upload
78 views

CSS (Cascading Style Sheets) Is A Formatting Language

CSS (Cascading Style Sheets) is a formatting language used to define the appearance of web pages. It allows separation of document structure from presentation, making web page design easier. CSS has advantages like easing web page writing, saving space on the host, and opening pages faster. CSS rules define selectors and characteristics to style HTML elements. Common CSS properties control background, fonts, text, boxes, borders, lists, and positioning.

Uploaded by

Mark Juncaj
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
78 views

CSS (Cascading Style Sheets) Is A Formatting Language

CSS (Cascading Style Sheets) is a formatting language used to define the appearance of web pages. It allows separation of document structure from presentation, making web page design easier. CSS has advantages like easing web page writing, saving space on the host, and opening pages faster. CSS rules define selectors and characteristics to style HTML elements. Common CSS properties control background, fonts, text, boxes, borders, lists, and positioning.

Uploaded by

Mark Juncaj
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

- 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;}

You might also like