Intro to CSS

Joel Ross

LIS 549

In this video...

  • Including CSS

  • CSS Rules, Selectors, and Properties

  • Why two languages?

We have a web page...

 

...but how do we make it look good?

Not this...

(see also: https://websitesfromhell.net/)

...but this!

CSS

Cascading Style Sheets

A language that defines rules for styling

"use this color and font for the first paragraph in the article; this picture for the page's background..."

(kind of like Styles or Themes in PowerPoint, but way, way more powerful!)

Including CSS

The CSS code will goes in the stylesheet—its own file (called e.g., style.css) 

/* in the style.css file */
h1 {
  font-family: 'Helvetica';
}
<!-- in the index.html file -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

Link stylesheet in your HTML's <head>

relation between this page and reference

no content,
no closing tag

CSS Syntax

List rules for formatting properties for a particular kind of element.

Rules list what values to assign to different formatting properties (variables)

Selectors tell which elements the properties apply to

/* A rule with many properties */
h1 {
  font-family: 'Helvetica';
  color: white;
  background-color: #333; /*dark gray*/
}

selector: apply to all  <h1> elements

CSS Properties

What can we change with CSS?

  • font-family: the "font"
  • font-size: the size of the text
  • font-weight: boldness
  • color: text color
  • background-color: element's background
  • padding: the space around an element
  • ... and many, many, more!

(http://www.w3schools.com/cssref/)

Why two languages?

Separation of Concerns

Keep content separate
from appearance

Allows the same styling to apply to different content.

The same content can be presented in different ways to different users.

HTML vs. CSS

HTML specifies the semantics.

CSS specifies the appearance.

<!-- HTML -->
<p>This text has <i>emphasis!</i></p>
/* CSS */
em {
  font-style: normal;
  text-decoration: underline;
}

why is this italicized?

change what emphatic text looks like

HTML describes the meaning, not what it looks like!

<!-- HTML -->
<p>This text has <em>emphasis!</em></p>

says nothing about appearance!