Download presentation
Presentation is loading. Please wait.
1
Part 1: Cascading Style Sheets
Dynamic HTML Part 1: Cascading Style Sheets
2
DHTML DYNAMIC HTML Like HTML, many browser specific variations. CSS
JavaScript Accessing/Manipulating the HTML document information through methods such as JavaScript. Generally, other browser multimedia technologies.
3
CSS Style Sheets are generally referred to as “Cascading”. This means that Style information may come from several sources and information from one source may override information from another. CSS browser compatibility is very poor. HTML was never intended to have graphic information, such as colors. This was intended to be provided to the browser via CSS.
4
Uses of Style Sheets To give the site a uniform look and feel.
To change style information at one source. To layer elements. To position elements. To make textual link rollovers. To add Boxes and Borders.
5
Example of Style Information
H1 {color:blue} Three parts of a CSS Element H1 is the selector Color is the property Blue is the value
6
By the way…. This has parallels in HTML: <font color=“blue”>
3 Parts of an HTML Element Font is the Tag Color is the attribute Blue is the value
7
Back to our Story… In addition to three parts of a CSS Element, CSS is usually introduced into a page in one or more of three ways: Linked Embedded Inline Style sheets may also
8
Method 1 Linked Style Sheets
The style sheet needs merely have the STYLE INFORMATION ALONE. DOES NOT NEED HTML TAGS File name example: Mystylesheet.css
9
Three Attributes of a <Link> Tag
type=“text/css” href=“css/mystyle.css” rel=“stylesheet”>
10
Method 2 Embedded Style Sheets
In the <head> section <style type=“text/css”> body {backgound-image: “bg.gif”} h1 {font-family: arial, helvetica} </style>
11
Only One Problem… The style info would show up in older browsers. Therefore we hide them in a comment: <style type=“text/css”> <!-- body {backgound-image: “bg.gif”} h1 {font-family: arial, helvetica} --> </style>
12
Method 3 Inline Style Style information may be put in nearly any HTML tag. Several tags, such as DIV, SPAN, INS, and DEL, were designed specifically for use with CSS. <div style=“font-family: “times new roman”, serif”>
13
<Div> and <Span>
Div is used to specify style for a division of your page. Span is used to interrupt the current style information, for instance if you wanted to add a section of specially formatted text. Ins and del are used to indicate inserted or deleted text. Example: legislative changes.
14
CSS Has Class! In the head section… <style type=“text/css”>
body {backgound-image: “bg.gif”} .blue {color: #0000ff} h1.blue {font-family: arial, helvetica; color: #0033ff} </style>
15
…And in the HTML <p class = “blue”> or <h1 class =“blue”>
With no dot
16
Show me your ID! <style type=“text/css”>
body {backgound-image: “bg.gif”} #crazy {font-style: jester, scribble, script} h1#MySpecial {font-family: arial, helvetica} </style>
17
Class or ID Generally use class.
Each ID can only be used once per page.
18
Explorer Text Hovers a:link {color: green}
a:active {color: silver; font-weight: bold} a:visited {color: purple} a:hover {color: red}
19
Measurements There are numerous measurements:
Percent: p {line-height:200%} Points: h1 {font-size: 24pt} Pixels: <span style=“font-size: 30px”> Several others.
20
Learning Style Sheets Remember there are three parts to a CSS element: selector, property, and value. There are three main methods of using style information: linked, embedded, or inline. There are THRee attributes in the link tag: t - type, h-href, and r-rel.
21
Conclusion Aim for simple sheets that work in both browsers.
Almost everything you need to know about style sheets beyond this presentation is simply properties and values. Keep a reference handy Start Small
Similar presentations
