Other Pages

Basic Css

Goals

  • Learn basic CSS syntax

  • Write some basic CSS styles

Overview

What is CSS?

CSS stands for Cascading Stylesheets. It's a language for creating rules that can select various elements on the page and change their visual properties.

  • Cascading - The 'cascade' is one of the trickier elements of CSS to master, but it basically means you can define a bunch of styling rules of different strengths, and CSS will apply them all, resolving any conflicting rules by allowing stronger rules overwrite (or cascade over) weaker rules.

  • Stylesheets - CSS files are called 'stylesheets' because they allow you to put your styling rules into a separate document (a 'sheet') of file type .css, and then choose to include one or more in a given HTML page. This is a very important feature for sites with many pages, because it allows you to write your rules once and then include them everywhere on your site with a single link on each page.

CSS Rules Are Made of a Selector and Attributes

This section includes vocabulary you'll probably just want to memorize after class.

The selector tells the browser what elements to add that style to. On this page we'll only use existing tags, like <h1> and <p>, as our selectors.

The attributes tell the browser how to style the elements you selected. The first part, padding: is a property, and the part after the colon 20px is the value. The line is finished with a semicolon.

All together, the selector and properties together are called a rule.

(You will forget the semicolon at some point, and your CSS will break, but it's an easy fix.)

Why are HTML and CSS separate?

HTML tells the browser what your content means, whereas CSS tells the browser how it should look.

HTML is semantic: it's concerned with the meaning of the content, whereas CSS is presentational—CSS is all about style.

Steps

Step 1

Initially, we're going to add our CSS inside the <head> tag, below the line with the page title.

A standard style tag might look like this:

<head>
<title>My Sample HTML page</title>
<style type="text/css" media="screen">

</style>
</head>

Now save the file and refresh your browser. Everything should look the same.

Step 2

Add some styles that will apply to your h1 and p tags.

<style type="text/css" media="screen">
h1 {
  font-size: 20px;
  border-bottom: 1px solid #cccccc;
}

p {
  padding: 10px;
  background-color: papayaWhip;
}
</style>

When you save and refresh your browser, you should see the styles you added:

The type and media attributes inside of the <style> tag give the browser more context for how to deal with the included information. In this case, we're telling it that the type is HTML/CSS, and that that it's being displayed on a screen (as opposed to media="print", which is usually specially styled so it looks reasonable when printed.

Explanation

CSS is super powerful

Here are two screen shots of the same HTML page, but on the right side, we've turned off all the CSS. Almost all of the color and formatting disappear, and the code snippets and buttons that were obvious with CSS styles now just look like text.

Bundler: With and Without CSS (the horror!)

For some great examples of the power of CSS, check out the CSS Zen Garden. It takes the same HTML, but shows it with stylesheets from a bunch of different designers applied to it. Here are two different designers' interpretations of the same HTML:

Next Step: