Understand the Basic Principles of CSS

In today’s class I will touch upon the fundamentals of CSS, otherwise know as Cascading Style Sheets. While html allows us to code the content of a document, css allows us to give that content form. Put simply,  css changes the appearance of html. 

1. Linking a CSS page to a page of HTML

We’ll begin today by learning how to link a css sheet to a sheet of html. What makes css so valuable is that a single css sheet can alter the appearance of an infinite number of html pages! You do not have to go through and format each page of html individually. 

To begin, you need to open vader_test.html file I sent out earlier today. This file will be in a folder called “vader_demo”; please do not move the file outside of this folder. This html file is filed with Lorem Ipsum, or dummy text, and a few images so you can see how various properties work. 

Note: when working in most web servers, the “home” page for a website will be whatever file is named “index.html.” For instance, when you visit www.marccsantos.com, the default home page for that site is saved in my root .www folder as index.html. This is a near universal rule of the Interwebs. 

Now we want to put a link in the of our html pointing to (what will be) our css file. To do this, write:

2. Creating and saving a css file

Now we need to create a file called “vader_learning.css.” In either Notepad++ or TextWrangler, create a new file. Save that file as vader_learning.css. Make sure that file is in the same folder as your html file. 

I don’t have enough time today to go over all the intricacies of internal links, files, and folders, but remember that links operate by sending the browser to the location specified. For instance, I created a sub-folder named “content_ images” within the “vader_demo.” In order for the images of Vader to show up in my .html, I have to direct the link to the folder, not just to the image file. The link is: “content_images/vader_sword.jpg.” The information before the slash tells the browser it needs to locate and enter a folder named “images” before it will find the file “vader_sword.jpg.” You are essentially drawing the browser a map from the current location to the location of the file it needs to find. If you needed to go “up” a folder level, you would write “../” For instance, if I had a page of html in the content_images folder and wanted to include an image in my html from the css_images folder (work with me here), then I would need to code:

Then the browser would go from the content_images folder up to the vader_demo folder then into the css_images folder and then search/select the .jpg vader sword.

Get it?

3. Testing Our CSS file

Open the vader_test.html file in a browser. Right now you shouldn’t see any changes yet–it should still be “naked” .html. 

Let’s make sure our CSS file works. We will try and change the background color to red:

body {
background-color: #808080;
}

The line of code above has 3 parts: selector {property: value}. In this case we are selecting everything in the body tag, changing its background-color property, and changing the value of that property to grey (#808080). A semi-colon ends a value. Boom. 

After writing this code in your .css file, save. Then refresh your browser to see if your .html has a new background color. If so, then you have successfully linked a .css sheet to your .html file!

4. Making divisions in our .html

Now we have a problem. We have white text sitting on top of a grey background. This will not do. But, with CSS, we have a number of ways of fixing this. 

To take advantage of some of .css’s most useful abilities, particularly the ability to affect layout, we need to make a few quick alterations to our .html file. We are going to put in some absolutely invisible boxes, called “divisions.” Divisions allow us to target particular elements of the .html. 

I want to make 4 new divisions in the .html file. 

1. First, I want to make a division called “container” that opens immediately after the body opens and closes immediately before the body closes. This allows us to target all the content on the page. 
2. Second, I want to make a division called “header” that grabs the title and the tag line. 
3. Third, there is already included a division called “navigation” that grabs the (defunct) links to other pages
4. Finally, I want to create a division called footer that grabs my “copyright” information and my validation badge. 

Now we are going to use these divisions to do some “cool” stuff.

5. Zeroing Out a CSS File

CSS can do some pretty crazy things. Before we get started, we want to make sure that the browser’s default settings give us as few headaches as possible as we try to position elements. This is called “zeroing” out a css file. Here’s some code to include at the top of your head:

html

,

body

,

div

,

span

,

applet

,

object

,

iframe

,

h1

,

h2

,

h3

,

h4

,

h5

,

h6

,

p

,

blockquote

,

pre

,

a

,

abbr

,

acronym

,

address

,

big

,

cite

,

code

,

del

,

dfn

,

em

,

font

,

img

,

ins

,

kbd

,

q

,

s

,

samp

,

small

,

strike

,

strong

,

sub

,

sup

,

tt

,

var

,

b

,

u

,

i

,

center

,

dl

,

dt

,

dd

,

ol

,

ul

,

li

,

fieldset

,

form

,

label

,

legend

,

table

,

caption

,

tbody

,

tfoot

,

thead

,

tr

,

th

,

td

{

margin

:

0

;

padding

:

0

;

border

:

0

;

outline

:

0

;

}

You’ll want to copy and paste that into the very beginning of our css code

6. Some Basic Elements to a Layout

1. Body background is still grey, right?

2. Making base changes to #container:

• set the background color 
• set a percentage width
• set a pixel min-width
• set the margin-left and margin-right to auto
• set the padding-left and padding right- to 50px

These simple changes should start to give you a clean look. In the rest of class, we’ll make even more changes.