You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Quick Lesson On CSS on Tue Jun 28, 2011 4:58 pm

Sizzy

avatar
Fresh Meat
Loading
*Note*
Before trying this Tutorial if you have no idea at all of what html is then you should go to this tutorial First.
*****

Cascading Syle Sheets, also known as CSS is a simple coding langue used to style websites. Instead of typing all the html up such as the [font][/font] tags in every little bit of text you type you can use css to do this only once. CSS can style fonts colours and even the layout of ur website. CSS saves ur little Fingers all the typing of html, it cuts down html usage by more then half.

So how do i use this CSS you ask ?
The Css Code is made of three parts


selector {property: value}

The Selector is normally the Html tag you wish to define.
The property is the thing you wish the change, all propertys have a value.

*Note*
If you wish to specify more than one properfy you must separate them with a semicolon (icon_wink.gif
To make the CSS more readable you may separate each poperty on different lines

*****

In Css you may also define styles for html id's.
example the following will define any html tag with the id "red"


#red {color: green}

Notice how you use the # to define a Id in css

*Note*
Do not start a id with a number
*****
Commenting in Css can be done by starting with a /* and ending with a */
Example

/* this is a comment */
p{
background-color: red;
/* this is a comment */
text-align: center;
}

There are 3 differnt ways to add a CSS to you Html page
Lets start with the best

External Style Sheet

This is another document all together, it is ideal when u want your whole website to take on one specific design

To Insert one:



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

*replace mystyle.css with the name of your css file

Internal Style Sheet

This is a style sheet within one html page, it is ideal if you want one page to have a specific style.

To insert one:


<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

All of the CSS must be within the <style> and </style> tags

*note*
Old browsers may not support style tags and may display the style as normal text to avoiud this put the style in a html comment

Inline Style sheets

Inline Style Sheets loose many of the advantage of CSS, so use this method least. This style is only good for things such as when style needs to be added to somthing that to one ouccurance of a html tag.

To add This style:(you must use it with a html tag)


<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

*Notes*
When you have multiply style sheets the more specific one will be used
Css document must be saved with a css extension
Css can be typed in any word thing except microsoft word
Macromedia dreamweaver is the best to start you off learning(it corrects ur mistakes)


Css Syntax
syntax :way that every command is set up

selector {property: value;}

selector: a part of a webpage you are going to format
property: what you are changing
value: how are you changing it.
after every value put a semicolon ( ; )

EX:

body {background: red;}

selector =body:whatever is on a page.
property=background: our background
value=red: the color we want to change

If helped +Rep?

2 Re: Quick Lesson On CSS on Sat Dec 17, 2011 8:18 pm

Nick

avatar
Member
Loading
Nice lesson!

View previous topic View next topic Back to top  Message [Page 1 of 1]

Related topics

Permissions in this forum:
You cannot reply to topics in this forum