knowledge-kitchen

CSS - Introduction

styling the content of a web page

  1. Overview
  2. Separation of Concerns
  3. Setup
  4. Selectors
  5. Rules
  6. More Selectors
  7. Conclusions

Overview

Cascading Style Sheets (CSS) is used to indicate the visual presentation of the content on a web page.

Separation of Concerns

The separation of concerns is a philosophy popular in technology that different tasks should be accomplished by different technologis. With regards the Web:

Setup

Including CSS into an HTML document

There are three ways that stylsheets can be included into an HTML document:

External stylesheet file

The preferred method. Put style sheet code in a separate file and link to that file from the HTML document.

A link element should be nested within the head element of your HTML document.

<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    ...
  </head>
  ...
</html>

External stylesheet file (continued)

Now you can write CSS code into that separate file and it will be applied to the content in the HTML document.

p {
  background-color: pink;
}

Internal style element

A discouraged method. Put style sheet code into a style element within the HTML document.

A style element should be nested within the head element of your HTML document.

<html lang="en">
  <head>
    <style>
      p {
        background-color: pink;
      }
      ...;
    </style>
    ...
  </head>
</html>

Inline style attribute

A discouraged method. Put style sheet code into a style attribute inside any HTML tag.

This attribute would be added to any elements within the body of the document.

<html lang="en">
  ...
  <body>
    <p style="background-color: pink;">Lorem ipsum dolor sit amet</p>
    ...
  </body>
</html>

Selectors

Concept

Out of all the elements on a page, a selector picks those that will be styled by a given block of code.

For example, the following code selects for any and all p paragraph elements on the page and gives them a blue font color.

p {
  color: blue;
}

Selecting by tag name

Selectors can select by tag name:

Select all p elements and make the text within blue.

p {
  color: blue;
}

Select all img elements and make the text within blue.

img {
  width: 200px;
  height: 200px;
}

Selecting by id attribute

Selectors can select by a unique identifier optionally given to a particular element:

For example, given the following HTML code:

<img id="donkey" src="images/donkey.jpg" />

Selecting by id attribute (continued)

The following CSS code would select for just this one donkey image.

img#donkey {
  width: 200px;
  height: 200px;
}

This can be rewritten to select for an element of any type with the id donkey.

#donkey {
  width: 200px;
  height: 200px;
}

Selecting by class attribute

Selectors can select by a non-unique class optionally given to particular elements:

For example, given the following HTML code:

<ul>
  <li class="odd">Tomatoes</li>
  <li class="even">Bananas</li>
  <li class="odd">Yuccas</li>
  <li class="even">Beets</li>
</ul>

Selecting by class attribute (continued)

The following CSS code would select for only the even list items.

li.even {
  background-color: pink;
}

This can be rewritten to select for elements of any type with the class even.

.even {
  background-color: pink;
}

Rules

Concept

Rules are changes to a style property, applied to whichever element(s) have been selected.

For example, the following CSS code contains three rules necessary to control the border of an element.

header {
  /* the following three lines are rules */
  border-width: 1px;
  border-color: black;
  border-style: solid;
}

Changing color

There are several properties related to color changes, including:

Example:

footer {
  color: black;
  background-color: #c0c0c0;
  border-color: blue;
  /* the other two border-related properties are necessary to show a border */
  border-width: 2px;
  border-style: dotted;
}

Changing text

There are several properties related to text or font changes, including:

Example:

p#first {
  color: purple;
  font-family: helvetica;
  font-size: 12px;
  font-weight: bold;
  text-decoration: underline;
}

Changing sizing and spacing

There are a few properties related to text or font changes, including:

Example:

aside {
  margin: 10px;
  padding: 20px;
  width: 400px;
  height: 600px; /* as a general rule, don't set the height of an element like this... let the height auto-adjust to fit the content within the element */
}

More rules

There are many more properties to style… once you get the hang of the basic style properties we’ve discussed, learn some more.

More Selectors

Compound selectors

The following will apply the same set of rules to both header and footer elements:

header,
footer {
  background-color: #00ff00;
}

Here’s another example with a mix of different kinds of selectors:

section#first,
aside.nonesense,
p {
  background-color: #00ff00;
}

Nesting selectors

The following will apply the rules to any p paragraph element within an article element.

article p {
  background-color: #00ff00;
}

Another example with a mix of different selector types:

article#featured p.green {
  background-color: #00ff00;
}

Direct descendent selectors

Given the following HTML code:

<article class="featured">
  <h2>Something Important</h2>
  <p>Lorem ipsum dolor sit amet....</p>
  <aside>
    <h3>A Side Note</h3>
    <p>Twas brillig and the slithy toves...</p>
  </aside>
</article>

<article>
  <h2>Something Else</h2>
  <p>Lorem ipsum dolor sit amet....</p>
</article>

Direct descendent selectors (continued)

The following CSS selector would only select the p paragraph that is nested directly within the article with the class featured, not any other paragraph.

article.featured > p {
  background-color: #00ff00;
}

Conclusions

You now have a basic understanding of the purpose of CSS, its syntax, and some of the common selectors and rules.