1 / 21

Chapter 2: How CSS Works

Chapter 2: How CSS Works. Review:. Three parts to a webpage: - Content - Structure  XHTML - Presentation  CSS. In this chapter we will focus on introducing and examining the mechanics of CSS and how we can use style sheets to “beautify” the structure of a webpage. What is CSS?.

erna
Download Presentation

Chapter 2: How CSS Works

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. Chapter 2: How CSS Works

  2. Review: Three parts to a webpage: - Content - Structure  XHTML - Presentation  CSS In this chapter we will focus on introducing and examining the mechanics of CSS and how we can use style sheets to “beautify” the structure of a webpage.

  3. What is CSS? • Cascading Style Sheet • A list of rules that define a particular style that is applied to XHTML markup. • Ex: Font size of a paragraph, thickness of a border around an image, position of a headline. • Gives web designers complete control over the layout of their web pages. • Three ways to add CSS to a web page: • Inline • Embedded • Linked

  4. Inline Styles • Put style declarations right in a specific tag with the “style” attribute. • Not recommended and very rarely used. • CSS and XHTML were implemented to get rid of presentational markup. • Will override any styles declared in a linked or embedded style sheet. <p style=“font-size: 25pt; font-weight:bold; font-style:italic; color:red;”>By adding inline CSS styling to this paragraph, we can override the default styles.</p>

  5. Embedded Styles • Place CSS styles in the head of your XHTML document. • Again, not recommended because the scope is limited to one page. • Will override a linked style sheet, but will still lose to an inline style. <head> <title>Embedded Styles</title> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> <style type=“text/css”> h1 {font-size: 16px;} p {color:blue;} </style> </head> Link to example

  6. External Style Sheet • Ideal method of using CSS  Truly separates presentation from structure. • Styles have a site-wide scope  Can change one thing in the style sheet and it will impact every page that links to it. • Can specify styles that make the page look good on different media (print, mobile, etc.) <head> <title>Embedded Styles</title> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> <link href=“style.css” media=“screen” rel=“stylesheet” type=“text/css” /> </head> Can change to other media types (list)

  7. External Style Sheet Let’s make a sample page linked to an external style sheet. external.html <head> <title>External Styles</title> <meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” /> <link href=“style1.css” media=“screen” rel=“stylesheet” type=“text/css” /> </head> <body> <p>All paragraphs will be modified.</p> <p>See? Same style.</p> <h2>It also has the same effect on us header 2’s.</h2> <h2>See?</h2> </body> style.css Link to example p {color:red;} h2 {color:blue; font-style:italic;}

  8. CSS Rules • Each rule in CSS follows a specific format: • Selector {Property:value;} • The selector is the corresponding tag in the XHTML markup. • The property is one of the valid CSS style attributes (a good list of them). The values correspond to the specific property and can also be found on the w3schools CSS reference list.

  9. CSS Rules • Multiple declarations can be contained within a rule. • p {color:red; font-size:12px; line-height:15px;} • Multiple selectors can be grouped. • h1, h2, h3, h4 {color:red; font-size:12px;} • Multiple rules can be applied to the same selector • h1, h2, h3, h4 {color:red; font-size:12px;} • h1 {font-style: italic;}

  10. CSS & Document Hierarchy • A CSS style declaration will apply to every tag of the selector’s type. • In order to make it apply to only a certain part of your document, you must utilize XHTML’s document hierarchy. hierachy.html <div id="header"> <h1>Here's the biggest heading.</h1> <h2>Here's a smaller one.</h2> </div> <h1>This h1 won't have the style applied to it.</h1> style2.css div h1 {color:red;} Link to example

  11. Classes and IDs • The second way of defining specific styles without the use of the document hierarchy is by adding “class” and “id” attributes to the XHTML markup. • Define classes with a . class1.html <h1 class=“special”>This will be some special text</h1> <h1>This, unfortunately, won’t be.</h1> <p class=“special”>But this will be!</p> <p>This won’t.</p> style3.css h1 {color:red;} p {color:blue;} .special {font-family: Helvetica, sans-serif; font-style:italic;} Link to example

  12. Classes and Document Hierarchy • If you want to, say, target one paragraph with a given class, you can write the following: • p.special {font-family: Helvetica, sans-serif; font-style:italic;} • You can also combine the document hierarchy with classes to further specify styles: class2.html <h1 class=“big”>Here's the <span>biggest</span> heading.</h1> <h2 class=“small”>Here's a smaller one.</h2> <h2>This h2 won't have any class styles applied to it.</h2> style4.css h1 {font-color:red;} .small {font-size:x-small;} .big {font-size:x-large;} .big span {font-style:italic;} Link to example

  13. CSS and IDs • IDs work almost exactly like classes in that they can be used to identify specific portions of a webpage that will be styled. • However, an ID is more powerful than a class because it is used to identify unique pieces of a page (header, footer, etc.). • Can also be used to enable JavaScript to be triggered, and takes precedence over classes in cascading. <p id=“specialtext”>This is special text</p> p#specialtext {css rules;}

  14. Selectors • Tell the browser to only apply a certain style if a certain condition is met. • Universal Selector • *  All markup will contain the specified style, unless overridden. • * {color:green;} • Adjacent Sibling Selector • +  Selects a tag that follows a specific sibling tag • h1 + p {font-variant:small-caps;} • <h1>Test</h1> • <p>This will be in small caps</p> • <p>This won’t be</p> • Attribute Selectors • []  Targets only elements with specific attributes • img[title] {border: 2px solid blue;} • <imgsrc=“images/someimage.gif” title=“This will have the style” /> • <imgsrc=“images/someimage.gif” alt=“This won’t” />

  15. Pseudo-Classes • Cause rules to be applied when certain events occur. • Most often used for mouse clicks or hovers. • Anchor Link Pseudo-Classes • Most commonly used with hyperlinks and color changing • Link, Visited, Hover, Active • Ex: • a:link {color:black;} • a:visited {color:gray;} • a:hover {text-decoration:none;} • a:active {color:navy;} • Will set the link color to black, the link’s color to gray if you’ve clicked on it, removes the underlining when hovered, and changes the color to navy when the user holds the mouse down on the link. •  You can use “hover” on any element to change its style when the mouse is hovered over it. Link to example

  16. Pseudo-Elements • Adds markup around already existing content. • first-letter, first-line, before, after • “before” and “after” are useful for displaying items retrieved from a database in a coherent manner. • Ex: • <h2 class=“age”>number retrieved from db</h2> • h2:before {content:”The user is “;} • h2:after {content:” years old.”;} • If the number was 25, the output on the page would be “The user is 25 years old.”

  17. Inheritance and Cascading • Inheritance is passing a style down the document hierarchy. • Declaring the font family, color, etc. in the body selector will make the text in every text element that font type. • Many properties are not inherited because it doesn’t make sense for them to be– e.g. a border will not be inherited by a table cell (td) inside a table with a border. • Inheritance is cumulative– that is, if you define a tag’s font size as 80% and it is descendant from a tag with font size 80%, that child tag’s font size will be 64% (80% of 80%).

  18. Inheritance and Cascading • Cascading describes the process of letting the browser decide which styles to apply to a tag, amidst many possible style declarations. • Browsers follow a natural hierarchy of styles, with each one below taking precedent over the ones above: • Default browser style sheet • User style sheet (rare, but useful for the visually impaired) • Author style sheet (external / linked CSS file existing on the server) • Author embedded styles • Author inline styles • Selectors with IDs have precedence over classes, which have precedence over selectors only. • The more specific the style declaration, the higher the precedence. • Defined styles override any inherited style, regardless of specificity.

  19. Inheritance and Cascading Example of higher specificity: p {color:red;} p.largeText {color:orange;} p#largeText {color:yellow;}div p#largeText {color:green;} div ul.myList {background-color:blue;} Each has higher specificity than the one preceding it, thus giving each precedence over the ones before it. Link to example

  20. Rule Declarations • Three types of values: • Words • Numerical Values • Color Values • Words  font-weight: bold; • Numerical Values  font-size:12px; • Color Values  color:#336699; • For font sizes, when possible, and to retain consistency with page resizing and user styles, set the “base” font-size to 1em in the body, and use other size declarations as proportions of that base size. • E.g. font-size:.5em will yield half the size of the base.

  21. Rule Declarations • For color values, you have three options for declaring colors: • Words  aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow • Hexadecimal  #RRGGBB -- 00 = 0, FF = 255 • Percentages  R%, G%, B% • color:black; • color:#000000; • color:rgb(0%, 0%, 0%);

More Related