Examples CSS HTML

  • 576 views
Uploaded on

Few examples of css …

Few examples of css

Unos cuantos ejemplos de CSS

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
576
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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;} Selector Example Property Value
  • 5. Background image body {background-image:url('paper.gif');} Selector Example Property Value
  • 6. Background image - repeat x / y body {background-image:url('prova.jpg');background-repeat:repeat-y;} Selector Example Property Value Property Value
  • 7. Type lists ● Unordered Lists ● Ordered Lists ● Description Lists
  • 8. Unordered lists <ul> <li>Coffee</li> <li>Milk</li> </ul> Example • • Coffee Milk
  • 9. Ordered lists <ol> <li>Coffee</li> <li>Milk</li> </ol> Example 1. Coffee 2. Milk
  • 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. Type text • Text Color • Text Alignment • Text Transform
  • 12. Text Color body {color:#00ff00;} Selector Example Property Value
  • 13. Text Alignment h1{text-align:center;} Selector Example Property Value
  • 14. Text Transform p{text-transform:uppercase;} Selector Example Property Value
  • 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 Example Property Value
  • 17. Table Width and Height table{width:100%;} Selector Property Value th{height:50px;} Selector Example Property Value
  • 18. Table Text Alignment td{text-align:right;} Selector Example 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 Example Value
  • 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. Font Size h1 {font-size:40px;} Selector Property Value h2 {font-size:30px;} p {font-size:14px;} Example
  • 24. Type links • Styling links • Text Decoration • Background color
  • 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. 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. 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. Bonus *{ border: 1px dashed} Selector Example Property Value
  • 29. Website with examples VISIT OUR WEBSITE http://cssweb.esy.es/CSSm8/index.html