Download presentation
Presentation is loading. Please wait.
Published byAlexandrina Lane Modified over 8 years ago
1
html: structure & content CSS: presentation & style A CSS Primer chapter 4
2
Slide 4-2 Deprecated elements Once deprecated, tags may well become obsolete
3
Slide 4-3 CSS terms style rule selector {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 resources110 web resources/css
4
Slide 4-4 Styles are stored in Style Sheets external: separate file internal: element in head section inline/local: style property in tag
5
Slide 4-5 internal style sheet body {background-color: ivory; color: navy} hr {color: sienna} p {font-family:”Verdana”}
6
Slide 4-6 Inline styles (a.k.a. local styles) Local Styles x-ray yankee zulu
7
Slide 4-7 External Style Sheet 1. Style rules stored in separate file (eg) /110/css/110.css 2. Connected to a client file using a link element
8
Slide 4-8 External Style Sheet: /110/css/110.css external style sheets may contain only 1. css style rules 2. css comments (for documentation) 3. no HTML allowed omit element hr {color: sienna} p {color: sienna; text-align:center} body {background-image: url(“../images/back40.gif")}
9
Slide 4-9 Client File /110/about/contact.html clients connect to the style sheet using the tag. The tag goes inside the head section:
10
Slide 4-10 External Style Sheets CSS is a breakthrough in Web designCSS 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
11
Slide 4-11 Cascading Style Sheets Multiple Styles Cascade Into One Styles can be specified o inline o local o external Even multiple external style sheets can be referenced inside a single HTML document
12
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): 1. Inline style 2. Internal style sheet ( element in the ) 3. External style sheet 4. 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 tag, in an external style sheet, or in a browser (a default value).
13
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} This paragraph will be right-aligned. This paragraph will be center-aligned. Zut Alors!
14
Slide 4-14 Selectors (cont.) 3. id selector: h2#kermit {color: green} #alert {color: red} Bein’ Green! Caveat Lector!
15
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 }
16
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: This headline is very important
17
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 }
18
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 }
19
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
20
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
21
Slide 4-21 CSS Display Property display values: block | inline | list-item | none applies to: all elements div#links a {display: block;} return to proj12
22
Slide 4-22 CSS Box Model > CSS assumes that every element is contained in an element boxelement 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:
23
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%; }
24
Slide 4-24 CSS Resources W3Schools.com Video: Beginner’s Guide to CSSBeginner’s Guide to CSS Quick Tutorials from WestCiv Eric Meyer: CSS Author of CSS: The Definitive Guide Eric Meyer: CSS
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.