Download presentation
Presentation is loading. Please wait.
Published byJason Tucker Modified over 10 years ago
1
Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com
2
Agenda What is CSS? Adding Styles to Your Page Basic Structure Inheritance & the Cascade Elements and Boxes Using CSS for Layout XHTML Organizing a Style Sheet Validation CSS Examples
3
What Is CSS? Cascading Style Sheets Controls the presentation of HTML elements, including size, placement, color and font Intended to replace table-based layouts, frames and other presentational hacks
4
What is CSS? CSS is the W3C Standard for controlling the visual presentation of web pages Essentially a set of page-layout tools Intended to give the designer control over the display of the page, similar to what they have in InDesign or Quark Xpress
5
Benefits of CSS Conserve bandwidth Reduce development time and maintenance Increased accessibility Conformance to Section 508 and WCAG 1.0 More sophisticated, cleaner appearance Increased readability of documents Easier to prepare content for delivery on multiple media devices
6
CSS Drawbacks Not fully supported by NN 4 –Netscape 4 has little support for most of CSS 1 Broken box model in IE 5 –Width and height of a box is incorrectly calculated –Fixed in IE 6 Incomplete implementation of CSS 2 in all browsers –This is a minor issue
7
What is the W3C? W3C founded by Tim Berners-Lee, who developed HTTP, addressing, URL and HTML Industry consortium with more than 500 members Develops technical standards for the web
8
What is a W3C Standard? Finished specifications are called Recommendations Members are supposed to implement them in their software Intended to promote interoperability among different software and universal accessibility
9
Why Should You Care? W3C recommendations are the foundation of Webs future Following standards promotes accessibility, usability and reduces maintenance
10
Adding Styles to Your Page
11
Methods of Adding Styles Inline Embedded External –Linked –Imported
12
Inline Style appears within the XHTML element
13
Embedded Styles are added to the of the document Good method for testing, but poor for implementation
14
External: Linked Style sheets are linked
15
External: Imported Style sheets are imported using the @import directive
16
Basic Structure
17
Rules A style sheet contains rules that tell the browser how do display the elements on a Web page A Rule is made up of a Selector and a Declaration The Declaration contains a Property and a Value p { color: #000; } Selector Declaration Rule
18
Basic Structure: Selectors
19
Types of Selectors Element Contextual Class ID Psuedo-class and Psuedo-element
21
Basic Structure: Values
22
Specifying Values All CSS Values can be classified as: –Keywords –Length Values –Percentage Values –Colors –URLs
24
Inheritance and the Cascade
25
Multiple Style Sheets In the presence of multiple style sheets, the user agent must determine which rule has the most specificity Style precedence is determined in three ways: –Inheritance –Specificity Calculations (skipping this) –The Cascade
26
Inheritance Relies on parent>child relationships Generally, Child Elements inherit styles from Parent Elements
27
In this example, the style has been applied to the BODY, and it will be inherited by the P.
28
Styles defined in the BODY element are inherited by most of the child elements.
29
The Cascade Example: p.instructions Find all declarations that contain a matching selector Sort by weight and origin (user agent, user, author) –User Agent>Author>User Sort by specificity –Elements with higher specificity have more weight Sort by order –The later a declaration appears in the style sheet or document, the more weight it is given –Imported/Linked>Embedded>Inline>User
30
Here is our original XHTML file. Lets add some more styles to it.
31
This time, Ive added two styles for the P element. One is embedded, the other is inline.
32
All three styles are applied to the P. Now lets overwrite a style.
33
Using an inline style, Ive overwritten the rule for the P font-size. Ive also added another P, so you can see that it wont be affected.
35
Elements and Boxes
36
Types of Elements Block-Level –Generally items which are displayed on a line by themselves –p, h1-h6, ul, ol, table, div, body Inline –These elements do not force a line break in the visual display –a, em, span, images, form inputs List-Item –Elements that include the element –Specially defined to have a marker (bullet, letter or number)
37
The Box Model The most important part of CSS, if you are going to use CSS for layout All Elements generate a box (Element Box) The Element Box tells the browser how much space an element and its properties occupy
38
Box Components Content –Set with the WIDTH and HEIGHT properties Padding –Set with the PADDING property Border –Set with BORDER property Margin –Set with MARGIN property
39
Box Components Content Padding Margin Border Box Width
40
The Importance of Boxes Understanding the CSS Box Model is the most critical factor in using CSS for layout Any version of IE before 6 renders boxes incorrectly
41
Using CSS for Layout
42
The Basics Sketch out your page Each area becomes a containing box Give each box a unique name This unique name will correspond to an ID Rule in your style sheet Use inheritance and the cascade to minimize how many rules are in your style sheet
43
This is a page from my web site. Ill use it to show where the boxes are.
50
XHTML The Best Friend of CSS
51
What is XHTML? XHTML is XML It is HTML rewritten in XML
52
What Makes HTML XHTML? Include the proper !DOCTYPE (strict, transitional, frameset) and Namespace in each page Write all Tags in lowercase Quote all Attribute values Close all Tags Close empty Tags (ex. )
53
Benefits of XHTML Easier transition to XML (because its XML) Cleaner, more logical markup XHTML can be read on a wider variety of devices Well-formed pages are more likely to render properly in the major browsers XHTML code is easier to parse and manipulate with the DOM
54
Thanks to Mike Krisher Thanks to Jamie Gehrlich
55
Why Is It Important to CSS? A style is only applied to an element if the tag is closed
56
Organizing a Style Sheet
57
How I Write a Style Sheet HTML, Body Positioning Elements XHTML Elements
58
You can use the dot selector to create subclasses of elements. This is a good method to follow, as it makes it easier to find a class in your style sheet if you need to edit it.
59
Grouping Properties Positioning rules –Display, position, clear, float, top, left Color and Background –Text color and background properties Font rules –Family, size, line-height, weight Border, Margin, Padding –Top, right, bottom, left Text-Alignment –Left, right, center
61
Validation
62
Test Until It Hurts Start with the most recent release of Mozilla View in IE 6 View in IE 5
63
Validate Run each CSS file through the W3C CSS validator Run each page through the W3C HTML validator
64
CSS Examples
65
Build a Rollover with CSS Table vs. CSS Layout Style Switcher Printing with CSS Rendering in IE 6, Mozilla and NN 4.x
66
Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com
67
Extra Slides
68
Keyword Values Explicit values Not case-sensitive Example: border-style: dotted
69
Length Values Depending on the property, the value can be positive or negative The length value should always be followed by the type of units being used (ex. 6px, 12em) Two types of length values: –Absolute Units Always measured the same way Inches, Centimeters, Millimeters, Points, Picas –Relative Units Measured in relation to something else Ems, X-height, Pixels
70
Percentage Values Can be positive or negative Always followed by the percent sign (%) Always computed relative to another value –The window –The containing box
71
Colors Five ways to specify colors in CSS –Hex-Pair Notation –Short Form Hex-Pair Notation –RGB Percentages –RGB Values –Keyword
72
Hex-Pair Notation Most common method First pair is the red, second is the green, third is the blue (ex. #990000) Each pair is a hexidecimal notation in the range 00 to FF –#ff0000 (pure red) –#00ff00 (pure green) –#0000ff (pure blue)
73
Short Form Hex-Pair Notation Shorter form of the six-digit notation Digits are replicated to find the six-digit value Examples: #990000 = #900 #000000 = #000
74
RGB Percentages Specify the values in a range from 0%-100% Allows decimal values Example: Black = rgb(0%, 0%, 0%)
75
RGB Values Specify the RGB value in the range of 0 to 255 This range is the decimal equivalent of hexidecimal Examples: Green = (0, 255, 0) same as #00ff00 White = (255, 255, 255) same as (#ffffff)
76
Keywords 16 colors Based on the original Windows VGA colors May be recognized by browsers, but are not part of any standard, and therefore should not be used for final production
77
URLs Inside of a style sheet, they are most commonly used for images URLs are supposed to be relative to the style sheet Netscape 4 gets it wrong, and needs the absolute URL Example: background: url(siteGraphics/header.jpg)
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.