CSS
MC 4315 Web Design and Publishing - Sara Shields
What is CSS?
CSS stands for Cascading Style Sheet. It defines how HTML elements look, including color, position, size, etc.
CSS Syntax
Selector { property: value; }
For example, when we want to define the body background color, we know that we need to make changes to the body. Let’s say we want the body background color to be blue, we would put…
body { background-color: blue; }
We can also give a selector more than one property, and each property has a value. In addition to background color, we can also change the text color. We would put…
body { background-color: blue;
color: red; }
We can also define multiple selectors at a time. For example, all the h tags…
h1, h2, h3, h4 { font-size: 17px;
color: black; }
Defining an ID
In addition to defining HTML tags, we can also define an ID. Let’s say we have a paragraph, and the ID of the paragraph is “post” the HTML would look something like this…
<p id="post"text text text text </p>
To define the style of an ID, we use a pound sign and the ID in the CSS selector
# post { color: red;
font-size: 16px; }
Defining a Class
In addition to an ID, we can give HTML tags a class. The difference between an ID and a class is that an ID is unique. A class can be used many times. Let’s say we have a paragraph with the class “left” the HTML would look something like this…
<p class="left"text text text text </p>
To define the style of a class, we use a dot and the name of the class in the CSS selector
.left { color: red;
font-size: 16px; }
Attaching a Stylesheet in the HTML
To attach a stylesheet, enter the following code into your <head> section
<link rel="stylesheet" type="text/css"href="style.css"
Common CSS Properties
Font Properties
font-family: Arial, Verdana, etc
font-size: use em or px
font-weight: bold
font-style: italic
Color and Background Properties
color: color of text (black or #000000)
background-color: color of background
background-image: url("name.gif")
background-repeat: use ‘no-repeat’ to show once
Text Properties
text-decoration: underline
vertical-align: vertical positioning of the element
text-align: alignment within element
text-indent: first line indent
Border Properties
margin-top, margin-right, margin-bottom, margin-left: use pixels
shorthand example: margin: 1px 1px 1px 1px
the margin sets the size of the white space OUTSIDE the border
border-color: select color (black or #000000)
border-style: dotted, dashed, solid, none
shorthand example: border: solid red
List Properties
list-style-type: disc, bullet, none
display: inline (makes list present horizontally)
Other Properties
width: use px
height: use px
float: used for positioning and wrapping around an element
display: inline or block to change default
position: absolute or relative
padding: use px
the padding sets the size of the white space between the element content and border
Positioning
Use divs as containers for layout
You can use absolute or relative positioning
You can size containers with px or %
#header {
width: 950px;
height: 100px;
padding-top: 5px; }
New Ways to do Positioning with HTML 5
There is no need to use divs for main/common sections of the page
HTMLAdd CSS properties as you would for divs in CSS
<header</header>header {
nav</navwidth: 950px;
<section</section>height: 100px;
<footer</footer>padding: 10px; }
1