CSS

My favourite ICT lessonBy Federico Boschi

Cascading Style Sheets

WHAT IS IT?

CSS is a language that defines layout of HTML documents (web pages).

CSS controls the visual aspect of the web pages, such as:

• The position and the style of HTML elements;

• Backgrounds;

• Colours and images;

• Text styles;

• Tag styles.

CSS

IMPORT IT IN A HTML PAGE

There are three modes to import a CSS in a html page:

• Inline; <tag style=‘property’>

• Built-in (into the head); <style type=‘text/css’> styles </style>

• External (into the head). <link href=‘file.css’ rel=‘stylesheet’ type=‘text/css’ media=‘screen’ />

BASIC STANDARD

In a CSS code, to define the styles of the tags, we need to write:

tag {

properly: valore;

…

}

For example:

p {

color: red;

text-align: justify;

THE COLOR

The properly ‘color’ allows you to assign a color to a tag. For example:

h1 {

color: purple;

}

or with the hexadecimal code:

h1 {

color: #800080;

}

THE BACKGROUND

To assign a background color to a tag, we use the properly ‘background-color’:

body {

background-color: yellow;

}

Instead to insert a picture as background:

body {

background-image: url(file.jpg);

}

FORMATTING TEXT

To formatting the text there are a lot of properly:

• font-family: Garamond; defines the type of font

• font-size: 1px; defines the size of the text

• font-style: italic; defines the style of the text (italic or normal)

• font-weight: bold; defines the thickness of the text (bold or normal)

• text-align: justify; defines the alignment of the text (justify or center or left or right)

• text-decoration: underline; defines the line of the text (underline or overline or none)

POSITION AND SIZE OF OBJECTS

To define the position of a object we can use some properly:

• margin-left: 5px;

• margin-right: 5px;

• margin-top: 5px;

• margin-bottom: 5px;

Instead to define the size of a object:

• width: 70px;

• height: 40px;

ENDThank for your

interest