My favourite ICT lesson By Federico Boschi CSS

My favourite ICT lesson By Federico Boschi CSS 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. CS S

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: h 1 { color: purple; } or with the hexadecimal code: h 1 { 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 a lot of properly: • font-family: Garamond; defines the type of font • font-size: 1 px; 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: 5 px; • margin-right: 5 px; • margin-top: 5 px; • margin-bottom: 5 px; Instead to define the size of a object: • width: 70 px; • height: 40 px;

END Thank for your interest