Tutorials Navigation

Tutorials :: New :: Popular :: Top Rated

Show Search Options

Search in categories

(Hold the CTRL/CMD key to select multiple categories)

Tutorials: 18,326 Categories: 12

Total Tutorial Views: 41,399,795

Basic CSS - To go with basic HTML

Tutorial Name: Basic CSS - To go with basic HTML  

Category: PC Tutorials

Submitted By: MattMiller

Date Added:

Comments: 4

Views: 1,697

Related Forum: PC Building Forum

Share:

So I see "Puddle_Of_Mudd" has done everyone a favor and done some basic HTML with you all, now I want to teach you to style that with cascading style sheets (CSS).

First off a good free compact text editor for coding:
Notpad ++: [ Register or Signin to view external links. ]

Download it you will find this coding stuff a lot easier.

First off we will explain how it works, it is very simple and changes around you almost. So you have your html document with a little what ever:
 
<html>
<head>
 
<title> Hello Pandora </title> 
 
</head>
<body>
 
<h1> Main title </h1>   
<p> some body text ect... </p>
</body>
</html>


So we have this here very simple, lets style it a little. You should create a folder and put your html document inside this. Then create a folder called css then in that create a document 'style.css' this is how you will style everything.

Right so we are going to place this in the header area of your HTML document:
<link rel="stylesheet" href="css/style.css" />

And what this will do is simple it will link the css with the html and keep everything clean and separate.

So lets talk about some css now, it will all be done in your style.css file.

To link from html to css:
HTML: <head id="head"> </head>
CSS: #head{
style in here.
}

This one will change anything in html with the id 'head'.

HTML: <head class="head"></head>
CSS: .head{
style in here.
}

This one will change anything in html with the class 'head'.

HTML: <head> </head>
CSS: head{
style here.
}

This will change ever tag for head.

Head was just an example this applies to all thing and the CSS does not need to be named after the tag unless it is the last example.

So back to my example, we are going to style now!
HTML:
  <html>
<head>
<link rel="stylesheet" href="css/style.css" />
<title> Hello Pandora </title> 
 
</head>
<body>
 
<h1 id="navtext"> Main title </h1>   
<p class="p"> some body text ect... </p>
</body>
</html>


CSS:
body{
background-color: #274c6f;
}
 
#navtext{
font-family: Verdana, Helvetica, sans-serif;
font-size: 18px;
color: #c95f00;
text-align: center;
}
 
.p{
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #c95f00;
text-align: center;
}


Class, id and the tag name have been used as example only they don't need to be done like this when coding.

Right so now we should have something that looks like this, if you have followed my colo(u)rs:
[ Register or Signin to view external links. ]

So now I will teach you how to style a link then I will leave you with some place to learn further CSS and allow you to play with it, remember this is just an introduction!

So a link!
HTML (Add this into you document that you already have inside <body> </body>):
 
<a href="http://www.mattmillergraphics.com" class="a"> Click here! </a> <br/>
<a href="http://www.mattmillergraphics.com/about.html" class="a"> About! </a><br/>
<a href="index.html" id="active" class="a"> You are here! </a>


CSS (also adding to existing document):
 
.a{
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
display: block; 
text-align: center;
}
 
a:link {
text-decoration:none;
color: #ffffff;
}
 
a:visited {
text-decoration:none;
color: #ff0000;
}
 
a:hover {
text-decoration:none;
color: #2aff00;
}
 
a:active {
text-decoration:none;
color: #ffffff;
}
 
#active{
text-decoration:none;
color: #ffffff;
}
 


So what this will do for you is when you are on a link it will be white, when you are on a hovering on a link or have visited it before it will be green and the link will be red if nothing is currently happening with it. '.a' is just for style and centering. I know I didn't tell you what ever CSS attribute means as I feel they are all very self explanatory.

You can see what you should have here:
[ Register or Signin to view external links. ]

So now some resources so you can go widen your horizons!

'30 day' HTML & CSS course (I done it in a weekend): [ Register or Signin to view external links. ]

w3schools CSS: [ Register or Signin to view external links. ]

If you want to see some of my coding open the coding using 'f12' is 'Google Chrome' or 'right click' > 'inspect element' over at mattmillergraphics(dot)com

Good luck to all, web development is fun.
Matt.

Ratings

Current rating: 7.33 by 3 users
Please take one second and rate this tutorial...

Not a Chance
1
2
3
4
5
6
7
8
9
10
 Absolutely

Comments

"Basic CSS - To go with basic HTML" :: Login/Create an Account :: 4 comments

If you would like to post a comment please signin to your account or register for an account.

IntPosted:

I already know css and html but good job anyway

SwiftPosted:

This would have been nice to have when I took computer science class.

CraigPosted:

Very very nice tut, I will refer back to this at a later date.

AxePosted:

Very well made tutorial man. You should've added some Mac program suggestions as well, but im sure its not hard to find them.


Related Tutorials