CSS tutorial #1

Reputation
0
CSS is alot more complex than HTML, and works alongside it. Please lookup a little HTML for more information. This first tutorial will teach you the basics of changing an entire documents colours, and then different parts of the document.


First you need to make two documents:
index.html
style.css

After creating those documents type this into your index.html (This isn't a html tutorial so I won't cover what it does):
Code:
<html>
<head>
<title>Webpage Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>

Make sure both these documents are in the same folder, as you can see in the head section there is a link. This link makes the webpage use the CSS document for whatever is relevent.

Now in the css document write this:
Code:
@charset "utf-8";
body {	
background: #ffffff;	
}


This will turn the background colour to #ffffff. This piece of code can be applied to any section of the webpage with this code:
Code:
<div class="NAME"></div>
Add that code to any part of your HTML webpage, and in your css document type this in:

Code:
.NAME {	
background: #000000;	
width: 100px;	
height: 100px;	
}
This piece of code makes a piece of the document, 100px X 100px, the colour "000000" (Which I think is white, I forget colour codes).

If you have any questions or want more of these tutorials, just ask!
 
CSS is alot more complex than HTML, and works alongside it. Please lookup a little HTML for more information. This first tutorial will teach you the basics of changing an entire documents colours, and then different parts of the document.


First you need to make two documents:
index.html
style.css

After creating those documents type this into your index.html (This isn't a html tutorial so I won't cover what it does):
Code:
<html>
<head>
<title>Webpage Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>

Make sure both these documents are in the same folder, as you can see in the head section there is a link. This link makes the webpage use the CSS document for whatever is relevent.

Now in the css document write this:
Code:
@charset "utf-8";
body {	
background: #ffffff;	
}


This will turn the background colour to #ffffff. This piece of code can be applied to any section of the webpage with this code:
Code:
<div class="NAME"></div>
Add that code to any part of your HTML webpage, and in your css document type this in:

Code:
.NAME {	
background: #000000;	
width: 100px;	
height: 100px;	
}
This piece of code makes a piece of the document, 100px X 100px, the colour "000000" (Which I think is white, I forget colour codes).

If you have any questions or want more of these tutorials, just ask!
 
its a very nice thread. I already know css and css is really important for the web designers. Css gives the best look to your website so i guess all good web masters know css very well and its really easy where you can simply do everything by a single file. Css styling gives website a great look. thanks for sharing a very nice tutorial.
 
its a very nice thread. I already know css and css is really important for the web designers. Css gives the best look to your website so i guess all good web masters know css very well and its really easy where you can simply do everything by a single file. Css styling gives website a great look. thanks for sharing a very nice tutorial.
 
Its was on a VERY basic level, but its good that you share with the forum :D
 
can you share us how to edit the image or background image size on css? I want to learn that technique so i can adjust the background of my blogs.
 
Back
Top