Examples CSS HTML

Vidal i Barraquer

SMX - M8

Silvia Guerrero

Raul Solà

Bartosz Prokott

Índex

❏Background

❏ Lists

❏ Text

❏ Tables

❏ Fonts

❏ Links

Type background

• Background color

• Background image

• Background Image - Repeat Horizontally

or Vertically

Background color

body {background-color:#b0c4de;}

Example

Property Value Selector

Background image

body {background-image:url('paper.gif');}

Example

Property

Value Selector

Background image - repeat x / y

body {background-image:url('prova.jpg');background-repeat:repeat-y;}

Property

Value Selector Property

Value

Example

Type lists

● Unordered Lists

● Ordered Lists

● Description Lists

Unordered lists

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

• Coffee

• Milk

Example

Ordered lists

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

1. Coffee

2. Milk

Example

Description lists

<dl>

<dt>Coffee</dt>

<dd>- black hot

drink</dd>

<dt>Milk</dt>

<dd>- white cold

drink</dd>

</dl>

Coffee

- black hot drink

Milk

-white cold drink

Example

Type text

• Text Color

• Text Alignment

• Text Transform

Text Color

body {color:#00ff00;}

Property

Value Selector

Example

Text Alignment

h1{text-align:center;}

Property

Value Selector

Example

Text Transform

p{text-transform:uppercase;}

Property

Value Selector

Example

Type tables

• Table Borders

• Table Width and Height

• Table Text Alignment

• Table Styling

Table Borders

table,th,td {border:1px solid black;}

Selector Property Value

Example

Table Width and Height

table{width:100%;}

th{height:50px;}

Selector Property Value

Example

Selector Property Value

Table Text Alignment

td{text-align:right;}

Example

Selector Property Value

Table Styling

Example

Type fonts

● Font family

● Font style

● Font size

Font Family

p{font-family:"Times New Roman", Times, serif;}

Selector Property Value

Example

Font Style

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

normal - normal text displays

italic - the text is shown in italics

oblique - the text is tilted

Selector Property Value

Example

Font Size

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

Selector Property Value

Example

Type links

• Styling links

• Text Decoration

• Background color

Styling links

a:link {color:#FF0000;}

a:visited {color:#00FF00;}

a:hover {color:#FF00FF;}

a:active {color:#0000FF;} a:link - a link without visiting

a:visited - a link that has been visited

a:hover - a link when the mouse is over

a:active - a link when clicked

Selector Property Value

Example

Text Decoration

a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

a:active {text-decoration:underline;}

Selector Property Value

Example

Background color

a:link {background-color:#B2FF99;}

a:visited {background-color:#FFFF85;}

a:hover {background-color:#FF704D;}

a:active {background-color:#FF704D;}

Selector Property Value

Example

Bonus

Selector Property Value

*{ border: 1px dashed}

Example

Website with examples

http://cssweb.esy.es/CSSm8/index.html

VISIT OUR WEBSITE