CSS For Beginners - Part 2

03-28-2006, 07:46 PM

Alrighty, look at your code with the CSS on top. Cluttered as hell right? want to get rid of that clutterness. lets use an External Style Sheet

1. Open a New Notepad file.

Now, this type of css is different the the type you add to the top of the HTML.

Is has This Structure:

The Santax is made up of Three parts:

Code:

selector {property: value}

Breakdown:

The Selector is Normally The HTML Element (Ie: <body>, <table>, <td>, ect.)

The Property can take a Value (Ie: color, text-align, ect.)

The Value obviously is the Value of the property, Normally a color or an Image.

Note1: If the Value is Multiple words, Put Quotes Around them.

Code:

p {font-family: "sans serif"}

Note2:
remember the Curly Brackets after the Selector Every time!
---------------------------------
Note3:Cascading Order
What style will be used when there is more than one style specified for an HTML element?

Well, its in this order:

Browser default
External style sheet
Internal style sheet (inside the <head> tag)
Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

-----------------------------------

okay, Now that we have that figured out, lets start coding.

2. Inside the notepad document add this:

Code:

body { font-size: Xpt; font-family: X; background-color:#X}

Change all the X's, to a correct value. And remember, Note 1: if the value has two words, put quotes around them!

as you can see, you sperate each attribute with a semi-colon. this code speaks for itself, But Ill still break it down.

Code:

font-size:

is the fontsize for font Outside of tables. its in Point not Pixel, Remember that. Normally I have it at 7pt. Its small, but looks good.

Code:

font-family:

obvious, its the font family, Tahoma is regulary used, and you can add multiple ones so just in case someone doesnt have it, it will display in your next favorite.

Code:

background-color:

The page background color.

3. Save the document style.css.
Make sure to add .css on the end just like naming a HTML file!

okay, Open your Index.html, Or main page. and inside your header tags. Add this:

Code:

<link rel="stylesheet" type="text/css" href="style.css">

Now, when you Open your index.html/mainpage inside a browser. You should have the Background color that you added to the CSS doument. Thats your Tutorial. Im going to add somemore things you can add to your document. below. :) Have fun with your CSS and dont hesitate to ask Questions I sometimes cannot be that clear with my instructions. :)

----------------------------------

Here are somemore things you can add into your Stylesheets. Ill explain inside the Code so you can understand, but this is a tutorial. you're supposed to be learning right? Im not gunna give you a code to Copy Paste all the time. ;)

Here you are!!!!
Inside the Body tags:

Code:

body {margin: Value}// the Hole page margin 
body{margin-side:value}// change side to left/right/bottom/top, which ever.

Lets say you have Tables on you're page, and you want all your <td>'s to have a border well..
[code]
td { font-size: Xpt; font-family: X; border: Xpx solid #X }//Enables you to have the same sizes as your body inside the tables, and makes them have a border.

The Solid inside the border tag, can be changed. This makes it so it has a solid border, if you change it to dashed, it will have a dashed border. your gunna have to play around with it.

Now, your links!! I would suggest reading my other CSS tutorial it explains these perfectally. Change the X's as you see fit.

Code:

A:link {COLOR: X; TEXT-DECORATION: X}
A:visited {COLOR: #X; TEXT-DECORATION: X}
A:active {COLOR: #X; TEXT-DECORATION: X}
A:hover {COLOR: #X; TEXT-DECORATION: X}

The Text Decoration can be changed to None, thats what most people do. also Underline, is a good one. but I would suggest putting that only on the Hover. so when you hover over the link, it underlines it. but again play with it see what you like.

Want a Demo? Click Here

03-28-2006, 07:46 PM	#1 (permalink)
Loathor_Healer Guest Posts: n/a	CSS For Beginners - Part 2 Alrighty, look at your code with the CSS on top. Cluttered as hell right? want to get rid of that clutterness. lets use an External Style Sheet 1. Open a New Notepad file. Now, this type of css is different the the type you add to the top of the HTML. Is has This Structure: The Santax is made up of Three parts: Code: selector {property: value} Breakdown: The Selector is Normally The HTML Element (Ie: <body>, <table>, <td>, ect.) The Property can take a Value (Ie: color, text-align, ect.) The Value obviously is the Value of the property, Normally a color or an Image. Note1: If the Value is Multiple words, Put Quotes Around them. Code: p {font-family: "sans serif"} Note2: remember the Curly Brackets after the Selector Every time! --------------------------------- Note3:Cascading Order What style will be used when there is more than one style specified for an HTML element? Well, its in this order: Browser default External style sheet Internal style sheet (inside the <head> tag) Inline style (inside an HTML element) So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value). ----------------------------------- okay, Now that we have that figured out, lets start coding. 2. Inside the notepad document add this: Code: body { font-size: Xpt; font-family: X; background-color:#X} Change all the X's, to a correct value. And remember, Note 1: if the value has two words, put quotes around them! as you can see, you sperate each attribute with a semi-colon. this code speaks for itself, But Ill still break it down. Code: font-size: is the fontsize for font Outside of tables. its in Point not Pixel, Remember that. Normally I have it at 7pt. Its small, but looks good. Code: font-family: obvious, its the font family, Tahoma is regulary used, and you can add multiple ones so just in case someone doesnt have it, it will display in your next favorite. Code: background-color: The page background color. 3. Save the document style.css. Make sure to add .css on the end just like naming a HTML file! okay, Open your Index.html, Or main page. and inside your header tags. Add this: Code: <link rel="stylesheet" type="text/css" href="style.css"> Now, when you Open your index.html/mainpage inside a browser. You should have the Background color that you added to the CSS doument. Thats your Tutorial. Im going to add somemore things you can add to your document. below. :) Have fun with your CSS and dont hesitate to ask Questions I sometimes cannot be that clear with my instructions. :) ---------------------------------- Here are somemore things you can add into your Stylesheets. Ill explain inside the Code so you can understand, but this is a tutorial. you're supposed to be learning right? Im not gunna give you a code to Copy Paste all the time. ;) Here you are!!!! Inside the Body tags: Code: body {margin: Value}// the Hole page margin body{margin-side:value}// change side to left/right/bottom/top, which ever. Lets say you have Tables on you're page, and you want all your <td>'s to have a border well.. [code] td { font-size: Xpt; font-family: X; border: Xpx solid #X }//Enables you to have the same sizes as your body inside the tables, and makes them have a border. The Solid inside the border tag, can be changed. This makes it so it has a solid border, if you change it to dashed, it will have a dashed border. your gunna have to play around with it. Now, your links!! I would suggest reading my other CSS tutorial it explains these perfectally. Change the X's as you see fit. Code: A:link {COLOR: X; TEXT-DECORATION: X} A:visited {COLOR: #X; TEXT-DECORATION: X} A:active {COLOR: #X; TEXT-DECORATION: X} A:hover {COLOR: #X; TEXT-DECORATION: X} The Text Decoration can be changed to None, thats what most people do. also Underline, is a good one. but I would suggest putting that only on the Hover. so when you hover over the link, it underlines it. but again play with it see what you like. Want a Demo? Click Here

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)