1 / 10

CHAPTER 2

CHAPTER 2. Creating Styles and Style Sheets. Anatomy of a Style. CSS styles don’t communicate in nice clear English, they have their own language. P { color: red; font-size: 1.5 em ;} This code says, “make all text in all paragraphs marked with a <p> red and 1.5 ems tall.”

xantha-mccarthy
Download Presentation

CHAPTER 2

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 Creating Styles and Style Sheets

  2. Anatomy of a Style • CSS styles don’t communicate in nice clear English, they have their own language. • P { color: red; font-size: 1.5 em;} • This code says, “make all text in all paragraphs marked with a <p> red and 1.5 ems tall.” • An em is a unit of measure that is based on a browser’s normal text size. • Using an em tag as opposed to a pxtag adjusts the size of text based on the size of text the user has specified for her/his computer.

  3. Anatomy of a Style (cont’d) Selector Declaration Declaration Property Value Property Value Declaration Block p color: red; Font-size: 1.5em;

  4. Understanding Style Sheets • A single style will not transform a Web page into a work of art • To infuse your web site with great design, you will need many different styles • A collection of CSS styles comprises a style sheet. • Style sheets can be one of two types—internal or external

  5. Internal or External—which to choose • External style sheets are the way to go. • Easier to build a web page • Contain all of your style information • Just one line of code to attach the sheet to your web page • Easier to edit • Help web pages open faster • Downloads your style document to a user’s computer or cache

  6. Internal Style Sheets • A collection of styles that is part of the web page’s code • Always appears between the opening and closing HTML <style> tags in the web page’s <head> section • EXAMPLE: <style type=“text/css”> • H1 { • color: #FF7643; • font-face: Arial; • } </style>

  7. Internal Style Sheets (cont) • The <style> tag is HTML, not CSS—tells the browser that the information contained within the tags is CSS code. • Internal style sheets are easy to add to a web page • Provide immediate visual boost to your HTML • Style not the most efficient method of design • Especially if web page is comprised of many pages. • More of a hassle when you want to update the look of the site.

  8. Linking a style sheet using HTML • HTML: • <link rel=“stylesheet” type=“text/css” href=“css/global.css”> • XHTML: • <link rel=“stylesheet” type=“text/css” href=“css/global.css”/> • The Difference? • How the tag is ended

  9. Linking a style sheet using CSS • <style type=“text/css”> • @import url (css/global.css); • </style> • Unlike the <link> tag, @import is part of the CSS language and has some definite un-HTML-like qualities. • Use url, not href • Enclose the path in parentheses

  10. Create your first Style • Chapter 2—Tutorial • Page 39 in your textbook • Then Assignment 1 in Blackboard • Don’t forget to validate both your HTML and your CSS • Upload your documents to your Assignment 01 folder on the SWS

More Related