This preview shows page 1. Sign up to view the full content.
Unformatted text preview: rofiles vs. Facebook's incredibly clean [c. 2007] layout.) Maybe we can find
a way to style the pages so that our sites could look... like this! Let's look at an HTML page about whales: But this isn't the best looking page on whales. One way to style it could be by manually editing
each HTML element with HTML attributes. However, now you're mixing concerns about what
data should be presented and how that data should be presented in the same file. The better way
is to create a separate, external file called a .css file which specifies how certain data on the
whale page should be presented. What do .css files actually do?
CSS stands for Cascading Style Sheets. And .css files are just that: stylesheets. Your browser
has a default way of rendering certain HTML elements. But if you link an HTML page to a .css
file, the browser can parse that .css file and then override its native way of rendering HTML data. CSS syntax
CSS files as a regular grammar:
CSS FILE ::= (RULE)* RULE ::= (SELECTOR)+ (DECLARATION)* DECLARATION ::= PROPERTY (VALUE)+ CSS files are a series of zero or more presentation rules. Here's a sample rule: http://w3schools.com/css/css_syntax.asp) (from This rule demands that content between <h1> tags be blue and of font-size 12 pixels.
How does the browser know which HTML elements a rule targets? Notice that a rule
consists of 1 or more selectors. Selectors specify which elements the presentation rule is
targeting. In this example, the presentation rule is targeting all <h1> HTML elements. Most common selectors
selector1, selector2 targets all HTML elements of type htmlElementType (e.g.
h1, span, div, etc.)
targets elements of class className
targets one element with id idName (assuming HTML is
well-formed - ids should be unique per document!)
targets all elements
targets all elements specified by either selector1 or
selector2 selector1 selector2 targets all elements specified by selector2 that are
children (both direct and indirect) of elements specified by
View Full Document
- Spring '13