1 / 24

A CSS Primer

chapter 4. A CSS Primer. html: structure & content CSS: presentation & style. Deprecated elements. Once deprecated , tags may well become obsolete <font></font> <b></b> <i></i> <u></u> <strike></strike> <center></center>. CSS terms. style rule selector {property:value} examples

ttyrrell
Download Presentation

A CSS Primer

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. chapter4 A CSS Primer html: structure & content CSS: presentation & style

  2. Deprecated elements Once deprecated, tags may well become obsolete <font></font> <b></b> <i></i> <u></u> <strike></strike> <center></center>

  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 resources/css

  4. Styles are stored in Style Sheets external: separate file internal: <style> element in head section inline/local: style property in tag

  5. internal style sheet <head> <style type="text/css"> body {background-color: ivory; color: navy} hr {color: sienna} p {font-family:”Verdana”} </style> </head>

  6. Inline styles (a.k.a. local styles) <h2 style=“color:red”> Local Styles </h2> <p style="color: sienna; text-align:center"> x-ray yankee zulu </p>

  7. External Style Sheet • Style rules stored in separate file(eg) /110/css/110.css • Connected to a client file using a link element

  8. External Style Sheet: /110/css/110.css external style sheets may contain only • css style rules • css comments (for documentation) •  no HTML allowed omit <style> element hr {color: sienna} p {color: sienna; text-align:center} body {background-image: url(“../images/back40.gif")}

  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>

  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

  11. Cascading Style Sheets Multiple Styles Cascade Into One Styles can be specified • inline • local • external Even multiple external style sheets can be referenced inside a single HTML document

  12. CascadingOrder 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): • Inline style • Internal style sheet (<style> element in the <head>) • External style sheet • 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).

  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} • <p class="right"> This paragraph will be right-aligned. </p> • <p class="center"> This paragraph will be center-aligned. </p> • <h2 class=“center”> Zut Alors! </h2>

  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>

  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. 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>

  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. 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. 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. 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. CSS Display Property display values: block | inline | list-item | none applies to: all elements div#links a {display: block;} return to proj12

  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:

  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. CSS Resources • W3Schools.com • Video: Beginner’s Guide to CSS • Quick Tutorials from WestCiv • Eric Meyer: CSSAuthor of CSS: The Definitive Guide

More Related