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 - this is how the browser determines the correct style rules to apply to each element on the page. As we'll see, CSS has many ways to match rules to elements, and some of those ways count for more than others. The browser allows more important rules to cascade over less important ones.

  • Stylesheets - CSS files are called 'stylesheets' because they are separate documents - their file type is .css - that only deal with styling information. We add special tags in our HTML files to link them to our stylesheets.

Unlike HTML, which is concerned with the meaning of the content, CSS is presentational: it's concerned with how that content should look.

Why are HTML and CSS separate?

There are many good reasons to keep HTML and CSS separate. A typical website will reuse styles - like the color of links or the sizes of buttons - over and over again; by keeping them separate from the markup, we can use the same styles across a site.

This makes our code more efficient and easier to maintain, and keeps the site visually consistent. It also makes it easier to use different styles for different devices, so a site can have different looks for desktop and mobile browsers.

CSS Rules Are Made of a Selector and Attributes

The selector is the first part of a CSS rule - it tells the browser how to find, or select, the element we want to style. On this page, we'll use h1 and p as our selectors, which match the h1 and p elements in our HTML.

The attributes are the parts of the rule inside the curly braces - they tell the browser how the elements we've selected should appear.

Take a look at the attributes for the h1 rule above. The part before the colon — font-size — is the property, and the part after it — 20px — is the value. This attribute tells the browser that all h1 elements should have a font-size of 20 pixels.

The semicolons at the end of each attribute are important - if we forget them, the CSS won't work.

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.

To visualize the relations between elements of Content, Padding, Border, and Margin, otherwise known as the CSS Box Model, here is an example of how this fits in:

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!)

Next Step:

Back to HTML Structure