All About StyleSheets David Lash Chapter 4 Cascading Style Sheets.
-
date post
21-Dec-2015 -
Category
Documents
-
view
221 -
download
0
Transcript of All About StyleSheets David Lash Chapter 4 Cascading Style Sheets.
IS 556 Fall 2003
All About StyleSheets
David LashChapter 4Cascading Style Sheets
2David Lash
What we are talking about…We will look at:
What are CSS Advantages and disadvantages Types of CSS
Look at embedded CSSLook at external CSS
Using Selectors Using Classes All About Properties
A big properties example
3David Lash
What are cascade style sheets?
Long before HTML was something called SGML A mark-up language that was
Output format independent – could generate word, pdf, html, etc output
Format style independent – size, color, font face was controlled separate from actual document (usually centralized).
Bottom line – document authors write content NOT style info (the editor decides how it should look).
HTML mixes these 2 – (within HTML you specify content and style stuff.)
So W3C decided to create cascade style sheets to allow authors to separate display format from document content.Note: Just FYI, this is not part of PHP, but sort of
a add-on, built as part of HTML
David Lash
Cascading Style Sheets!
The basic idea: Separate style information from text content
What do they do? Specify a common set of styles and spacing
instructions for elements on a page. E.g., a web site with 5 different pages, might use
style sheets to specify things like: Common size for headers, default font type, background images or colors, margin sizes and and other page styles.
5David Lash
CSS – Advantages/disadvantagesSome advantages of using CSS:
Control - Offers greater page layout controls for all pages at a site. E.g., can specify margin, indents, line spacing, element positioning, font size, etc.
Style Separate From Document Structure Smaller Size? - Can decrease document size - E.g.,
(reducing the number of FONT tags) Maintainability - Easier site maintenance
Disadvantages: Browser Support - Not supported in browsers
earlier than I.E. 3.0 or Netscape 4.0. Browser Implementation - IE and Netscape
implement the standard differently.
Netscape and IE implement many elements slightly different so need testing with both browsers.
6David Lash
What we are talking about…We will look at:
What are CSS Advantages and disadvantages Types of CSS
Look at embedded CSSLook at external CSS
Using Selectors Using Classes All About Properties
A big properties example
7David Lash
Types of Style Sheets Style sheets are typically used as a separate file.
Then every page that wants that “style” links to the sheet.
Still, style sheets can be used in 3 different ways: External Styles - Collect the style information in an external file and link
them into all the needed files at your site. For example, would provide a file that has all style information (like color of
headers) and include or link that file into all pages of your site. Would specify the style for a particular line of text in the document.
Embedded Styles - Embed the style sheet on the top of the document. For example, would specify the default color for all items in this web page.
Inline Styles - Put the style information in-line the text of the document. Would specify the style for a particular line of text in the document. (highest
precedence).
Note: Its called cascading style sheets because inline style specsOverride, embedded style specs, embedded overrides external.
8David Lash
Basic Embedded example
Could place the following at the top of HTML document: <HTML><HEAD><STYLE TYPE="text/css">
H1 {Color: red; font-size: 24pt; }
H2 { Color: green; font-size: 12pt; }
</STYLE> <TITLE> This is a sample web Page with emphasis added</TITLE></HEAD><BODY>
Notice use of 2 selectors with general syntax: selector:{property:value}
Note the “style” tag
Selector - identifies the element to be affected. Includes things like H1, H2, P, EM, LI EM.
property:value - identifies a stylistic property to be defined with some value. Includes things like color: red, font-site:
12pt, font-face Verdana. http://condor.depaul.edu/~dlash/website/interesting.html
9David Lash
External (or linked) Style Sheets
Use external file with style information Very powerful can link css file to one or more HTML
documents that want that "style" Here is an example:
http://www.depaul.edu/~dlash/website/externalExample.html The magic line to include the link tag in the
<head>...</head> is:
<LINK REL="STYLESHEET" HREF="stylesheet.css" TYPE="text/css">
Here is entire contents of file stylesheet.css H1 { Color: red; font-size: 36pt; } H2 { Color: green; font-size: 24pt; } P {margin-left: 44pt; }
10David Lash
What we are talking about…We will look at:
What are CSS Advantages and disadvantages Types of CSS
Look at embedded CSSLook at external CSS
Using Selectors Using Classes All About Properties
A big properties example
11David Lash
Using CSS SelectorsType Selectors – Can use lots of
different HTML elements: For example, H1 { Color: red; font-size: 36pt; }
H2 { Color: green; font-size: 24pt; } P {margin-left: 44pt; } EM, I { color: green; }
B { color: red; font-size: 18pt; } H1 {Color: red; font-size: 24pt;
H2 { Color: green; font-size: 12pt; } EM { Color: red; }
http://condor.depaul.edu/~dlash/website/externalExample2.html
12David Lash
Classes In CSS We already have a way to create a style for HTML elements
Handles situations like all H1 is big and green, or italic items are blue How do you override these for some items?
Can defined special classes For example can occasionally make some elements look different than
others?
E.g., suppose this is in a file called stylesheet3.cssEM, I { color: green; } B { color: red; font-size: 18pt }
H1.important {font: 36pt "Comic Sans"; Color: Blue}
H1.normal {font: 24pt "Arial"; Color: red}
The first part denotes the HTML element.
The second part denotes the “name” or label for the element.
Defines the element and property to set.
13David Lash
Using the class ….
Once linked to this style sheet. Have to different ways to create H1 elements:
<H1 CLASS="important"> Check It Out! </H1>
This is an important header<H1 CLASS="normal"> … </H1>
See example at http://condor.depaul.edu/~dlash/website/externalExample3.html
14David Lash
Another way to use style classes
Can also create a generalize class that can be included anywhere and is not tag specific.
Use the DIV command. E.g., inside the stylesheet: DIV.smallprint { font-size: 8pt; color: teal }
Then inside HTML document could do: <DIV CLASS="smallprint">
For example http://condor.depaul.edu/~dlash/website/externalExample4.html
15David Lash
Selectors - Special Built-in Classes
There is a set of classes that are special built-in. One set is used within the <A> tag.
For example here is a style sheet: A:link { color: red } A:visited { color: maroon }
A:active { color: lime } Here is an example
http://condor.depaul.edu/~dlash/website/externalExample5.html.
16David Lash
What we are talking about…We will look at:
What are CSS Advantages and disadvantages Types of CSS
Look at embedded CSSLook at external CSS
Using Selectors Using Classes All About Properties
A big properties example
17David Lash
Properties - font-family font-family - specifies a family of fonts to use Values: list of fonts to use Applies to: all elements Example:
P { font-family: Veranda, sans-serif } Notes:
There are 5 possible font-families it is like specifying a generic name. It is a good idea to make one of these last in the list 1. sans-serif (e.g., halvetica or arial) 2. monospaces (e.g., courier or new courier) 3. cursive (e.g., Zapf-chancery) 4. serif (e.g., Times) 5. fantasy (e.g., western, impact, or some other display
oriented font)
18David Lash
Properties - font-style
font-style - specifies between the normal (default), italic, and or oblique font-face within a font-family. (oblique is slanted text, italic is slanted with more cursive characters.) Values: normal | italic | oblique Applies to: all elements Example:
H1 { font-style: italic }
Notes: Bold is part of the font-weight not font-style.
19David Lash
Properties - font-weight font-weight - specifies the weight or boldness of
the font to use. Values: normal | bold | bolder | lighter | 100 |
200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Applies to: all elements Example:
STRONG { font-weight: 700 } Notes: Allows either a descriptive tag (normal,
bold, bolder or lighter) or a number. Normal is the default = 400. Typical bold is 700. Not all numbers may be supported within a particular font-family and browser have inconsistent support of this feature
20David Lash
Properties - font-size font-size - specifies a size of font to use Values: absolute size | relative size | length
percentage Applies to: all elements
As can be seen from above can be specified 3 different ways: Absolute size
• Values: xx-small | x-small | small | medium | large | x-large | xx-large • Example: H1 { font-size: x-large } • Notes: These are descriptive terms that reference a table of sizes
kept in the browser. Relative Sizes
• Values: larger | smaller • Example: H1 { font-size: larger } • Notes: specifies size relative to the parent object.
Length Sizes • Values: number + em | ex | px | pc | mm | cm | in • Example: H1 { font-size: 24pt}
21David Lash
Font-size cont - Length sizes can be specified differently …
Code Unit Description
px Pixel Number of pixels relative to the monitor resolution
pt Point A unit of measuring type (from publishing) equal to 72 pts = 1 inch
pc Pica A unit of measurement from publishing. 1 = pts or 1/6 inch
em Em A relative measurement equal the with of the capital M in the current font
ex Ex A relative measurement for the height of the width of the letter X in the current font.
in Inches Measures in inches
mm Millimeter Measures in millimeters
cm Centimeter
Measures in centimeter
22David Lash
Properties - font-colorcolor - specifies the color of the element.
Values: color_name | RGB Hex Value | RGB New Values
Applies to: all element Notes: As can be seen from above, specify 1 or 3
ways color_name: Use 1 of the 16 color names.
• values - aqua, gray, navy, silver, ... • Example:
– STRONG { font-style: italic; color: purple } RGB values: Use hex value that fill in the RGB values.
• values - 000000, ..., FFFFFF • Example:
– STRONG { font-style: italic; color: #FF00FF } RGB New Values
• values - rgb(255,0, 255) or rgb(100%, 0%, 100%) • Example:
– STRONG { font-style: italic; color: rgb(255, 0, 255) } – STRONG { font-style: italic; color: rgb( 100%, 0, 100%) }
23David Lash
Properties – line-height
line-height - sets height of lines. Values: normal | number | length |
percentage Applies to: all element Notes: As can be seen from above,
specify 1 or 3 ways Examples:
P ( line-height: 1.2 }
P { line-height: 1.2em }
P { line-height: 120% }
24David Lash
Properties – text-indent
text-indent - specifies the amount of indentation from the far left.
Values: length | percentage Applies to: block level elements Notes: As can be seen from above,
specify length or percent of normal text Examples:
P.first { text-indent: 3em }
25David Lash
Properties – background color
background-color - specify the color or RGB value for background color.
Values: color name | RGB value Applies to: all element Notes: Sets the background color of the
element. Examples:
P.warning { background-color: red }
STRONG { font-weight: 900; background-color: silver }
26David Lash
Properties – background color
background-image - specify the background image for an element.
Values: URL Applies to: body tag Notes: Sets the background image for
element. Examples:
BODY { background-image: URL(back.gif) }
Clearly this means with a CSS with this one tag, I can linkinto all my HTML documents and get common background.
27David Lash
A large example
Suppose you placed the following in a file called stylesheet6.css
P.first { text-indent: 12pt } H1.title { text-transform: uppercase } H2 { font-size: 33pt } H1 { color: red } EM { font-size: 18pt; font-style: Times, serif; color: FF00FF } STRONG { font-weight: 900; background-color: silver } BODY { background-color: yellow }
http://condor.depaul.edu/~dlash/website/externalExample6.html
28David Lash
Summary …We will look at:
What are CSS Advantages and disadvantages Types of CSS
Look at embedded CSSLook at external CSS
Using Selectors Using Classes All About Properties
A big properties example