Jump to content
xisto Community
iGuest

Css What it is how to use it

Recommended Posts

What is CSS?
CSS stands for Cascading Style Sheets. It is a language used to apply style to webpages (Without using font tags, bgcolor, etc.) CSS saves time by letting you apply style to elements of a certain type, or with a certain class/ID instead of having to add it manually to each of them. Most webpages use CSS, as it can create nice-looking websites, without a huge amount of excess HTML.

Where do I put it?
If you want to just apply some style to a certain element on the page, you can use the style HTML parameter, e.g.
<span style="CSS Here">Hello, world!</span>
If you want some CSS code to set mproperties for certain elements (e.g. set the link colour, font, etc.), there are two methods.
Method 1:
Use the HTML style tag. this can be placed anywhere in the document, but usually in the head tags.
<style>
CSS Here
</style>
Method 2:
You can also place your css code in an external document (With the file extension .css). You can then use a link tag in the head section of your document to link the css file to the page, e.g.
<link rel="Stylesheet" href="style.css">
Note: The underlined part tells the page that this is a Stylesheet, and the italic part is the filename of the css file.

What does it look like?
CSS is generally structured like this:

element { property: value; property: value; }
element { property: value; property: value; }

Although, depending on what you prefer, you can also structure it like this:

element {
property: value;
property: value;
}

When you're using the style paramater of an element (see above), you can simply put this:
style="property: value; property: value;"

An example
Ok, now we're going to show you how to do something with it.
Make a new HTML document, with the following code:



<html><head><title>CSS Example</title><style></style></head><body><h1>Hello world!</h1><br><span>This is a span</span><br><span>This is another span</span></body></html>

Now open it up in a browser, it should look plain and boring, a bit like this:
Hello world!
This is a span
This is another span

Now we're going to use CSS to make it look a bit nicer.
Place this CSS inside the style tag in the document



h1 { font-family: Verdana; color: #0000FF; }

Now look at the page. It should look a bit like this:
Hello world!
This is a span
This is another span

The font and colour of the h1 tag has changed. Let's look at the CSS code we put in.
h1 { font-family: Verdana; color: #0000FF; }
h1 - This tells the page to apply this style to all h1 elements
font-family: Verdana; This sets the font family to Verdana;
color: #0000FF; - This sets the colour of the text to the hex code #0000FF (Blue)
But the rest still looks relatively plain, doesn't it?
Add the following lines to the style:



.firstspan { font-family: Verdana; color: #FF0000; }#secondspan { font-family: Verdana; color: #00FF00; }

Now, change these two lines of HTML:


<span>This is a span</span><br><span>This is another span</span>

To this:


<span class="firstspan">This is a span</span><br><span id="secondspan">This is another span</span>

Load the page in the browser, now it should look something like this:
Hello world!
This is a span
This is another span
The CSS we put in is similar to the first line, but lets have a look at what the difference is
.firstspan { font-family: Verdana; color: #FF0000; }
#secondspan { font-family: Verdana; color: #00FF00; }
Look at the start of the lines, you'l notice that firstspan is preceeded by a ., and secondspan by a #.
The . means to apply the style to all elements with the following class (firstspan), and the # means to apply it to all elements with the following id (secondspan)

What else can I do with it?
CSS is a pretty easy language, once you know the basics.
You can download a .pdf file here that'll tell you all the different properties, values etc. to help you customize your web page even further, which is useful for both experianced CSS writers and newbies.



Share this post


Link to post
Share on other sites

Good tutorial, and I'm sure it will help newbies, but to be honest, I've never used the <span> tag. It would be better if you rewrote it using DIV's instead of SPAN's.

Share this post


Link to post
Share on other sites

got startup tutorial.However I would like to emphesasize the real benefits of css.1. If you have a lot of repititive formating then CSS will save time coding the page 2. Due to removed redundancy of repetitive styling code the transfers of pages over http will be faster since lesser data has to travel .2. it becomes easy to maintain the style of the page by using CSS.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.