The Zak Soup Center for Designers Who Can’t Code Good: PART 3
Part 3: CSS IS TEH COOLZ
So you’ve built your really basic html site using the syntax we learned in lessons one and two…
Now you want to make everything look reaaaaaly awesome. The first thing you have to do is create a new file. this file, rather than having the extension ‘.html’ will be ‘.css’ and therefor be called a CSS file. duh.
You must link your HTML and your CSS files together. You do this by creating a CSS link in the HEAD of your HTML file.
<link rel=”stylesheet” type=”text/css” media=”screen” href=”your_css_file.css”>
A little segue here, in term of linking files that are in the same directory on your webserver (directory=folder). When the file you are linking to is in the same folder as the file you are linking from you simple put the name of the file in the href=”name_of_file.html”. Now, it can be any type of file, so don’t be confused by my use of ‘.html’ as an example. When the file is in a folder that is in the same folder as your current file you will put the name of the folder / the name of the file: href=”some_folder/my_file.html”. When it is a folder behind (meaning up one level from the linking file) your linking file, then you will add a ‘../’ to your href: href=”../my_file.html”
Now, CSS. CSS has a very different syntax than html. It looks like this
name or tag {
style
}
First, you identify the part of the HTML page you want to style. There are two ways to do this, with a ‘class’ or an ‘id’. To give an HTML tag a class or id you put it in the opening tag: <div class=”awesome_class” id=”awesome_id”>content</div>. In the css file you identify a class or an id with a ‘.’ or a ‘#’ respectively.
So, to theme a div with a class of “awesomeness” your css would look like
.awesomeness {
my css styles
}
if you want to theme every single div tag in you page it would look like
div {
style
}
If you want to theme the entire body section
body {
style
}
Now, it gets more advanced. Lets say you wanted to style items with a class of “poop” but only those inside the div tag with an id of “toilet”
#toilet .poop {
style
}
In CSS more specific styles override less specific styles, so if you had already styled “poop” outside of #toilet with
.poop {
style
}
than the ‘#toilet .poop’ would override the simple ‘.poop’
One last note: while I’m only using divs as examples here, you can use almost any HTML tag in css. for instance the hyperlink tag ‘<a href=”link”>content</a>’ can be given an id and a class. ‘<a id=”link” class=”class” href=”link”>content</a>’
-
stevenbeelen liked this
-
zaksoup posted this
