Download presentation
Presentation is loading. Please wait.
1
CSS-Formatting Review Cascading Style Sheets addstyle to your HTML web pages
2
Cascading refers to the hierarchy of rules that set the style The closer the rule is to the actual thing it’s styling, the more power it has. Style Sheet = list that you create that specifies how you want your web page to look: color, font and out lay
3
Takes the confusion out of web page design by separating content code (HTML) from presentation code (CSS) Eliminates display & download problems Brings web pages up to universal standards: ADA compliance Usability & Access CSS – What is it Good for?
4
The hierarchy of rules a) Inline Style Sheet b) Internal (Embedded) Style Sheet c) External Style Sheet
5
<body> What was I thinking? What was I thinking? </body> What was I thinking? <body> What was I thinking? What was I thinking? </body> What was I thinking? a) Inline example Original html code
6
My Wonderful Example body { text-align: left; font-family: verdana, sans-serif; } Text aligned left and styled as Verdana b) Internal/Embedded
7
c) External <html><head> My Way My Way </head> </html> Link to a separate css page
8
External CSS File /* CSS Formatting Document */ body{ color: #FFFFFF; background-color: #000000; font-family: Verdana, sans-serif; font-size: 1em; text-align: left;}
9
Style Rules: Define a Selector HTML elements can be styled a, h1, img, body, etc. In CSS these are selectors The Curly braces and their contents are the Declaration body {color:#000000;} Declaration Selector
10
Property & Value body{ text-align: left; font-family: verdana, sans-serif; } The “text-align” property has the value of “left”
11
Style Classes Rules that can be applied to a variety of html tags.bar {color: maroon; background-color: yellow;}.bar {color: maroon; background-color: yellow;} … text … text … link link
12
ID Selectors The ID attribute of an HTML element allows an identifier to one element instance in the Web page. CSS ID selectors match an element instance based on its identifier. A CSS ID selector contains a "#" immediately followed by the ID value. #content {font-family:verdana; color:#000000;} …other html elements… …other html elements…
13
More on IDs #content h1 { font-size:1.5em; } This tells the browser how to display any h1 tags inside the div with the id of content, If the h1 is in a div with a different id it will not display with this style.
14
CSS coding tips Grouping: H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif } is equivalent to: H1, H2, H3 { font-family: sans-serif }
15
CSS Tips Descendant selectors selectors that match an element that is the descendant of another element. For example and em tag that is inside an h1 tag. Html code: This headline is very important This headline is very important To style ems to be blue inside a red h1 and red everywhere else: h1 { color: red } em { color: red } h1 em { color: blue } This headline is very important
16
CSS Tips The dynamic pseudo-classes a:link { color: red } /* unvisited links */ a:visited { color: blue } /* visited links */ a:hover { color: yellow } /* user hovers */ a:active { color: lime } /* active links */ Comments in CSS files /* help you easily find certain styles */
17
Go Forth and Style
Similar presentations
