<info 340/>
CSS Basics
Joel Ross
Spring 2020
We have a web page...
...but how do we make it look good?
Not this...
...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!)
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*/
}"font"
selector: apply to all <h1> elements
Hello CSS
Create a new file (File > New File)
Name it
style.css
h1 {
font-family: 'Helvetica';
color: white;
background-color: #333; /*dark gray*/
}<head>
<link rel="stylesheet" href="my-style.css">
</head>
Link stylesheet in your HTML's
<head>
relation between this page and reference
no content,
no closing tag
CSS Properties
What can we change with CSS?
-
font-family: the "font" (list alternates separated by commas) -
font-size: the size of the text -
font-weight: boldness -
color: text color -
background-color: element's background -
opacity: transparency -
padding: the space around an element - ... and many, many, more!
Why two languages?
Separation of Concerns
Keep content separate
from appearance
The same content can be presented in different ways to different users.
http://www.csszengarden.com/
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!
Class Selectors
Have a rule apply to only a particular elements by specifying those elements' class attribute and then using that class as the selector in the CSS
/* CSS */
.highlighted {
background-color: yellow;
}<!-- HTML -->
<p class="highlighted">This text is highlighted!</p>dot specifies class name, not tag name
Class Example
Add HTML attributes and CSS Rules so character names are in different colors!
<!-- HTML -->
<p class="rebel">Leia Organa</p>
<p class="imperial">Darth Vader</p>
/* CSS */
.rebel {
color: red;
}
.imperial {
color: gray;
}
<div> and
<span>
HTML elements that have no semantic or appearance meaning on their own.
Used to "group" content for styling.
<div class="cow">
<p>Moo moo moo.</p>
<p>Moooooooooooooooooooo.</p>
</div>
<div class="sheep">
<p>Baa baa <span class="dark">black</span> sheep,
have you any wool?</p>
</div>
block element (line break)
inline element (no line break)
CSS
Cascading Style Sheets
The Cascade
Multiple rules can apply to the same element (in a "cascade").
p { /* applies to all paragraphs */
font-family: 'Helvetica'
}
.alert { /* applies to all elements with class="alert" */
font-size: larger;
}
.success { /* applies to all elements with class="success" */
color: #28a745; /* a pleasant green */
}<p class="alert success">
This paragraph will be in Helvetica font, a larger
font-size, and green color, because all 3 of the above
rules apply to it.
</p>two classes (space separated)
info340sp20-css-basics
By Joel Ross
