Examples CSS HTML

2,391 views

Published on

Few examples of css

Unos cuantos ejemplos de CSS

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,391
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Examples CSS HTML

  1. 1. Vidal i Barraquer SMX - M8 Silvia Guerrero Raul Solà Bartosz Prokott
  2. 2. Índex ❏ Background ❏ Lists ❏ Text ❏ Tables ❏ Fonts ❏ Links
  3. 3. Type background • • • Background color Background image Background Image - Repeat Horizontally or Vertically
  4. 4. Background color body {background-color:#b0c4de;} Selector Example Property Value
  5. 5. Background image body {background-image:url('paper.gif');} Selector Example Property Value
  6. 6. Background image - repeat x / y body {background-image:url('prova.jpg');background-repeat:repeat-y;} Selector Example Property Value Property Value
  7. 7. Type lists ● Unordered Lists ● Ordered Lists ● Description Lists
  8. 8. Unordered lists <ul> <li>Coffee</li> <li>Milk</li> </ul> Example • • Coffee Milk
  9. 9. Ordered lists <ol> <li>Coffee</li> <li>Milk</li> </ol> Example 1. Coffee 2. Milk
  10. 10. Description lists <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> Example Coffee - black hot drink Milk -white cold drink
  11. 11. Type text • Text Color • Text Alignment • Text Transform
  12. 12. Text Color body {color:#00ff00;} Selector Example Property Value
  13. 13. Text Alignment h1{text-align:center;} Selector Example Property Value
  14. 14. Text Transform p{text-transform:uppercase;} Selector Example Property Value
  15. 15. Type tables • • • • Table Borders Table Width and Height Table Text Alignment Table Styling
  16. 16. Table Borders table,th,td {border:1px solid black;} Selector Example Property Value
  17. 17. Table Width and Height table{width:100%;} Selector Property Value th{height:50px;} Selector Example Property Value
  18. 18. Table Text Alignment td{text-align:right;} Selector Example Property Value
  19. 19. Table Styling Example
  20. 20. Type fonts ● Font family ● Font style ● Font size
  21. 21. Font Family p{font-family:"Times New Roman", Times, serif;} Selector Property Example Value
  22. 22. Font Style p.normal {font-style:normal;} Selector Property Value p.italic {font-style:italic;} p.oblique {font-style:oblique;} normal - normal text displays Example italic - the text is shown in italics oblique - the text is tilted
  23. 23. Font Size h1 {font-size:40px;} Selector Property Value h2 {font-size:30px;} p {font-size:14px;} Example
  24. 24. Type links • Styling links • Text Decoration • Background color
  25. 25. Styling links a:link {color:#FF0000;} Selector Property Value 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 Example a:active - a link when clicked
  26. 26. Text Decoration a:link {text-decoration:none;} Selector Property Value a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} Example
  27. 27. Background color a:link {background-color:#B2FF99;} Selector Property Value a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;} Example
  28. 28. Bonus *{ border: 1px dashed} Selector Example Property Value
  29. 29. Website with examples VISIT OUR WEBSITE http://cssweb.esy.es/CSSm8/index.html

×