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!
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!
lis549-css-intro
By Joel Ross
