Your SlideShare is downloading. ×
  • Like
Examples CSS HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Examples CSS HTML

  • 610 views
Published

Few examples of css …

Few examples of css

Unos cuantos ejemplos de CSS

Published 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
610
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