Chapter 1-3 AWP_CSS (26).pdf

Cascading Style Sheets (CSS)  Cascading Style Sheets (CSS) ▪CSS Syntax ▪Where to Place CSS Styles ▪Selectors ▪Bootstrap ▪CSS Properties for Colors ▪CSS Properties for Fonts ▪CSS Properties for Text ▪Bounding Box Properties  Cascading Sty...

Cascading Style Sheets (CSS)  Cascading Style Sheets (CSS) ▪CSS Syntax ▪Where to Place CSS Styles ▪Selectors ▪Bootstrap ▪CSS Properties for Colors ▪CSS Properties for Fonts ▪CSS Properties for Text ▪Bounding Box Properties  Cascading Style Sheets (CSS) CSS is a style sheet language used for describing the appearance, layout, and the presentation of a document written in a markup language. Describes how information is to be displayed, not what is being displayed. For example, CSS covers fonts, colors, margins, lines, height, width, background, positions and many other things.  CSS Syntax Statement must have a selector and a declaration. Declaration is one or more properties separated by semicolon ";". Property has name and value separated by colon ":". Value may have a unit as well.  Syntax to Specify Style Rules Selector { Property 1: value1; Property 2: value 2; Declaration... Property N: value N; }  CSS Selectors ❖Universal selector (*): selects all elements in a page. *{ color: blue; } ❖HTML element selector: selects specific HTML element. p{ fontsize: 14px; }  CSS Selectors ….. Class selector (element.className): selects an element using its class. ul.nav { position: absolute; } Global class selector (.className): selects all elements using the common class name..nav { position: absolute; }  CSS Selectors ID selector (#id): selects an element using its id. #header { margin: 5px 0; } Selector groups: simply a list of selectors separated by commas to apply the same style..header,.footer,.infotext, h2 { color: black; background: yellow; }  Body Styles Boy { font-size: 16px; } Applies a style to the entire body of your page. Saves you from manually applying a style to each element.  Link Pseudo Class Selectors ❖Include the following that should be specified in this order: Selector for normal links is a:link Visited links is a:visited Hover links is a:hover ▪ Active links is a:active ▪ Example: a:hover { color: blue; } CSS Properties for Colors  Specifying Colors ❖Colors can be specified in three ways: ▪Color names: black, blue, gray, green, lime, navy, olive, purple, red, silver, white, yellow, …. ▪RGB codes: red, green, and blue values from 0 to 255. ▪Hex codes (#RRGGBB): RGB values in base16 from 00 (0) to FF (255).  Specifying Colors p{ color: red; } h2 { color: rgb (128, 0, 196); } h4 { color: #FF8800; }  CSS Properties for Fonts ❖Complete list of font properties (http://www.w3schools.com/css/css_reference.asp#font)  Font family Enclose multiword font names in quotes. Generic font names: serif, sans serif, cursive, fantasy, monospace.  More about fontfamily If the first font is not found on the user's computer, the next is tried. Placing a generic font name at the end of your font family value, ensures that every computer will use a valid font. Font size , font weight and font style Common font size units: pixels (px), point (pt) Values for fontweight: normal| lighter | bold | bolder | 100 | 200 |... | 900 Values for fontstyle: normal| italic The liststyletype property  Styles that Conflict ❖When two styles set conflicting values for the same property, the latter style takes precedence.  Some CSS Properties for Text ❖Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#text) Bounding Box Properties Bounding Box Properties (Cont’d…) ❖Border Properties: Border top width Border width Border right width Border style Border bottom width Border color Border left width border Bounding Box Properties (Cont’d…) Margin Properties: Padding Properties: Marg in top Padding top Marg in bottom Padding bottom Marg in left Padding left Marg in right Padding right Margin Padding  Where to Place CSS Styles? We can add CSS styles to our pages at three different levels. External Style Sheets: When the style is used for more than one page. Embedded (Internal) Style Sheets: When the style appears more than once of your page. Inline Style Sheets: When the style is used in a single place of your page.  External Style Sheets Create separate CSS rules (save as.css file). Specify link to this external style sheet in the section of the HTML document as follow. File name where its path can be either absolute or relative (in this case relative path). ❖ A page can link to multiple style sheet files.  Embedded Style Sheets: ❖CSS code can be embedded within the head section..header,.footer,.infotext { color: background: yellow; } Bad style and should be avoided when possible (why?)  Inline Styles: the style attribute ❖Use the style attribute for each HTML element to directly specify the style. Example: This style applies only to this element. ❖Higher precedence than embedded or external styles.