css: cascading style sheets · css cascading style sheets (css) ... :pseudo-class = all elements...
TRANSCRIPT
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 1994-1995. 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:
p{ text-align:center }
Link to CSS file in HTML: <link rel=”stylesheet” href=”simple-
style.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 div { text-align:left }
Select the element with id princeton #princeton { color:#FF9933; font-size: 200% }
Select all elements in the yale class .yale { color:#AA0000; font-size:50% }
Select all <p> elements in the harvard class p.harvard { color:#0000AA; font-size:10% }
Extra Syntax
HTML elements can be given multiple classes: <div class=”one two”> will (for CSS
purposes) be in classes one and two
Can provide multiple selectors for the same CSS code block: .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 status-based 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 20-weight 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 If you don't use a CSS file, at least use style
attribute as much as possible
HTML logical formating tags are still ok, as long as they are used semantically <strong>, <em>, etc.
Web programmers should know CSS! Allows HTML design that is easy for web designers
and artists to work with