Jake Selvidio
Art & Design Instructor

mm205 « Web Scripting » CSS intro

CSS: Cascading Style Sheets

In CSS, you can select HTML elements and style them with a number of properties. CSS is written rather differently than HTML, but you'll pick it up quickly.

Definitions


Selector
The selector is used to target specific html elements
Example » h1, p, span
Property
The property identifies the aspect of the element you wish to style
Example » color, border, font-size
Value
The value is where you indicate exactly how you want that property to display
Example » red, 15px, left, right
Declaration
The proptery and value together are called the declaration
Example » font-size: 20px
Rule
The selector and its declarations together are called a rule
Example » h1 { font-size:20px; }

Diagram of a CSS Rule Set


Diagram of a CSS rule set

Adding CSS to your layout

The easiest way to add CSS to your html document is by adding the <style> element to your document <head>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of Document</title>
<style>
</style>
</head>
<body>
<h1>Welcome!</h1>
<p>This is my website</p>
</body>
</html>

We are going to use the h1 selector in order to target that specific html element. Your CSS rules are typed between the style tags.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of Document</title>
<style>
h1 {
   color:red;
   font-size:18px;
}
</style>
</head>
<body>
<h1>Welcome!</h1>
<p>This is my website</p>
</body>
</html>

Its good practice to use the type attribute in your opening style tag with the value of "text/css". Most current browsers will default to CSS when they see a style tag, but older browsers may not.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of Document</title>
<style
 type="text/css">
h1 {
   color:red;
   font-size:18px;
}
</style>
</head>
<body>
<h1>Welcome!</h1>
<p>This is my website</p>
</body>
</html>

Now let's add an additional rule for the paragraph element

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of Document</title>
<style type="text/css">
h1 {
   color:red;
   font-size:18px;
}
p {
   color:blue;
}
</style>
</head>
<body>
<h1>Welcome!</h1>
<p>This is my website</p>
</body>
</html>

Our final result should look like this:

screenshot image

resources

Copyright © 2014 Jake Selvidio. All rights reserved.