Examples CSS HTML

Few examples of css

Unos cuantos ejemplos de CSS

1. Vidal i Barraquer
SMX - M8
Silvia Guerrero
Raul Solà
Bartosz Prokott

2. Índex
❏Background
❏Lists
❏Text
❏Tables
❏Fonts
❏Links

3. Type background
•Background color
•Background image
•Background Image - Repeat Horizontally
or Vertically

4. Background color

body {background-color:#b0c4de;}



Example
Property Value Selector

5. Background image


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



Example
Property

Value Selector

6. Background image - repeat x / y




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

Property

Value Selector Property

Value
Example

7. Type lists
●Unordered Lists
●Ordered Lists
●Description Lists

8. Unordered lists

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>


•Coffee
•Milk
Example

9. Ordered lists

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>


1.Coffee
2.Milk
Example

10. 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

11. Type text
•Text Color

•Text Alignment

•Text Transform

12. Text Color

body {color:#00ff00;}
Property

Value Selector
Example

13. Text Alignment

h1{text-align:center;}
Property

Value Selector
Example

14. Text Transform

p{text-transform:uppercase;}


Property

Value Selector
Example

15. Type tables
•Table Borders
•Table Width and Height
•Table Text Alignment
•Table Styling

16. Table Borders

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

Selector Property Value
Example

17. Table Width and Height
table{width:100%;}

th{height:50px;}


Selector Property Value
Example
Selector Property Value

18. Table Text Alignment


td{text-align:right;}
Example
Selector Property Value

19. Table Styling



Example

20. Type fonts
●Font family

●Font style

●Font size

21. Font Family
p{font-family:"Times New Roman", Times, serif;}
Selector Property Value
Example

22. 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

23. Font Size
h1 {font-size:40px;}

h2 {font-size:30px;}
p {font-size:14px;}



Selector Property Value
Example

24. Type links
•Styling links

•Text Decoration

•Background color

25. 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

26. 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

27. 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

28. Bonus
Selector Property Value
*{ border: 1px dashed}
Example

29. Website with examples
http://cssweb.esy.es/CSSm8/index.html
VISIT OUR WEBSITE