Tutorials Navigation
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,698
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
Comments
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
- 01. Emulating Xbox 360 on PC for Running COD4 With Mods(2,116)
- 02. How to: Matrix Numbers | Batch File(1,589)
- 03. How to Password Protect Files on Windows(765)
- 04. How to play Socom 2/3/ and Combined Assault on PC(5,178)
- 05. Modern Warfare 2 Vac Ban Bypass Tutorial(5,044)
- 06. How to embed an image on TheTechGame(2,779)
- 07. [PC] NIOH 2 OTHER USER SAVE RESIGN(12,338)
- 08. Host bot lobbies! Full Tutorial!(9,576)
- 09. Unban yourself [Plutonium BO2](13,467)
- 10. Fall Guys - How to Change Your Name Color on Fall Guys(8,025)
- 11. Best Crosshair Settings for Valorant(6,168)
- 12. Othercide The Surgeon Boss Guide(2,228)
- 13. Othercide Remembrances Unlock Guide(3,928)
- 14. Othercide Beginners Tips and Tricks(2,465)
- 15. How to Fix Grounded Crashes, Loading Time, Low FPS and Other(4,364)
"Basic CSS - To go with basic HTML" :: Login/Create an Account :: 4 comments