I think it’s time to have a little lesson about using a css instead of adding all your style to your html.
Remember, this is just a very small BASIC tutorial to get you started and hopefully you will understand how to use it and add more “advanced” stuff into it.
This is more aimed at those who write their styles inside their html, so im guessing you already know a bit?
The CSS Part
First we need to create a css file, so lets create one and call it style.css, it has to end with .css
After this is done we have to tell your .html or .php (I prefere to use .php) file were your .css file is, we do this by adding a line in your <head>, it looks something like this:
HTML Code:
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
Now you might need to change the path if you have your .css in a folder, something like this maybe:
HTML Code:
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
Globals
OK! Now we are good to go! Lets add some shit to it.
Now first we want to think about all the global things we want to add, this is stuff that will always be unless we say otherwise.
So we start by adding:
HTML Code:
*{
}
body {
}
p {
}
img {
}
h1, h2, h3, h4 {
}
a {
}
a:hover {
}
You can of course add more or less stuff in here, there are even reset css files that has like everything you can think of, I find that unnecessary.
Let’s give these some values because right now they are worthless.
HTML Code:
*{
border:0;
padding:0;
margin:0;
}
body {
background-color:#fff; /* Background color for the whole page */
font-size:12px; /* Font size */
font-family:arial, sans-serif; /* Type of font you want to use */
color:#000; /* Color of your text */
}
p {
line-height:150%; /* Line height for your paragraphs */
padding:10px; /* Padding for your paragraphs */
}
img {
float:left; /* every img tag will float to the left */
}
h1, h2, h3, h4 {
font-size:20px; /*Gives your H-tags a font size, you may separate these and give them a different size, maybe also another font etc */
}
a {
color:# 1111CC; /* color of your links */
text-decoration:none;
}
a:hover {
color:# 1111CC; /* color of your hovered links */
text-decoration:underline; /* will give a underline when they are hovered */
}
This will now apply to everything unless of course you say otherwise.
Don’t take this to seriously, you might not want something like this but this is your globals, now just add your own stuff into it.
Classes And ID’s
Now when our global values are done we can continue with classes and ID’s
I prefer to build my sites with float’s and also use px, you can of course use % but here we will go for px.
So what is a ID?
An ID is something “unique” It may only exist once on your page, so something that could use ID is header, top menu, sidebar etc
You write a ID in your css by adding a # in front of the ID name, something like this:
A class can be used as many times as you wish.
You write a Class in your .css by adding a . (dott) in front of the class name, something like this:
ID
So let’s say you want to make a frame that always will be centered no madder what, you would do something like this, and here I will use an ID since we only gonna use this once per page:
HTML Code:
#frame {
width:950px; /* This will be your width */
margin:0 auto; /* this is what makes it stay centered */
}
Now our site will be 950px in width, remember this.
Let’s also add a sidebar and a content container (the content-container is not necessary but we can use it as a “global” for our content)
HTML Code:
#sidebar {
float:left;
width:250px;
}
#content-container {
float:left; /* we could give this one a float:right and just remove the margin but let’s just keep it left */
width:680px; /* we can’t give this one 700px because we have 20px of margin, there for it’s 680px */
margin:0 0 0 20px; /* this will push the content-container 20 px to the right */
}
*See the HTML part if you want to see how to add it into your .html/.php file.
Class
Now let’s add a class to our .css
Let’s say you want to use 2 columns for your content plus of course you sidebar.
We now have 680px to play with, 950px – 250px = 700px – 20px (margin) = 680px.
We can do it like this if we want to have them the same width:
HTML Code:
.box {
float:left;
width:340px;
}
Since we are using floats to build our page they will be next to each other (unless we have given them to much width, remember, everything have to fit the “parent container” otherwise the second box would be under the first box)
The HTML
Im not going to talk about the <head> <title> etc, im guessing you already know this so let’s add our stuff inside the <body>
First we had our frame that will center our “design”
We call the values that are inside the ID frame like this:
HTML Code:
<div id=”frame”>
And end it with a
</div>
Depending on what you are going for it might not end at the end of the body but in this case it will be the last thing we see before the end body </body>
SO!! Now we have a box that is 950px wide centered.
Now let’s add the sidebar by adding:
HTML Code:
<div id=”sidebar”>
</div> <!—end sidebar -->
Then under that we want to add the content-container
<div id=”content-container”>
Let’s now add our 2 boxes inside this content-container
<div class=”box”>
</div>
<div class=”box”>
</div>
</div> > <!— end content-container -->
Let’s add everything in one go
HTML Code:
<div id=”frame”>
<div id=”sidebar”>
</div> <!—end sidebar -->
<div id=”content-container”>
<div class=”box”>
</div>
<div class=”box”>
</div>
</div> > <!— end content-container -->
</div> <!— end frame -->
I saw a thread that someone wanted to know separate things and ended up with using <br />.
I say you should stay away from shit like that, and do not use shit like <p> </p>
Remember we added padding to our <p> in the globals, there will now be a 10px gap when you end you p’s, 20px gap if you end it and start a new <p> since we added 10px to all sides.
HTML Code:
<p>content</p>
Gap here automatic instead of adding <br /> etc
<p>content</p>
I also said in the beginning that the global we be unless we say otherwise what I meant was that let’s say we add an image inside our box div and we want the img to be right instead of left we can do this by adding this in the css:
HTML Code:
.box img {
float:right;
}
Now this will always apply when you add a img tag, we can also make a class that we can call whenever we feel like it:
.img-right {
float:right;
}
And we call it like this:
<img src="images/image.jpg" alt="something " class="img-right" />
Now this was just something short, hopefully someone have learnt something, like I said, this was not suppose to be a 100% how to make a website.
LinkBack URL
About LinkBacks
CSS For Amateurs
Reply With Quote
Bookmarks