Good explained, thanks
|
Purpose: to make a VERY SIMPLE CSS file.
What are CSS files?
CSS stands for Cascading Style Sheets
Requirments:
- I recommend that you know a little/lot of HTML(depending on what you want the CSS to do).
- You will need a site to upload it to, you can use http://www.zymic.com (its pretty good, in my opinion) or you can talk to me and i can give you a sub domain from my site, http://www.dudescapeinc.info.
- You will need a Plain Text Editor(notepad, textedit, Notepad++,exc.)
- You need to know how to save files as .css files
Step 1.
Hmmmmm... What to make the stylesheet do... Lets make it align all headings to Left, Right, or Center, Make the background a certain color, and how about changing the font of Headings?
Step 2.
Lets open up our Plain Text editor (i prefer Notepad++ because its simple,easy to use, and has Tabs) and give the file a name, in this tut i will be calling it stylesheet1.
Step 3.
Lets start off with the headings stuff? Start off by entering
remove what you don't want out it (this makes all <h1>,<h2>,<h3>,<h4>,<h5>,<h6> codes do the next couple of things that we will add)Code:h1,h2,h3,h4,h5,h6
Step 4.
Now lets keep the css file organized so we can see what were doing untill were done? Press ENTER and add a simple curly bracketand then press enter agein.Code:{
Step 5.
Now lets align the headings into a area of the page (left, center, right)
In the 3rd line, add in
and just change theCode:text-align: center;to what you want it to be(left center or right)Code:center;
Step 6.
Now that we got that done, we can finish it there or go on to change more . If we want to finish it there and make it just this simple, add ato the end of it. But im going to go on to change back ground colors, Heading Colors, and Heading Font. To change the color of the heading, press enter afterCode:}and add inCode:center;you can use lots of different colors, including ALL hex numbers.Code:color: green;
Step 7.
Now lets change the font of the Headings, again press ENTER and get ready to add in more. Lets make the font Sans Serif shall we? Now on line 5 add inyou can change sans serif to any font you can think of. Now Lets just finish up this Headings Part of the CSS and add in aCode:font-family: sans serifon line 6 and Lets go on to the next part!Code:}
Step 8.
For the background lets add inon line 7 and hit ENTER once again. Now on line 8 lets addd inCode:bodyand hit ENTER agein...Code:{
Step 9.
Lets only add in the background color for this page, i will be using PERU for this example, its a shade of brown if you did not know. for adding in the background color, we use this codechange the color to any other color or hex number for the color you would like. Now to finish off this simple CSS file, lets add in the last part of it on line 10Code:background-color: peru;and then save the file.Code:}
Step 10.
Upload to a site and add this into a HTML file to see what you did:
[HTML]<html>
<head>
<body>
<title>Style Sheet Test</title>
<link href="http://LINKNAMEHERE.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<h1>Hello</h1>
<h2>Hello2</h2>
<h3>Hello3</h3>
<h4>Hello4</h4>
<h5>Hello5</h5>
<h6>Hello6</h6>
</body>
</html>[/HTML]
I hope this guide helped!
Good explained, thanks
Nice Tutorial could be very helpful to noobs. If someone is going to be using/coding CSS then i suggest downloading Dreamweaver because it makes CSS much easier you don't have to memorize virtually anything.
Fix the demo, sir.
sorry not fixing, old site i had, and i dont feal like recreating the html doc i had
Can you remove the link, then?
« Previous Thread | Next Thread » |
Thread Information |
Users Browsing this ThreadThere are currently 1 users browsing this thread. (0 members and 1 guests) |