Staredit Network

Staredit Network -> Computers and Technical -> A Beginner's CSS Tutorial
Report, edit, etc...Posted by Slyence on 2005-09-17 at 06:45:51
Style Sheets? Cascading? CSS? Er, wtf....!?
Well, if you're using Internet Explorer 3.0, or Netscape 4.0, don't bother reading this; they're not compatidable with CSS (and if you're using either of those, well get the censored.gif off the internet - you don't deserve to be on).
First off, I'll start off with what CSS is. CSS is a nifty little thing that can define the way an entire page looks, every HTML tag. From <FONT> to links, to all of the header tags (<H4>, <H3> ect. ect.). But if you want to have multiple styles for the same tag, you can use Classes. Classes are very easy to use and understand, and I chose these over applying a style sheet to a single tag.

Why Should I use CSS?
Easy. Using CSS can save you a LOT of time, both in the overall creation of your website, and save you a lot of typing. I mean a lot. How can it save you time, you ask? Well, let's have a small example. You want any text that is bold (which would be done with the <B></B> tag, as I hope you know), to be a font size of 1, red, and be in the font of Times New Roman. Now, what you'll naturally do, in all the juicy goodness that is HTML, is go to every piece of text you want to be bold, and type the following:
CODE
<font size="1" color="red" face="Times New Roman"><b>Slyence owns evreyone so much.</b></font>

Now, it doesn't seem like a whole lot of typing, now does it? But picture doing that 10, 15 times throughout the course of creating 1 page for your site. Now it's a lot of typing. Now it's going to add unecesarry time in creating your page overall, even if it IS only 3-5 minutes. But think with what you can do with those 5 minutes, you could buying drugs, husseling a hooker, hell, you could even kill someone, but no. You were busy HTML'izing your blamty page, and for no good reason.

Now, instead of typing all of that so many times, and wasting those 5 minutes, you could simply put this at the top of your page, within the <HEAD> tags:
CODE
<STYLE TYPE="text/css">
<!--
b {font-size: 1; font-color: red; font-face: Times New Roman;}
-->
</STYLE>

What this does, is it tells the browser to find any HTML <B> tags, and apply the following attributes to them. Yeah, that's right. It IS cool. And think, how many HTML tags are there? A lot. How many styles can you come up with? Well, since some people are a little lower on the intelligence scale than others, we'll say a decent amount. Now, for every HTML tag there is, you can apply a style to it, just like that.

What if I want to use more than one style for the same tag?
Classes, my friend. I prefer using classes, because they don't(necesarrily) affect normal HTML tags. A class is a specific style that is assigned a name, and whenever that name is called upon in the HTML, and appropriate style is displayed. I'll create a small example HTML page (with CSS, you moron...) display how classes work.
CODE
<html>
<head>
<title>I'm so much better than you!</title>
<style tyle="text/css">
.headertext {font-size:3; font-weight:4; font-face:Arial; font-color:blue; background:blue; text-align:center;
}
.normaltext {font-size:1; font-weight:1; font-face:Verdana;}
</style>
</head>
<body>
<font class="headertext">THSI IS MAI PAYGE!</font>
<p>
<font class="normaltext">Thsi is mai payj's texst. Du yoo lyke it? Me does.</font>
</body>
</html>

All normal HTML, except for the following:
CODE
<style tyle="text/css">
.headertext {font-size:3; font-weight:4; font-face:Arial; font-color:blue; background:blue; text-align:center;
}
.normaltext {font-size:1; font-weight:1; font-face:Verdana;}
</style>

Now, if looked through the CSS and the HTML, you would have (hopefully) noticed that I used a new <FONT> command, class. And each class I used was defined up in the CSS, just with a dot in front of it. You need to put a dot, "." before defining a class, so the CSS isn't looking for the HTML tag <HEADERTEXT>, instead, it's looking for any HTML tag that has "CLASS='HEADERTEXT'" in it.
Report, edit, etc...Posted by Staredit.Net Essence on 2005-09-17 at 12:09:16
Nobody is gonna learn anything from this bullblam.

And its not php.
Report, edit, etc...Posted by DT_Battlekruser on 2005-09-18 at 02:50:34
Please repost in topic. http://www.staredit.net/index.php?showtopic=20910
Next Page (1)