html: structure & content css: presentation &...
TRANSCRIPT
![Page 1: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/1.jpg)
html: structure & contentCSS: presentation & style
A CSS Primer
chapter4
![Page 2: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/2.jpg)
Slide 4-2
Deprecated elements
Once deprecated, tags may well become obsolete
<font></font><b></b><i></i><u></u><strike></strike><center></center>
![Page 3: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/3.jpg)
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
![Page 4: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/4.jpg)
Slide 4-4
Styles are stored in Style Sheets
external: separate file
internal: <style> element in head section
inline/local: style property in tag
![Page 5: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/5.jpg)
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>
![Page 6: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/6.jpg)
Slide 4-6
Inline styles (a.k.a. local styles)
<h2style=“color:red”>LocalStyles</h2>
<pstyle="color:sienna;text-align:center">x-rayyankeezulu</p>
![Page 7: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/7.jpg)
Slide 4-7
External Style Sheet
> Stylerulesstoredinseparatefile
(eg)/110/css/110.css
> Connectedtoaclientfileusingalinkelement
![Page 8: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/8.jpg)
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")}
![Page 9: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/9.jpg)
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>
![Page 10: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/10.jpg)
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
![Page 11: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/11.jpg)
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
![Page 12: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/12.jpg)
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).
![Page 13: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/13.jpg)
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>
![Page 14: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/14.jpg)
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>
![Page 15: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/15.jpg)
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 }
![Page 16: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/16.jpg)
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>
![Page 17: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/17.jpg)
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 }
![Page 18: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/18.jpg)
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 }
![Page 19: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/19.jpg)
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
![Page 20: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/20.jpg)
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
![Page 21: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/21.jpg)
Slide 4-21
CSS Display Property
display
values: block | inline | list-item | noneapplies to: all elements
div#links a {display: block;}
return to proj12
![Page 22: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/22.jpg)
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:
![Page 23: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/23.jpg)
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%;
}
![Page 24: html: structure & content CSS: presentation & styleix.cs.uoregon.edu/~michaelh/cl-mh/110/code/PPTs/CSS...html: structure & content CSS: presentation & style A CSS Primer chapter4 Slide](https://reader031.vdocuments.mx/reader031/viewer/2022022502/5aaacdc47f8b9a86188e824c/html5/thumbnails/24.jpg)
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