Introduction to CSS

What is CSS?

From the W3:

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem of presentation
  • External Style Sheets can save a lot of work
  • External style sheets are stored in CSS files

HTML is the language we use to structure our pages. CSS, or Cascading Style Sheets, is simply a way to add styling to your web site. It adds the presentational layer. Let me reiterate that:

HTML = structure

CSS = presentation

CSS is made up of a set of rules you create to tell browsers how to display your site. Each rule selects a particular tag (or set of tags) and declares how it should be displayed by the browser. It is its own language with its own syntax.

Check out the power of CSS: CSS Zen Garden

When you click through the list of styles, you can see how radically different the styles are. The content is identical throughout, and all you are doing is switching form one style sheet to the next. Pretty darn neat!

Here are many examples of styling from the W3

Why use CSS?

  1. Better type and layout control: all of your styling is in one document. You change the one document, and your ENTIRE site is updated.
  2. Less work: in the old days, we added styles to each element, so when we had an update, we had to go through every single page.
  3. Smaller documents, meaning faster downloads for your viewers
  4. More accessible sites: your site can be read by nonvisual or mobile devices
  5. Better browser support

We are concentrating on external style sheets, meaning all of the rules for our sites will be contained on a document of their own. That means we will create a style sheet for all of our CSS rules, attach it to our html document and then the browser will use our CSS to display the HTML page.

Structure of CSS

A CSS rule can determine one or several attributes at once.

css_declarations1

Selectors can be as simple as an element type selector like h1 or p, or as specific as #container2 a.pics:hover span, depending on the context. We are working with simple selectors and building up from there.

The property is the aspect of that element that you are choosing to style. There can only be one property within each declaration.

The value is the exact style you wish to set for the property.

css_declarations2

This site has an excellent introduction to CSS in very easy to understand terms.

The Box Model

Browsers see every element in your HTML page as being contained in its own rectangular box. You can style these boxes by adding borders, margins, padding and even backgrounds to them. You can also use CSS to reposition them on the page. Here is a first look at the Box Model.

The Box Model

Content Area:
This is the actual content itself, images or text.

Element Width
This is the box that gets sized when you apply width and height properties in your code. These edges are not visible in actual practice.

Padding Area:
This is the area between the content area and the border of the content box. It is optional.

Border:
This is a line that surrounds the padding area. It can be styled in several ways: color, width, pattern. Each side can be styled separately. Borders are optional.

Margin:
This is an optional amount of space added to the outside of the border. Margins are always transparent and can be given a width for each separate side.

Containing Block Width:
This is the edge of the element, and it includes the entire area taken up by the element, its padding, borders, and margins.

What does Cascade mean?

There are several style sheets being applied to an HTML document whenever it is accessed by a browser. Cascade refers to the fact that there is a hierarchy that is followed to determine which style is followed. The style rule or sheet that has the highest precedence is the one that is used.

  • Browser default settings are overridden by
  • User style settings are overridden by
  • Imported style sheets are overridden by
  • Embedded style sheets are overridden by
  • Inline styles are overridden by
  • Any style marked !important by the author is overridden by
  • Any style marked !important by the reader

There is also a cascade in terms of specificity: the more specific the CSS selector, the more weight that style has.

Lastly, there is a cascade in terms of rule order: the last rule for an element is the one that will be used be the browser.

When you add CSS styles, elements pass down text style properties to elements they contain. Just as you inherit certain traits from your parents, HTML elements can inherit properties.

Let me restate that.

First of all, let me take an average html page and draw it out as a chart:

css_declarationsa

All elements contained within a given element are its DESCENDANTS. All elements higher than a given element are its ANCESTORS. Any 2 or more elements contained by the same parent are SIBLINGS.
css_declarationsd

That means if you apply a text style to the tag, all of its children will inherit that style. The img tag does not inherit the style because it is not and does not contain any live text.

css_declarationsb

css_declarationsc

Any property applied directly to an element will override any inherited values. For example, if you style the tag, that style will override any property it could inherit from the tag.

CSS Elements

Here are some more concepts we will be learning in the coming week:

Divs

The div tag defines a block-level division or a section in an HTML document. We will use them to structure our sites. They are often used to group block-elements to format them with styles. You can use them like a container around a logical grouping of elements on the page.

Spans

The tag provides no visual change by itself, but is a way to contain inline elements without introducing line breaks.

The tag provides a way to add a hook to a part of a text or a part of a document.

ID Selectors

You can add an id attribute to any element like so:

< div id="container" > Here is some content < /div >

You give out each ID only once in a document.

In order to style this element, you write the selector as such:

#container {color: red;}

Class Selectors

You can class any number of elements together using a class selector. They are written as such:

.hopeful {color: blue;}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s