...

CSS: Cascading Style Sheets Austin Walker ( )

by user

on
Category:

local news

2

views

Report

Comments

Transcript

CSS: Cascading Style Sheets Austin Walker ( )
CSS:
Cascading Style Sheets
Austin Walker ([email protected])
Companion web site:
http://www.princeton.edu/~aewalker/demos/
Problems with HTML

Display style information in HTML is verbose
and repetitive


Have to add style info to every tag
Content and presentation info not separate

Use of HTML tags to dictate style


Eg. <table>
Harder for machines (think Google) to understand
content
Solution


Create two separate documents

Data

Presentation
Many standards:

Less common methods



XML in conjunction with DTD or Schema
JSON, etc.
Most common way...
CSS


Cascading Style Sheets (CSS)
'Language' to describe how HTML elements
should be displayed



Can be used with other things (eg XML), though not
very common
Ment to replace most HTML attributes
W3C standard, first version developed in 19941995.

Currently in version 2.1 with version 3.0 in
development
”Hello World”


Original:

<p align=”center”>Hello,</p>

<p align=”center”>World!</p>
Using CSS:

In style.css:


Link to CSS file in HTML:


p{ text-align:center }
<link rel=”stylesheet” href=”simplestyle.css” />
Don't need align attribute anymore!

<p>Hello,</p><p>World!</p>
Basic Syntax
[selector]{property:value;property:value;}

Selectors can be:

elements = HTML tags (p, div, h1, etc.)

.class = all elements in class

#id = element with id




:pseudo-class = all elements with pseudo-class
(see examples)
Values are are series of 1 or more white-space
separated strings
Whitespace is ignored except in values and double
quotes
Comments are as in C: /* comment */
Syntax Examples

Select all <div>s


Select the element with id princeton


#princeton { color:#FF9933; font-size:
200% }
Select all elements in the yale class


div { text-align:left }
.yale { color:#AA0000; font-size:50% }
Select all <p> elements in the harvard class

p.harvard { color:#0000AA; fontsize:10% }
Extra Syntax

HTML elements can be given multiple classes:


Can provide multiple selectors for the same
CSS code block:


<div class=”one two”> will (for CSS
purposes) be in classes one and two
.class1, .class2 {[properties]} will apply
properties to both class1 and class2
Nesting:

.someClass p {[properties]} applies properties
to all <p> elements within the elements with class
someClass
Possibilities....

Can define just about anything about the
display style using CSS


Some properties: alignment, color, background,
font, bold, underlines, size, padding, margins,
dispay ordering, positioning, ....
Way too many to list


See http://www.w3schools.com/css/css_reference.asp
Can also do some simple dynamic things using statusbased CSS pseudo-classes

Much easier than using JavaScript...
Alternate Uses

So far, CSS has been in its own file

Can also:


Put CSS in a <style></style> tag pair inside of
HTML <head> (similar to <script> tag).
Put CSS in individual HTML elements as the style
attribute:


<p style=”color:red”>Paragraph</p>
Not as powerful as other methods, but good for
things applied to only one element
”Cascading”?


The true power of CSS lies in inheretance
CSS properties ”cascade” down the page, but
can be overwridden or extended by later code


Similar to Java inheritance, but does support
multiple inheritnace
This is the primary use of the alternate uses in
the prvious slide
Inheritance Example
In sytle.css:
p{color:blue;font-wieght:20}
In HTML:
<head><link rel=”stylesheet”
href=”style.css” /></head>
<p>Paragraph 1</p>
<p style=”color:red”>Paragraph 2</p>

Paragraph 1 will be blue with 20-weight font,
and paragraph 2 will be red but still have 20weight font.
It's our <table>-free Philosophy!

Idea that developers should never have to use
HTML tags to dictate presentation




Typically, <table> tags are used because they
can partition space into sized components
In thoery, possible to use <div> and CSS
If adhered to properly, makes life easier for
Google by alowing page's semantic meaning to
be clear
Unfortunantly, many developers don't follow
because of...
...Browser Support

Browser support for CSS is about as bad as
JavaScript



Internet Explorer is typically the odd one, but since
over 50% of people still use it, developers are
forced to use hacks to support it

<table> tags

Hackish CSS tricks (see example)
Firefox, Opera, Safari, and Chrome are better, but
still have a few differences.
Can also be minor differences between
operating systems (even using the same
browser!)
CSS Extentions


Sass

Adds variables, nesting, etc.

sass-lang.com
Others?
CSS: Pros and Cons


Pros:

Well-supported

Easy to do simple things

Acomplishes presentation/data separation

Huge range of properties (can do many things)
Cons:

Inconsistently-supported

Hard to do more complex things

Huge range of properties (can't be memorized)
Final Notes

As HTML5 nears, use of old HTML
presentation-related attributes is discouraged


HTML logical formating tags are still ok, as long
as they are used semantically


If you don't use a CSS file, at least use style
attribute as much as possible
<strong>, <em>, etc.
Web programmers should know CSS!

Allows HTML design that is easy for web designers
and artists to work with
Fly UP