Downloaded 31 times
Uploaded byRaul Raul
Examples CSS HTML
The document provides information on different CSS properties for styling web pages. It covers topics like background styling, lists, text formatting, tables, fonts, and links. Code examples are given for properties like background-color, font-family, text-align, and more. Links to external resources like a website with live examples are also included for reference.
Examples CSS HTML
- 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 Backgroundimage Background Image - Repeat Horizontally or Vertically
- 4.
- 5.
- 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 ● UnorderedLists ● Ordered Lists ● Description Lists
- 8.
- 9.
- 10. Description lists <dl> <dt>Coffee</dt> <dd>- blackhot 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 • TextAlignment • Text Transform
- 12.
- 13.
- 14.
- 15. Type tables • • • • Table Borders TableWidth and Height Table Text Alignment Table Styling
- 16. Table Borders table,th,td {border:1pxsolid black;} Selector Example Property Value
- 17. Table Width andHeight table{width:100%;} Selector Property Value th{height:50px;} Selector Example Property Value
- 18.
- 19.
- 20. Type fonts ● Fontfamily ● Font style ● Font size
- 21. Font Family p{font-family:"Times NewRoman", 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 • TextDecoration • 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: 1pxdashed} Selector Example Property Value
- 29. Website with examples VISITOUR WEBSITE http://cssweb.esy.es/CSSm8/index.html