Web Development Design Foundations with XHTML Chapter 3
Web Development & Design Foundations with XHTML Chapter 3 Styles
Overview of Cascading Style Sheets (CSS) n See what is possible with CSS: n n Visit http: //www. csszengarden. com Style Sheets n n used for years in Desktop Publishing apply typographical styles and spacing to printed media Exact same page, different styles 2
CSS Advantages n Better page layout control n Style is separate from structure n Use the same style on many pages n Smaller pages n Easier site maintenance (Change in 1 place – update the whole site) (HTML doesn’t have much) (Styles can be stored in a separate document and used on many pages for a consistent look) (if the style is stored separately) 3
Types of Cascading Style Sheets n Inline Styles n n Embedded Styles n n In the body of the Web page Describe style in an XHTML tag Apply only to the specific element In the header section of a Web page. Use the XHTML <style> element Apply to the entire Web page document External Styles n n In a separate text file with. css file extension The XHTML <link /> element in the header section of a Web page associates it with the. css file . 4
CSS Syntax n n n Each Rule contains a Selector and a Declaration Selector = what are you selecting? Declaration = How do you want it to look? 5
CSS Syntax Sample blue words and a yellow background. body { color: blue; background-color: yellow; } This could also be written using hexadecimal color values as shown below. body { color: #0000 FF; background-color: #FFFF 00; } 6
Configuring Color with Inline CSS (1) 1. 2. 3. What is the selector? What is the property being changed? What is the value it’s being changed to? Example: configure red color text in an <h 1> element: <h 1 style="color: #ff 0000">Heading text is red</h 1> 7
Configuring Color with Inline CSS (2) Example 2: configure the red text in the heading configure a gray backgroundin the heading Separate style rule declarations with ; <h 1 style="color: #FF 0000; background-color: #cccccc">This is displayed as a red heading with gray background</h 1> 8
CSS Embedded Styles n n n Configured in the header section of a Web page. Use the XHTML <style> element Apply to the entire Web page document Style declarations are contained between the opening and closing <style> tags Example: Configure a Web page with white text on a black background <style type ="text/css"> body { background-color: #000000; color: #FFFFFF; } </style> 9
CSS Embedded Styles • The body selector sets the global style rules for the entire page. • These global rules are overridden for <h 1> and <h 2> elements by the h 1 and h 2 style rules. <style type="text/css"> body { background-color: #E 6 E 6 FA; color: #191970; } h 1 { background-color: #191970; color: #E 6 E 6 FA; } h 2 { background-color: #AEAED 4; color: #191970; } </style>
Configuring Text with CSS n CSS properties for configuring text: n font-weight n Configures n font-style n Configures n text to an italic style font-size n Configures n the boldness of text the size of the text font-family n Configures the font typeface of the text
The font-size Property n Point size is 72/inch used by printers Pixel size depends on the screen resolution n Accessibility Recommendation: n n Use em or percentage font sizes – these can be easily enlarged in all browsers by users
The font-family Property n n Not everyone has the same fonts installed in their computer Configure a list of fonts and include a generic family name p {font-family: Arial, Verdana, sans-serif; }
Embedded Styles Example <style type="text/css"> body { background-color: #E 6 E 6 FA; color: #191970; font-family: Arial, Verdana, sans-serif; } h 1 { background-color: #191970; color: #E 6 E 6 FA; line-height: 200%; font-family: Georgia, "Times New Roman", serif; } h 2 { background-color: #AEAED 4; color: #191970; font-family: Georgia, "Times New Roman", serif; } p {font-size: . 90 em; } ul {font-weight: bold; } </style>
CSS Selectors CSS style rules can be configured for an: HTML element n class n Id n By using the right selector
n class Selector n n dot Use to apply a CSS rule to a certain "class" of elements on a Web page Does not associate the style to a particular XHTML element Using CSS with “class” <style type="text/css">. new { color: #FF 0000; font-style: italic; } </style> n Configure with. classname n The sample creates a class called “new” with red italic text. n To use the class, code the following XHTML: <p class=“new”>This is text is red and in italics</p> 16
pound n id Selector n One of a kind Using CSS with “id” <style type="text/css"> #new { color: #FF 0000; font-size: 2 em; font-style: italic; } </style> n Configure with #idname n The sample creates an id called “new” with red, large, italic text. n To use the id, code the following XHTML: <p id=“new”>This is text is red, large, and in italics</p> 17
XHTML <div> and <span> elements n If you want to mark up a section of a page to have a special look, use <div> n n n Useful to define an that will contain other block-level tags (such as paragraphs or spans) within it. Div creates a line break before and after the section If you want to choose a subsection (like a few words in a paragraph or a few items in a list) use <span> to mark them n There is no line break before and after the span. 18
XHTML <div> Element Example n n Configure a page footer area Embedded CSS: <style type="text/css">. footer { font-size: small; text-align: center; } </style> XHTML: <div class=“footer">Copyright © 2009</div> n 19
XHTML <span> Element Example n Embedded CSS: <style type="text/css">. companyname { font-weight: bold; font-family: Georgia, "Times New Roman", serif; font-size: 1. 25 em; } </style> n XHTML: <p>Your needs are important to us at <span class=“companyname">Acme Web Design</span>. We will work with you to build your Web site. </p> 20
External Style Sheets - 1 n CSS style rules are contained in a text file separate from the XHTML documents. n The External Style Sheet text file: extension ". css" n contains only style rules n does not contain any XHTML tags n 21
External Style Sheets - 2 n Multiple web pages can associate with the same external style sheet file. site. css body {background-color: #E 6 E 6 FA; color: #000000; font-family: Arial, sans-serif; font-size: 90%; } h 2 { color: #003366; }. nav { font-size: 16 px; font-weight: bold; } index. htm clients. htm about. htm Etc… 22
The <link /> Element A self-contained tag n Placed in the header section n Purpose: associates the external style sheet file with the web page. n Example: n <link rel="stylesheet" href="color. css" type="text/css" /> 23
Using an External Style Sheet color. css body { background-color: #0000 FF; color: #FFFFFF; } To link to the external style sheet called color. css, the XHTML code placed in the header section is: <link rel="stylesheet" href="color. css" type="text/css" />
Checkpoint 3. 2 1. Describe a reason to use embedded styles. Explain where embedded styles are placed on a web page. 2. Describe a reason to use external styles. Explain where external styles are placed and how web pages indicate they are using external styles. 25
- Slides: 25