- HTML Review
- Brief intro to CSS
Download this template to get started: intro-to-css.zip.
Use relative file paths to link to images. From our
index.html file, we specify that we want to go into the
images folder, and link to a file called
Intro to CSS
CSS stands for Cascading Style Sheet. It is a separate language that allows us to add style, create complex layouts, and apply behaviors and animations to our HTML elements.
To add custom styles to our HTML documents, we create a new file, called
... and we link to this CSS file from our HTML document via the
<link rel="stylesheet" type="text/css" href="css/main.css">
The styles in
main.css will apply to every page that links to it in the document
<head>. This allows you to maintain consistency across all your pages.
Targeting HTML Elements
You can target HTML elements by their tag names, just as we have done with the body tag. In CSS, we have property names, and property values.
background is a property name. It defines the property of the HTML element we wish to address.
orange is a property value. We specify the color or style we'd like to associate with
There are many CSS properties we can apply to various HTML elements, and they all have various effects and implications for style and layout. To get started, you might explore the following properties:
Background Images & Colors
background-color background-image background-size
color font-family font-size letter-spacing line-height
border-color border-width border-style
Margins & Padding
To learn more about each property, you can do a Google search. Type "CSS font-family" or "CSS background-color" or "CSS letter-spacing". In other words: CSS + [property name]. You can also try more general searches, such as: "CSS typography" or "CSS image effects" or "CSS animation". W3Schools is also a good resource for basic information.
Play around with where you add your styles. Note what happens when you apply a CSS property to the
body vs. to just the
p (paragraph) tag.
DUE WEEK 5
Read & Review. Download the updated template from our in-class demo (intro-to-css). Open the entire folder in Sublime Text and read through the
index.htmlfile, including all of the comments.
- Create a beautiful, clearly structured, single-page archive of your 25 Frames project. Once you are finished, upload your project to your server and paste a link into the class Google Doc.