Jump to content

Basic Css Tutorial


TCH-Sales

Recommended Posts

CSS stands for cascading style sheets and was originally designed as a helper or add-on so developers could do more things better and faster than using standard HTML. From style sheet built into your specific web page to having a separate style sheet file to control all of your pages CSS can be your best friend if you have multiple pages to control that all have the same basic look and style. Another good things about CSS is that by using it correctly your pages can be loaded quicker than using more traditional HTML methods.

 

>h1 {font-family: arial}

 

CSS can be broken up into three parts. To take the above code as an example, the “h1” is known as the selector. The selector’s purpose is to tell the browser which “tag” is being edited. The “font-family” is the property, which tells you which attribute of the selector do you wish to modify. Last but not least is "arial" which is the value. The value’s job is to tell you what to do to the specific selector you want to modify. In a whole, this tells us that the paragraphs are going to have a font face of arial. There are many different resources online that tell you all the correct selectors, properties, and values to use so I won’t go into that right now. The basic thing to remember is that you must keep that same basic format when creating your own CSS.

 

If you wanted to do more than one thing to each selector, then you would need to make sure you closed each job with an “;”. Here’s another example:

 

>h1 {font-weight: bold; color: red; font-family: arial;}

 

See the extra ;’s in there? It’s just that easy. Also if you wanted to break it all up to make it look more organized you could sort it like this as well:

 

>h1 {
    font-weight: bold;
   color: red;
   font-family: arial;
}

 

To edit more than one selector (on the above selection, the h1) then all you would need to do is separate each selector with a “,”. Here’s an example of this:

 

>h1,h2 {
    font-weight: bold;
}

 

For both the above examples, this is how the code would look when your calling for it on the actual web page that you are working on.

 

><h1>Hey, look ma! A header!  Simple enough right?</h1>

 

There is more than one type of selector you can edit. The selector is divided up into two types, the id selectors and the class selectors. These are sometimes miss-used and mixed up so lets see if I can set you straight from the beginning. Id selectors are only used once, while classes can be called on several times.

 

Here’s an example of how a class should look in your style sheet. Pay close attention to the “.” before the word “entry“. This is what mainly signifies that it is a class and not an id selector:

 

>.entry {
       margin-top:5px;
       padding:5px;
       text-align:left;
       }

 

This is how it would look on your page when you are actually trying to call for the style sheet code to be used:

 

><div class=“entry”>This would be the text that is modified!</div>

<div class=“entry”>This would be the OTHER text that is modified!</div>

<div class=“entry”>See, I can call for this to be used more than once!</div>

 

Here’s an example of how a id should look in your style sheet. Pay close attention to the “#” before the word “content“. This is what mainly signifies that it is a class and not a class selector:

 

>#content {
    align:center;
    border-left:2px solid #000; 
    border-right:2px solid #000; 
    border-bottom:2px solid #000; 
    width:600px;
}

 

This is how it would look on your page when you are actually trying to call for the style sheet code to be used:

 

><div id=“content”>This would be the text that is modified!  As you can see I only used this once because that‘s all single ids are supposed to be used per web page.</div>

 

As long as you learn to use each as it is intended, then you should be doing okay.

 

Now that we have the basic guts of the style sheet covered, lets move on to actually creating where we put all this code. There are two types of CSS. One type is embedded (inside the actual page your editing) and the other is external (a separate file that you call to be used in each page).

 

One way of creating a style sheet is doing it externally. This means the actual style sheet sits outside the page on your web hosting plan. What you’ll need to do is put your code inside a file (using any simple text editor) and instead of using .txt or .html as a file extension save it as, “anything.css”. The name of the style sheet doesn’t matter as long as it’s ending in “.css“. Then put this code into the header part of all the pages you want to use it on:

 

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

 

This tells the browser to use the “anything.css” as the style sheet for this specific page. You can put this between your header tags at the top of your web page.

 

The other most popular way is to embed the style sheet into the actual web page in question. This will only modify the attributes defined on that one single page.

 

><style type="text/css">
#content {
    align:center;
    border-left:2px solid #000; 
    border-right:2px solid #000; 
    border-bottom:2px solid #000; 
    width:600px;
}
</style>

 

This too would be placed between the header tags on your web site in question. Where I have the “content” selector defined would be the place you would place all your style sheet definitions for that one single page.

 

I think that covers the basics of CSS with you pretty well. Once again, this isn’t the end all and be all of CSS tutorials but it should give you enough confidence to look deeper and search more on the topic if you want to learn more.

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
×
×
  • Create New...