Post on 16-Mar-2018
html: structure & contentCSS: presentation & style
A CSS Primer
chapter4
Slide 4-2
Deprecated elements
Once deprecated, tags may well become obsolete
<font></font><b></b><i></i><u></u><strike></strike><center></center>
Slide 4-3
CSS terms
style ruleselector {property:value}
examples h2 {color: red}h3 {color: #FF0000; text-align:center}p {color: navy; font-style:italic}h1,h2,h3,h4,h5,h6{color:green}
Misc Resources folder/110 web resources/css
Slide 4-4
Styles are stored in Style Sheets
external: separate file
internal: <style> element in head section
inline/local: style property in tag
Slide 4-5
internal style sheet
<head><styletype="text/css">body{background-color:ivory;color:navy}hr{color:sienna}p{font-family:”Verdana”}</style></head>
Slide 4-6
Inline styles (a.k.a. local styles)
<h2style=“color:red”>LocalStyles</h2>
<pstyle="color:sienna;text-align:center">x-rayyankeezulu</p>
Slide 4-7
External Style Sheet
> Stylerulesstoredinseparatefile
(eg)/110/css/110.css
> Connectedtoaclientfileusingalinkelement
Slide 4-8
External Style Sheet: /110/css/110.css
externalstylesheetsmaycontainonly> cssstylerules> csscomments(fordocumentation)> noHTMLallowed
omit<style>element
hr{color:sienna}p{color:sienna;text-align:center}body{background-image:url(“../images/back40.gif")}
Slide 4-9
Client File/110/about/contact.html
clients connect to the style sheet using the <link> tag.
The <link> tag goes inside the head section:
<head> <link rel="stylesheet" type="text/css"
href=“../css/110.css" /> </head>
Slide 4-10
External Style Sheets
CSS is a breakthrough in Web design:
separates structure (html) from presentation (css)
control the style of multiple Web pages all at once
Define styles in an external style sheet and apply them to as many Web pages as you want
To make a global change, simply change the style: all elements in the site are updated automatically
Slide 4-11
Cascading Style Sheets
Multiple Styles Cascade Into One
Styles can be specified
o inlineo localo external
Even multiple external style sheets can be referenced inside a single HTML document
Slide 4-12
Cascading Order
What style will be used when there is more than one style specified for an HTML element?
Styles will "cascade" by the following rules(number 1 has the highest priority):
4. Inline style5. Internal style sheet (<style> element in the <head>)6. External style sheet7. Browser default
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).
Slide 4-13
selectors:1. simple.2.class.3.id
1.simple: p{font-family:”Verdana”}2.class:p.right{text-align:right}
.center{text-align:center}<pclass="right">Thisparagraphwillberight-aligned.</p>
<pclass="center">Thisparagraphwillbecenter-aligned.</p>
<h2class=“center”>ZutAlors!</h2>
Slide 4-14
Selectors (cont.)
3. id selector:
h2#kermit{color:green} #alert{color:red}
<h2 id=“kermit”> Bein’ Green! </h2>
<p id=“alert”> Caveat Lector! </p>
Slide 4-15
Descendant selectors
Problem: specify a CSS rule that “applies to EM elements that are contained by an H1 element"
Example:
h1 { color: red } em { color: red }
Slide 4-16
4. Descendant selectors
h1 { color: red } em { color: red }
Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as:
<h1>This headline is <EM>very</EM> important</h1>
Slide 4-17
4. Descendant selectors
Add a rule that sets the text color to blue whenever an em occurs anywhere within an h1
h1 { color: red } em { color: red } h1 em { color: blue }
Slide 4-18
Descendant selectors
Problem: specify a CSS rule that “applies to EM elements that are contained by an H1 element"
Example:
h1 { color: red } em { color: red }
Slide 4-19
Classification of Elements:Block-level, Inline, List-item
Block-Level Elements: Displayed on a line by itself
p, h1, div, table, ol, ul, . . .
Can only be contained by other block-level elements (with restrictions):
—p can be in a div—p can not be in a p
Slide 4-20
Classification of Elements:Block-level, Inline, List-item
Inline Elements: Do not begin on a new line
a, em, span, img, …
Can be children of any other element
List-item Elements: appear in lists
Slide 4-21
CSS Display Property
display
values: block | inline | list-item | noneapplies to: all elements
div#links a {display: block;}
return to proj12
Slide 4-22
CSS Box Model
> CSS assumes that every element is contained in an element box
> E-M-B-P-C = Edge-Margin-Border-Padding-Content
> The width of an element is the distance from the left side of the content to the right side of the content:
Slide 4-23
Example using a class selector
div.duckBox {background-color:yellow; color:green;border-style:double; border-color: green;padding: 10px;/* text-align applies only to the inline content of a block-level element. To center the div itself, use the following three properties */margin-left:auto; margin-right:auto; width:50%;
}
Slide 4-24
CSS Resources
• W3Schools.com
• Video: Beginner’s Guide to CSS
• Quick Tutorials from WestCiv
• Eric Meyer: CSSAuthor of CSS: The Definitive Guide