Introduction to CSS
Cascading Style Sheets (CSS) allow us to add style such as colors, fonts, and layout to our pages. This lesson will be a review of the basic HTML covered in the last class and an introduction to CSS.
HTML Review (together)
Together, let’s mark up the Husky Cupcakes page.
HTML Review Activity (solo)
Let’s practice marking up a document without our text editor. I’ve printed copies of this Wikipedia excerpt. Using a pen and paper, mark up this document as HTML.
What is CSS?
Cascading Style Sheets, most of the time abbreviated as CSS, is a stylesheet language used to describe the presentation of a document written in HTML or XML (including various XML languages like SVG or XHTML). CSS describes how the structured element must be rendered on screen, on paper, in speech, or on other media.
CSS is one of the core languages of the open web and has a standardized W3C specification. Developed in levels, CSS1 is now obsolete, CSS2.1 a recommendation and CSS3, now split into smaller modules, is progressing on the standard track.
“What is CSS” is from Mozilla’s Developer Network Documentation
CSS Activity (together)
We’ll add some basic styles to our review HTML document we created earlier in class.
To do so, create a new file called style.css and add the following to the <head> of your HTML page:
<link rel="stylesheet" href="style.css">
CSS works by using selectors to select HTML content and apply styles to them. Look below and take a guess as the the result:
p {
color: pink;
}
Together we will style the Husky Cupcakes page we created earlier.
Common CSS Properties
Here is a list of some common CSS Properties and Mozilla’s Developer Network maintains a complete CSS reference
CSS Activity (solo)
Use today’s remaining class time to:
- Style the Long Wharf Pizza menu you created in a previous class. Change the background color of the page, some text colors, font styles, and type sizes. Reference the common CSS properties link above.
- Add a home page saved as
index.html - Markup this index page text
- Add an image to the home page
- Add your stylesheet (the same one used for the menu) and add any necessary styles
- Link your two pages together
Reading
Read The Dao of Web Design. Though this article is 13 years old, it is still considered a “classic” of web design writing and is essential reading for any web designer.