Part 3 Introduction to CSS

CSS Text

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

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

CSS Font

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

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

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”}

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

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

Links (anchor)

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

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

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

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

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

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 }

CSS Lists

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

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

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

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