Previous | Table of Contents | Next

{ CSS for Style. }

Objectives

By the end of this chapter, you should be able to:

  • Explain what CSS is
  • Link to an external stylesheet
  • Change colors, fonts and placement of elements

Introduction to CSS

Getting started with CSS

When we first introduced HTML, we said that it was primarily responsible for holding the content of the page, while the styling was handled by CSS. So what is CSS, anyway, and how can we use it to style our web pages?

CSS stands for Cascading Style Sheets, and it's a way to describe style rules that we'd like to set for our HTML elements. Using CSS we can alter things like colors, fonts, margins, text alignment, and much more! Here's some further reading on the background and history of CSS, if you're interested.

There are three ways to include CSS in our web pages:

  1. Inline styling. This is done by adding a style attribute to an HTML tag. We will see shortly that this can have some unintended consequences.
  2. <style></style>. This is done by using a style tag and placing CSS inside of it.
  3. External stylesheets. This is the most common way and almost always the best practice

Since we will be using external stylesheets, we need to figure out how to link our CSS to our HTML. The answer is with a link tag! If we have a file called style.css in the same folder as our HTML file, we can link them with the following tag, which you should place inside of the head element:

<link rel="stylesheet" href="style.css">

Syntax, Selectors

Each CSS rule consists of a selector (how we find the element/elements) to target and a pair of curly braces, a.k.a. {}. Inside of {} we specify properties and values; we separate the two with a :, and after the value we add a ;. To add multiple selectors we separate each one by a ,. This looks something like this:

body {
    background-color: green;
}

In this rule, we are targeting the <body></body> element and applying a background color to it. While this works, it might be a bit too general (maybe we only want a background color of green on certain parts of the page, not the whole body). In order to be more specific, we can use attributes like class and id to target our elements. We'll talk more about these attributes in the next chapter; for now, you can think of them as a tool that makes it easier to find the element you're looking for on the page. The biggest difference is that ids must be unique: two elements should never have the same id. But you can have multiple elements share the same class.

Let's take a look at a sample HTML file. We will call this file index.html. Notice the <link/> tag we are using to link to an external stylesheet,which we will call style.css:

<!DOCTYPE html>
<html>
<head>
    <title>Learn CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="main_styles" id="container">
    <header class="main_heading">
        <h1>Welcome to our website</h1>
        <h4>We're so happy to have you</h4>
    </header>
    <section class="main">
        <ul> Here are some reasons you should keep reading....
            <li>You're learning things!</li>
            <li>CSS is fun!</li>
            <li>Well.....not always, but it is essential to know!</li>
        </ul>
    </section>
    <footer class="main_footer">
        <p>
            Thanks for checking out this page! 
            <a href="#">Here is a link that goes nowhere! It's for showing you stuff with CSS......we promise</a>
        </p>
    </footer>
</body>
</html>

We can see from this HTML that we have added some class and id attributes. Right now they do not alter anything about the page, but we can use them as selectors with CSS. To target a class with CSS, add a . before the name of the class. For an id, add a # before the name of the id.

This is what some CSS might look like for our page (imagine our filename is style.css and is in the same directory as our index.html:

#container {
    font-size: 16px;
}
.main_header {
    background-color: grey;    
}
.main {
    background-color: blue;
}
.main_footer {
    background-color: green;
}
.main_header, 
.main_footer {
  color: red;
}

After typing this code into your style.css file, refresh the page. If you've set things up properly, you should see some big changes in the way your page looks!

One important thing to know about CSS is the C, or cascading nature of CSS. This means that your code is read top to bottom, so if you have the same level of specificity, the rule closest to the bottom wins. For example, consider the following stylesheet:

p {
    font-size: 16px;
}

p {
    font-size: 100px;
}

These two rules conflict, but because they have the same degree of specificity, cascading will kick in, and the latter rule will overwrite the former. The text on this page will be huge!

Color

