1. Part 3 Introduction to CSS

2. CSS Text

3. Text Styles h1 {color: green} // rgb(0,255,0), #00ff00 h2{letter-spacing: 0.5cm} // 2px h3 {text-align: right} // center, left, justify h4 {text-decoration: overline} // line-through, underline, blink, none h5 {text-indent: 5cm} // 30px h6 {text-transform: uppercase} // lowercase, capitalize text-indent property indents the first line of text in the element by the specified amount text-decoration property applies decorations to text in an element

4. Text Together – example p {color: green; letter-spacing: 0.5cm; text-align: left; text-decoration: underline; text-indent: 2cm; text-transform: uppercase; } This is head

5. CSS Font

6. Font-style The font-style property is mostly used to specify italic text. This property has three values: normal italic oblique p {font-style: normal} // italic, oblique

7. Font-weight font-weight property specifies the “boldness” of text. Possible values are: bold normal (the default) bolder (bolder than bold text) lighter (lighter than normal text) Boldness also can be specified with multiples of 100, from 100 to 900 (e.g., 100, 200, …, 900). Text specified as normal is equivalent to 400, and bold text is equivalent to 700 p {font-weight: lighter} // bold, normal, 900

8. Font-family font-family property is used to specify the font that should be displayed The font-family property can hold several font names. If the browser does not support the first font, it tries the next font and so on. Separate the different font names with a comma. If a font name contains white-space, it must be placed in quotes. p {font-family: times, arial, “sans serif”}

9. Font-size font-size property specifies the size used to render the font Relative length measurements: px (pixels – size varies depending on screen resolution) em (usually the height of a font’s uppercase M) ex (usually the height of a font’s lowercase x) Percentages (of the font’s default size) Absolute-length measurements (units that do not vary in size): in (inches) cm (centimeters) mm (millimeters) pt (points; 1 pt = 1/72 in) pc (picas; 1 pc = 12 pt) p {font-size: 100%} // 80%, 120%, 12px

10. Font Together – example p{font: italic bold 30px consolas;} //style, weight, size, family This is head

11. Links (anchor)

12. Styling Links Links can be styled with any CSS property (e.g. color, font- family, background, etc.). links can also be styled differently depending on what state they are in. Links have four pseudoclasses representing the different states: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user moves the mouse over it a:active - a link the moment it is clicked

13. CSS Syntax for anchor a:link {color:green} a:visited {color:red} a:hover {color:orange} a:active {color:blue} When setting the style for several link states, there are some order rules: 1.a:hover MUST come after a:link and a:visited 2.a:active MUST come after a:hover

14. CSS Syntax for anchor - Example a:link {color:green} a:visited {color:red} a:hover {color:orange} a:active {color:blue} This is a link

15. Anchor Styles Other common ways to style links is through using text decoration a:link {text-decoration:none} a:visited {text-decoration:none} a:hover {text-decoration:underline} a:active {text-decoration:underline} This is a link

16. Anchor Styles The background-color property specifies the background color for links. a:link {background-color:#B2FF99} a:visited {background-color:#FFFF85} a:hover {background-color:#FF704D} a:active {background-color:#FF704D} This is a link

17. CSS comments A CSS comment begins with "/*", and ends with "*/", like this: /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }

18. CSS Lists

19. Lists The CSS list properties allow you to: Set different list item markers for ordered lists Set different list item markers for unordered lists Set an image as the list item marker

20. Unordered Lists ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ul.c {list-style-type:disc;} Example of unordered lists: Coffee Tea Coffee Tea Coffee Tea Example of unordered lists: o Coffee o Tea  Coffee  Tea Coffee Tea

21. Ordered Lists ol.d {list-style-type:upper-roman;} ol.e {list-style-type:lower-alpha;} ol.f {list-style-type:decimal;} Example of ordered lists: Coffee Tea Coffee Tea Coffee Tea Example of Ordered lists: I.Coffee II.Tea a.Coffee b.Tea 1.Coffee 2.Tea

22. List – image markers To specify an image as the list item marker, use the list- style-image property ul{list-style-image:url('sqpurple.gif')} Coffee Tea Coca Cola