recitation5 notes

However now youre mixing concerns about what data

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

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: (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 htmlElementType .className #idName * 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 select...
View Full Document

This document was uploaded on 03/18/2014 for the course EECS 6.170 at MIT.

Ask a homework question - tutors are online