View Full Version: Css

Jadie's Nexus > My Very Own Website > Css


Title: Css
Description: a huh?


anne3rose - January 13, 2004 05:12 PM (GMT)
QUOTE
Hope you don't mind that I nicked your code. Think it will look great. Thanks 


Aiiieeeeeeee!!!!! I've created a monster!

It'll be ok, Laura. Just lie down for a bit until the impulse passes. :doh08:

dianaforester - January 9, 2004 06:32 AM (GMT)
So how does one aquire/use this thing called a CSS?

thanks,

df

anne3rose - January 10, 2004 08:51 AM (GMT)
You either borrow a css file or you make one.

You link a Cascading Style Sheet file the same way you would a graphic (tag is different, but same idea). Then the browser read the css and applies those styles to the tags you use.


My one of my stylesheets is rose_garden.css. In the <head> section I have:
<link rel=stylesheet href="rose_garden.css" type="text/css">


It's very very very similar to using templates and styles in Word. (That will either make sense or it won't, so I'll leave it there.)

For example, on my Voyager pages <h1> is Final Frontier instead of Arial or whatever the default is. I define it one time in the CSS and then I *NEVER* have to fiddle with <h1> again. I just use <h1> and it will be the font, color, etc... that I defined. No <h1><font face="Final Frontier" size="47pt" color="blue">Anne's Rose Garden</font></h1> just a plain <h1>. (<h1> is Heading 1, very similar to Heading 1 in Word.)

If I took leave of my senses and wanted <h1> to be 72pt, Gothic Frankenstein, blinking lime green on a hot pink background I could do that by saying in my .css file:

h1
{
color: #33ff00;
background: #ff3399;
font-family: Gothic Frankenstein, serif;
font-size: 72pt;
text-decoration: blink;
font-weight : bold;
}

Hopefully one of my friends would intervene at this point and save me from embarassing myself like that. :sing-shower:

However, that makes a dramatic point.

Oh, I just made another point without meaning too. <blink> has not only been deprecated, it's been killed outright by some browsers. See here for a chuckle. http://www.htmlcodetutorial.com/_BLINK.html (Ok, you may only chuckle if you're a geek, but this is a great tutorial and worth a look anyway.)

- Anne Rose

Laura - January 13, 2004 12:13 PM (GMT)
Another great thing about css is that you can define different style for on-screen and for printing. Since serif fonts are easier to read on paper, and sans serif easier to read on screen - with only a few lines of code you can have a serif font for printing, but a sans serif font on screen.

You could also change the font colors etc so that it prints nicely. So even if you have a light text on a dark background, you get dark text on a light background for printing.

But the main advantage is that you just specify something once, so you only need to change it in one place instead of changing every occurence in every file. It also makes your main code easier to read.

<p class="highlight">Updated January 13th - New story and a wallpaper!</p>

Is a lot easier to read than:

<p align="center"><font size="17px" face="Bradley Hand ITC" color="#CCFFFF"><b>Updated January 13th - New story and a wallpaper!</b></font></p>

Especially when you have an entire page of code to read through.


QUOTE
If I took leave of my senses and wanted <h1> to be 72pt, Gothic Frankenstein, blinking lime green on a hot pink background I could do that by saying in my .css file:

h1
{
color: #33ff00;
background: #ff3399;
font-family: Gothic Frankenstein, serif;
font-size: 72pt;
text-decoration: blink;
font-weight : bold;
}


Hope you don't mind that I nicked your code. Think it will look great. Thanks ;)

Laura - January 13, 2004 05:59 PM (GMT)
QUOTE
Aiiieeeeeeee!!!!! I've created a monster!

It'll be ok, Laura. Just lie down for a bit until the impulse passes.


But it looks so pretty!

And the turquoise underline I added really gives that special something. ;)




Hosted for free by InvisionFree