CSS
Terminology
Property (red) and value (blue)
p { font-weight: bold; }
Declaration (red)
A single property-value pair
p { font-weight: bold; }
Selector – shown in red Declaration block – shown in blue
Includes ALL of the individual declarations
p { font-weight: bold;
font-family: Arial, sans-serif; }
Ways to include CSS in your document
External stylesheet : attach a separate document in the <head>
of your HTML.
<link href="css/styles.css" rel="stylesheet" />
Internal stylesheet or embedded stylesheet : Include styles in the <style>
tag in the <head>
of your HTML
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
Inline styles : occur in the HTML tag itself
<p style="color: purple;">I am a purple paragraph!</p>
Which should you use?
99.999% of the time: External stylesheet
It is rare that you will need inline or embedded/internal styles, but you should know they are possible.
CSS Selectors
We will cover four simple ways to include CSS in your document:
- Elements: HTML tags as selectors
- Classes
- IDs
- Descendant selector
Element selectors
Simply list the HTML tag and how you'd like it styled.
body {
font-family: Arial, Helvetica, sans-serif;
}
.classname
Class selectors Create a class and attach it to an HTML tag to make the class appear.
- You may have more than one class per tag.
- You may use a class several times in a document.
- Classes are more specific than HTML elements and will generally override them.
<style>
.warning {
color: orange;
font-weight: bold;
}
</style>
<p class="warning">This paragraph displays a warning!</p>
#idname
ID selectors Create an ID and attach it to an HTML tag to make the styling appear.
- You may use the ID only once per page.
- Each element may have only one ID.
- IDs are the most specific, overriding styles from elements and classes.
- IDs are not commonly used in CSS these days. They are more commonly used with JavaScript.
<style>
#danger {
color: red;
font-weight: bold;
text-transform: uppercase;
}
</style>
<p id="danger">This text is uppercase, bold, and red, and you better pay attention because you're in danger only once on this web page!</p>
.classname element {}
Descendant selectors This is a combination of one or more classes, IDs, or elements, separated by spaces, to indicate a family relationship.
<style>
.warning p {
color: violet;
}
</style>
<article class="warning">
<p>All paragraphs in this article will have a color of violet.</p>
<p>This paragraph too! No more classes needed!</p>
</article>
Grouping selectors
Make all h4
AND h5
red:
<style>
h4, h5 { color: green; }
</style>
<h4>I'm Green</h4>
<h5>I'm Green Too!</h5>
Make only the h6
's in <section>
blue:
<style>
section h6 { color: blue; }
</style>
<section>
<h6>I'm blue!!</h6>
</section>
<h6>I'm NOT blue</h6>
Make the h4
's and h5
's inside <section>
pink:
<style>
section h4, section h5 { color: pink; }
</style>
<section>
<h4>I'm pink!!</h4>
<h5>I'm pink too</h5>
</section>
<h4>I'm NOT pink</h4>
For easier reading, you may wish to write selectors on separate lines:
section h4,
section h5 {
color: pink;
}
Note that this is NOT the same as the above selector. This says "make all h4
's in sections have a black background, and make ALL h5
's have a black background."
section h4,
h5 {
background-color: black;
}
Common CSS properties and values
font-family
Establishes the font family/families. Standard choices include:
- sans-serif:
Arial, Helvetica, Trebuchet MS, Verdana
- serif:
Times, Times New Roman, Georgia
- monospace:
Courier
<style>
p.example-family { font-family: Courier; }
</style>
<p class="example-family">The quick brown fox jumps over the lazy dog.</p>
font-size
Default browser size is 16px = 1em = 1 rem
<style>
p.example-fontsize { font-size: 1rem; }
</style>
<p class="example-fontsize">The quick brown fox jumps over the lazy dog.</p>
font-style
Should the font be italic
or normal
?
<style>
p.example-fontstyle { font-style: italic; }
</style>
<p class="example-fontstyle">The quick brown fox jumps over the lazy dog.</p>
font-weight
Should the font be bold
or normal
?
<style>
p.example-fontweight { font-weight: bold; }
</style>
<p class="example-fontweight">The quick brown fox jumps over the lazy dog.</p>
font
Shorthand for multiple font
properties.
<style>
p.example-fontshorthand { font: italic bold 1rem/1.3rem Arial, Helvetica, sans-serif; }
</style>
<p class="example-fontshorthand">Font is Arial/Helvetica/sans-serif, italic, and bold, and 1rem in size, with 1.3rem line spacing.</p>
line-height
Distance between lines.
<style>
p.example-lineheight { line-height: 1.3rem; }
</style>
<p class="example-lineheight">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
color
Text color.
<style>
p.example-color {
color: #d74f25;
}
</style>
<p class="example-color">The quick brown fox jumps over the lazy dog.</p>
background
background-color
background-image
background-position
background-repeat
Dealing with background images and colors. background
property is shorthand for all of the other properties.
By default, background images repeat.
background-color: lightblue;
sets the background to lightblue.
<style>
p.example-background1 {
background-color: lightblue;
}
</style>
<p class="example-background1">The quick brown fox jumps over the lazy dog.</p>
While background: lightblue url(image.jpg) no-repeat left top;
means a background color of light blue, background image of image.jpg
, display it once at the left top corner, no repeat of the image.
<style>
p.example-background2 {
background: lightblue url(http://placepuppy.net/300/300) no-repeat left top;
height: 300px;
}
</style>
<p class="example-background2">The quick brown fox jumps over the lazy dog.</p>
Image will display over the color. You may specify a color in case the image doesn't display.
text-decoration
Turns off the underline in links.
Values include none
, underline
.
<style>
a.padding {
padding: initial;
}
a.example-textdecoration {
text-decoration: none;
}
</style>
<p>The quick brown <a class="example-textdecoration padding" href="https://www.youtube.com/watch?v=jofNR_WkoCE">fox jumps</a> over the <a class="padding" href="https://giphy.com/gifs/cheezburger-dog-dogs-FdWU4HtO5vTGw">lazy dog</a>.</p>
Link Pseudo-classes
Pseudo-classes: specify styling in these states.
:link
— unvisited link:visited
— visited state:focus
— the currently "focused" (selected) element:hover
— hover your mouse over this:active
— the time between the link is selected and the time the page loads. (Not used much today.)
If you are using these pseudo-classes, they MUST go in the order listed.
To remember:
Lord Vader Former Handle Anakin
:link
, :visited
, :active
are used almost exclusively on links (the A
tag).
The pseudo-classes :focus
and :hover
are used with links and with any other element on the page. :focus
is especially useful with forms and in accessibility contexts.
<style>
a.example:link {
color: #c02d28;
}
a.example:visited {
color: blue;
}
a.example:focus {
border: 3px dotted black;
}
a.example:hover {
color: purple;
font-weight: bold;
}
a.example:active {
color: #7c8e88;
}
</style>
<p>The quick brown <a class="example" href="https://www.youtube.com/watch?v=jofNR_WkoCE">fox jumps</a> over the <a class="example" href="https://giphy.com/gifs/cheezburger-dog-dogs-FdWU4HtO5vTGw">lazy dog</a>.</p>
References
HTML Elements Reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Interneting Is Hard
- Hello CSS https://internetingishard.netlify.app/html-and-css/hello-css/
- CSS Selectors https://internetingishard.netlify.app/html-and-css/css-selectors/
- Links and Images https://internetingishard.netlify.app/html-and-css/links-and-images/
Validating CSS
http://jigsaw.w3.org/css-validator/
Convert pixels to ems and %
Color palettes, if you need help creating one
Colorzilla, for choosing colors from your website
Exercises
Waaaa, it "doesn't work"!!!
Remember to use the HTML and CSS validators if things are looking odd in the browser, or if the colors in the editor seem off. That's an indicator that you've made some errors along the way. The HTML validator is great for catching errors pertaining to syntax, tag spelling, tag nesting, and applying the right attributes to a given tag. The CSS validator will find unclosed curly brackets, properties and values that don't exist, and more.
HTML validator: http://validator.w3.org/
CSS validator: http://jigsaw.w3.org/css-validator
Style your book chapter
Look at the book chapter that you marked up yesterday.
To this, add some CSS styling. Make use of:
- Colors, background images, styling text
- CSS selectors: elements, classes, ID, descendent selector
- Include styles in an external stylesheet
Additional CSS practice
If you finish early, and/or you want some more practice, work through the following sections of exercises at W3Schools:
https://www.w3schools.com/html/exercise.asp
- HTML Styles, all exercises (inline styles only)
- HTML CSS, all exercises (embedded styles)
- HTML Links, exercise 4
- HTML Images, exercise 2
- HTML Classes, all exercises
- HTML IDs, all exercises
There are additional exercises at this link:
https://www.w3schools.com/css/exercise.asp
- CSS Syntax
- CSS How To
- CSS Background
- CSS Text
- CSS Links
- CSS Fonts
On Your Own
Begin styling the "about" page you made yesterday.
If you still need more to do, make a page about some of your hobbies and activities and style it, or style the hobbies page you made yesterday. Include:
- What is this hobby exactly?
- How does it make you feel?
- Where have you traveled because of your hobby? What other life experiences has your hobby provided, that you might not otherwise experience?
- Photos and/or videos of your hobby in action
- Links to websites describing your hobby, or where hobbyists discuss what they do
If you manage to get as far as creating both web pages, link them together with a navigation bar.