So far we have seen a few basic properties, such as background-color, which allows us to set the background color of an element. The value we assign to this property can either be a named color (blue, green, red etc.), a hex code (# followed by six values from 0 to F), an rgb value (red, green, blue), or an hsl value(hue, saturation, lightness) value. If you don't know what these are, you can mess around with them here. These same values can be assigned to the color property, which sets the font color on an element.

Typography

If we want to change the text on our page, we commonly use some of these rules:

  • font-size - select the size of your font (we will discuss other units of measurement in the next unit)
  • text-align - align the position of the text
  • font-family - choose what kind of font you want to use
  • letter-spacing - add positive or negative (less) space between characters
  • text-transform - capitalize/uppercase/lowercase your text
  • line-height - choose the amount of height between lines
  • font-variant - useful for displaying a small-caps font
  • text-shadow - add a shadow to your text
  • color - select the color of the text

Here's an example of how you could set values for each of these properties:

.some_text {
    color: #BDBFEF;
    font-size: 12px; 
    text-align: center;
    font-family: helvetica, sans-serif; 
    letter-spacing: -1px;
    text-transform: lowercase;
    text-shadow: 0 2px 0 black;
    /* first value is horizontal/x offset */
    /* second value is vertical/y offset */
    /* third value is how much blur */
    /* fourth value is the color */
    /* you can even have multiple shadows separated by a comma! */
    line-height: 1.4;
    font-variant: small-caps;
}

There are hundreds of CSS properties, much more than we can cover here. You'll pick up more properties as you start working on your projects. If you'd like to see an exhaustive reference of CSS properties and other keywords, MDN has got you covered.

The Box Model

Now that we have an idea around basic color and typography, let's see how to add some space around our elements and the content inside. In order to do that, we first have to understand what the box model is. But before we explain the box model, let's make sure we understand some basic properties for adding space between elements and content.

width - The width CSS property specifies the width of the content area of an element.
height - The height CSS property specifies the height of the content area of an element.
margin - used to generate space around elements. margin is a shorthand for margin-top, margin-right, margin-bottom and margin-left.
padding - The padding property in CSS defines the innermost portion of the box model, creating space around an element's content, inside of any defined margins and/or borders. padding is a shorthand for padding-top, padding-right, padding-bottom and padding-left.
border - The border property defines the space between an element's padding and margin. border is shorthand for border-top, border-right, border-bottom and border-left.

div {
    /* This: */
    margin: 20px;
    /* Is the same as: */
    margin-top:20px;
    margin-right:20px;
    margin-bottom:20px;
    margin-left:20px;

    /* This: */
    padding: 10px 20px;
    /* Is the same as: */
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    padding-left:20px;
}

h1 {
    /* This: */
    margin: 20px 10px 5px;
    /* Is the same as: */
    margin-top:20px;
    margin-right:10px;
    margin-bottom:5px;
    margin-left:10px;
}   

h2 {
    /* This: */
    margin: 10px 20px;
    /* Is the same as: */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

Now that we understand this, we can think of every single element on a web page as a rectangular box.

From MDN:

In a document, each element is represented as a rectangular box. Determining the size, properties — like its color, background, borders aspect — and the position of these boxes is the goal of the rendering engine.

In CSS, each of these rectangular boxes is described using the standard box model. This model describes the content of the space taken by an element. Each box has four edges: the margin edge, border edge, padding edge, and content edge.

CSS Box Model

The true width/height of an element is comprised of its width/height + padding + border. Margin is not counted when calculating the true width/height!

div {
    width: 200px;
    height: 200px;
    margin: 20px;
    padding: 20px;
    border: 20px solid black;
}

/* True width =  width (200px) + padding-left(20px) + padding-right(20px) + border-left (20px) + border-right (20px) = 280px
*/

/* True height =  width (200px) + padding-top(20px) + padding-bottom(20px) + border-top (20px) + border-bottom (20px) = 280px
*/

When you're ready, move on to JavaScript for Behavior

Continue

Creative Commons License