Download presentation
Presentation is loading. Please wait.
1
Cascading Style Sheets
An Introduction January 26, 2011
2
Why Tables are a Nightmare
Tables mean long load times Maintaining Tables is a nightmare Tables cause accessibility issues
3
Advantages of CSS Increased Stylistic Control
CSS has more properties that can be applied to more page elements than HTML has ever offered Centralized Design Information separate content from look
4
Why do they call them “Cascading”
The word “cascading” applies to a hierarchy of importance.
5
Style Sheet Set of design rules that apply to one or more documents
Two types Document Level Formatting rules to all or one elements found in the <body> container <style> container is placed in the <head> to identify the formatting rules External Create one style sheet and apply it to all of your pages in your web site This is what you use to maintain consistency between all of your web pages in one web site
6
General Rule The style defined closest to the element takes precedence over any others
7
Inheritance Example: Family Tree
Some of your characteristics have been inherited from your grandfather (eye color) Other features might not be passed on The root of the tree is always the html element
8
HTML Inheritance Tree
9
Inheritance Each element in an HTML document has a parent element (except HTML) This is the element that precedes it in the tree The children are below If you don’t supply a specific value for an element’s property, in many cases it will take the value assigned to its parent Appendix C indicates the properties that are inherited and those that are not
10
Parts of a CSS Rule p { font-weight: bold; color: blue; } Selector
Declaration Value Property
11
CSS RULE PARTS Selector – defines the HTML element(s) to which the rule applies A collection of one or more declarations, made up of a property and a value, which describe the appearance of all the elements that match the selector
12
CSS Three Ways to Implement
Inline declarations-should only be used sparingly Embedded style sheet-should be used when you are making style decisions for only one page, not entire website External style sheet-should be used for most things
13
CSS Precedence Inline style changes like <b> take first precedence. Document-level changes specified within the <style> container are implemented. External files using the .css extensions are next Default values established by the browser are used if no changes are identified.
14
Inline CSS Declarations
<h1 style=“color:red;”>Inline Style</h1> Bad because it is not separating content from style Use very sparingly
15
Embedded CSS To embed a style sheet in a web page, place a style element in the head of the document’s HTML. <style type=“text/css”> h1{ color: red; } </style>
16
Example Example <title>Example</title> <style type="text/css"> #wrapper height: 40px; width: 370px; { </style> </head> <body> </body> </html>
17
Why use External CSS? An easy way to maintain consistency among a large collection of pages Separates style and data One style sheet is used by several web pages HTML documents are shorter because they do not contain the code for inline and document-level styles
18
<link> Identifies external files that relate to the document in various ways Type the following code in the <head> element <link rel=“stylesheet” href=“styles.css” type=“text/css” /> Attributes of the <link> tag rel establishes that the external file is related to the document as a stylesheet href identifies a path to the stylesheet type specifies that the external file is text that follows the CSS specification
19
External Style Sheet A stand-alone file with a .css extension
Use the same HTML syntax as the <style> </style> element /* This is a comment */
20
Style Rules Place each tag for which you are going to define properties on a separate line Put a left curly brace { after the tag name and then indent the rules you are applying h1{ font-family: sans-serif; font-size: 30pt; font-weight: bold; }
21
Style Rules List each property name, like font-family or font-weight followed by a colon Type in the property value, like sans-serif or bold h1{ font-family: sans-serif; font-size: 30pt; font-weight: bold; }
22
Style Rules Place a semicolon to mark the end of the value
Close the property list with a right curly brace } h1{ font-family: sans-serif; font-size: 30pt; font-weight: bold; }
23
Formatting Multiple Tags
h1, h2, h3, h4, h5, h6{ color: #666666; }
24
text-align: left center right Justify Example: p{ Text-align:center; }
25
font-family: serif sans-serif cursive fantasy monospace body{
font-family: Verdana, Arial, Helvetica, sans-serif; }
26
font-size: xx-small x-small small medium large x-large xx-large body {
font-size: 11pt; } body, p, blockquote, li, td {
27
font-style: Normal-the text is shown normally
Italic-the text is shown in italics Oblique-the text is “leaning” (oblique is very similar to italic, but less supported) p{ font-style:oblique; }
28
font-variant: small-caps in a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text. normal h4{ font-variant: small-caps; }
29
font-stretch Allows you to make text wider or narrower normal wider
Only works for a font-family which has the specified font-stretch value normal wider narrower ultra-condensed through ultra-expanded h2{ font-stretch: ultra-expanded; }
30
margin #header{ width: 400px; margin: 10px; }
This property sets the size of the margins surrounding the selected element(s). The size for each side may be set individually using the margin-bottom, margin-left, margin-right, margin-top properties #header{ width: 400px; margin: 10px; }
31
Links a:link { color: #00FF00; } a:visited { color: #00FFFF; a:hover{ color: #FF0000; a:active{ color:#Ffoooo;
32
Links a:link unvisited link a:visited visited link
a:hover mouse over link a:active selected link When setting the style for several link states, there are some order rules: a:hover must come after a:link and a:visited a:active must come after a:hover
33
Links By default anchor tags are underlined, to get rid of underline: a{ text-decoration: none; }
34
body: body { background-color: #003366; margin: 20px; }
35
Color and CSS Setting color for elements Text Headings
Page Backgrounds Background colors of text and headings
36
Color Example body { color: yellow; background-color: black; } h1,h2,h3,h4,h5,h6 { color: yellow changes the text color
37
Hover Effect on Text Creating a effect that looks a little bit like animation Only works in IE 6 and beyond Create a pseudo-class a: hover { background-color: blue; color: white; font-size: x-large; } Program a button to change when user rolls over -- we will be learning about this more later
38
Images and CSS What we can manipulate Border around an image Alignment
An example: img { float: left; }
39
Multiple Style Sheets & Users
It is possible to define more than one style sheet for a given site “Alternate” style sheets can be used to display larger or smaller fonts or higher contrast designs for accessibility More information:
40
Shorthand h1 { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 5px; } h1 { padding: 10px 20px 10px 5px; Starts at top and then goes clockwise
41
Types of Selectors Universal Selector Element Type Selector
Class Selector ID Selector
42
Universal Selector Matches every element in the document
Has very little practical value by itself Example: All elements are red * { color: red; }
43
<div>divisions</div>
Divisions are a block level (X)HTML element used to define sections of an (X)HTML file. <div id=”container”> <p>site contents go here</p> </div>
44
Element Type Selector Most common selector
Specifies one HTML element type Example - the text and background color of all hyperlinks a { color: white; background-color: green; }
45
Class Selector Used to apply a style rule to a potentially arbitrary group of elements in a Web page. Define a class in style sheet Identify the HTML elements that belong to the class .special { font-family: Verdana, Helvetica, Arial, sans-serif; } <h1 class=“special”> A special Heading </h1> <p class=“special”> This is a special paragraph </p>
46
Class only applying to an element
p.special { font-family: Verdana, Helvetica, sans-serif; } p.exciting { color: blue; <p class=“special”>Paragraph! Of! Stuff! </p> <p class=“special exciting”>Paragraph! Of! Stuff! </p>
47
ID Selector Lets you target a single HTML element within a page
ID Selector must be defined in the style sheet and included explicitly in the HTML tag Use the # symbol to identify an ID selector IDs must be unique within a document No two HTML elements in a single document should have the same ID
48
Formatting a List <ul id=“partylist”>
<li> children </li> <li> teens </li> <li> adults </li> </ul> CSS RULE #partylist { font-family: ‘Comic Sans MS’, Arial, sans-serif; font-weight: bold; color: yellow; background-color: black; }
49
Example of Id and Class Combined
div.sidebar { border: 1px solid black; background-color: yellow; } #searchbox { background-color: orange; <div id=“searchbox” class=“sidebar”> <p>info</p> </div>
50
Firefox Web Developer Extension
Start looking at the css of sites you like to get ideas
51
In Class Lab Attach an external style sheet to your cartoon html document
Similar presentations
