Tutorial Basics of CSS

codemonkey

Code monkey not crazy, just proud.
Part I - Foundation

Want to learn the basics of CSS? Well you have come to the right place.

CSS is a language structured to make HTML easier to control and more powerful.

Usage

To use CSS you can use an external file or embed it straight into an HTML file.

External
Pros: Easy to manipulate lots of pages
Cons: Requires ability to make .css files

To use an external file you need to create a new file, let's call it stylesheet.css in the same directory as your HTML file. All the CSS code should go in stylesheet.css.

In the HTML file you need to put the following code below the <head> tag.

Code:
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
Put that on every page you want the CSS to affect.

Internal
Pros: Embedded directly into the HTML file.
Cons: Can only affect one page, to affect multiple you have to copy and paste code into each page.

To use CSS inside the HTML document you need to go to the <head> section of your HTML document and right below it add:

Code:
<style type="text/css">
</style>
In between the <style> tag is where your CSS code goes.

CSS Comments

To make a comment you use /* */ like this:

Code:
/* This is a comment in CSS, it does not affect anything in the page */
Modifying Tags

Now we come to some practical stuff, modifying tags.

Code:
p
{
color: red;
}
What this does is make the content of every <p> tag red.

p - defines the tag used (you can do this with any tag, except <a> which is special and we will get to later)
{ - declares the starting of attributes
color - declares that the font color of the <p> tag is going to be modified (this is called an CSS attribute)
: - shows that the attribute is over, and the value is the next thing coming up
red - the value for the "color" attribute
; - ends the statement

Common Attributes

Here's a list of some common attributes:
color - changes the font color
text-align - changes the alignment of the text (center, left, right)
font-size - changes the font size
font-family - changes the font type (Arial, Tahoma, etc.)
font-weight - changes the amount of boldness (bold, bolder, lighter)
background-color - changes the background color
font-style - changes the font style (italic, normal, oblique)

Measurement Attributes

When declaring the value of an attribute that involves measurement (font-size, width, height) you have to include a unit UNLESS the value is 0.

Common Units are px (pixel) and cm (centimeter).

Example Usage:
Code:
b /* Bold tag */
{
font-size: 24px; /* notice there is NO SPACE between the number and the unit */
}
Multi-Value Attributes

Some CSS attributes require more than one value.

For example:

Code:
ul /* unordered list element */
{
border: 1px solid black;
color: red;
}
As seen in the above, each value is separated by a space.
1px - Thickness of border
solid - Type of border (solid, dotted, ridge, inset, outset, groove, dashed, double)
black - Color of border

Borders

Borders are very unique when it comes to CSS besides having a multi-value attribute.

With borders you can specify a border on only certain sides, for example:

Code:
p
{
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
That adds a border side to each side except the bottom. You could set the values to be different to have a multi-colored border, or something like that.

Here's the easier and shorter way though to do the same exact thing as the previous example.

Code:
p
{
border: 1px solid black;
border-bottom: none;
}
All this does is make a border on all sides, then removes the border on the bottom to produce the same effect as before, however you save a couple bytes of space.

Part II - Classes and IDs
Classes and IDs make it possible to use CSS to change something, without changing all of a tag.

Classes

Code:
.CoolRedClass /* The period, ".", before "CoolRedText" indicates that it is a class you are defining, not putting a tag name  */
{
color: red;
font-style: italic;
}
Code:
<div class="CoolRedClass">This text is red (and italic)</div>

<p class="CoolRedClass">This text is also red (and italic)</p>

<div>This text is not red or italic</div>

<p>This text is not red or italic</p>
The CSS only affects tags that have the attribute class="class", not all tags.

Classes should be used when the class will be used more than one time, example:

Code:
<div class="myclass">Ahoy world!</div>
<div class="myclass">wuts up?</div>
However, it's not necessary for a class to be used more than once.

Identifiers (IDs)

IDs are practically identical to Classes, except they have a different method of usage, and you can only use an ID once.

Code:
#CoolRedID /* The number sign, "#", before "CoolRedID" indicates that it is a ID you are defining, not putting a tag name  */
{
color: red;
font-style: italic;
}
Code:
<p id="CoolRedID">This text is red and italic.</p>
Remember: Only use IDs ONCE.

You might be wondering why you would ever want to use an ID instead of a class, and that is because of JavaScript; I won't go into the details but it is good practice.

Tag Specific Classes

If you want to make a Class only be able to affect one tag, or have different effects on different tags so that this would happen:

Code:
<p class="myclass">This text is red</p>
<div class="myclass">This text is blue, yet it has the same class as the previous</div>
You can do this with Tag Specific Classes.

Here's the code for it:

Code:
p.myclass /* p is the tag and myclass is the class */
{
color: red;
}

div.myclass
{
color: blue;
}
___

This concludes part two of Basics of CSS.

Part III - Links and Events

In this part we learn how to modify links and make dynamic content with hover event.

Modifying Links Attributes

Links are a bit different to modify then other tags.

To modify a link you need to use this code:

Code:
a:link
{
/*All CSS attributes here */
}


/*for a class use:*/

a.myclass:link
{
/* attributes here */
}
And if you want to change how it looks when visited or when it's hovered upon:

Code:
a:link
{
color: white;
}

a:visited
{
color: gray;
}

a:hover
{
color: blue;
}
You can also use :hover with other tags besides <a>, for example:

Code:
p:hover
{
background-color: yellow;
}
That gives a highlighting effect when you scroll over the contents of a <p> tag.

___

This concludes part three of the Basics of CSS.

Part IV - Misc.

Asterisk
The asterisk (*) can be used to fill in CSS attributes for all tags that don't already have them specified.

For example:

Code:
*
{
color: red;
}

div
{
color: blue;
}
Code:
<p>This text is red</p>
<div>This text is blue</p>
Multiple Classes

You can use multiple classes on an element by seperating them with a space, for example:
Code:
.redcolor
{
color: red;
}

.bluebackground
{
background-color: blue;
}
Code:
<div class="bluebackground redcolor">This has a blue background and is red.</div>
Quick CSS

There is a third way of using CSS directly in the HTML, for those who want CSS to effect only one specific instance of a tag.

Here's how it works:

Code:
<div style="color: red; /*other css properties*/">This text is red</div>
<div>This text is not red</div>
As you can see it only affects one tag.

Attribute and Value List

You can find a great list with all attributes and values here.

___

This concludes the Basics of CSS tutorial by me, thanks for reading!

You may not redistribute this tutorial without my permission.
 

UndeadDragon

Super Moderator
Staff member
I think you should also add that you can assign the child of a parent elements' style, so you don't have to give everything classes and ids. Example:

Code:
<html>
<head>
<title>CSS Test</title>
<style type="text/css">
#container
{
border: 1px;
}
#container p
{
color: #f00;
}
</style>
</head>
<body>
<div id="container">
   <p>This is red text</p>
</div>
</body>
</html>
 

codemonkey

Code monkey not crazy, just proud.
I think I'll make a more advanced tutorial with that, and link to that at the end of this one.

It would also have advanced selectors and some CSS3 thrown in.
 

JerseyFoo

1/g = g-1
#container p ~ any paragraph within element of id

#container > p ~ child paragraph of element of id

But old IE doesn't do it right. Writing Efficient CSS

And you can't have a tutorial on CSS without addressing id-spec, come on.
 
General chit-chat
Help Users
  • No one is chatting at the moment.
  • Ghan Ghan:
    We could use some rain.
  • The Helper The Helper:
    I am not complaining though Hurricanes are not fun I have been through alot of them
  • Blackveiled Blackveiled:
    I evacuated for it just incase since I live in La Porte pretty much right on the water (in Houston area). Didn't see anything. It's a good thing for me anyways.
  • Ghan Ghan:
    It's too bad that Blizzard messed up so terribly with Reforged.
  • Ghan Ghan:
    Still has a 0.6 user metacritic score.
  • Ghan Ghan:
    (Out of 10)
  • Varine Varine:
    I haven't even tried it yet because everyone said it sucked. How do you get .6 out of ten?
  • The Helper The Helper:
    I am waiting for Dwarf Fortress to come out on Steam then I am on it.
  • Accname Accname:
    I play Dwarf Fortress from time to time.
  • Accname Accname:
    Its Okay.
  • Accname Accname:
    But the performance is sub-par. Does not seem to be well optimized.
  • Varine Varine:
    Is the Steam version coming with a graphical overlay or is it using the ASCII graphics still?
  • tom_mai78101 tom_mai78101:
    Steam version has the graphical overlay.
  • The Helper The Helper:
    Steam Version has graphics, a new interface and will be integrated in the steam mod stuff
  • Blackveiled Blackveiled:
    I didn't think WC3 Reforged was that bad. It pretty much did what it stated (to me at least), but then again I can care less about reforged campaigns and all that. I just care about gameplay.
  • Varine Varine:
    I think people were hoping for a resurgence in mod support. I have little interest in the actual game tbh
  • Varine Varine:
    Plus I know they added that Dota precedent clause where Blizzard can steal your shit which isn't cool.
  • Ghan Ghan:
    They sold Reforged to the community as primarily a huge graphical uplift with high res textures and redone cinematics.
  • Ghan Ghan:
    They even showed one of the redone cinematics at Blizzcon and that very cinematic wasn't even in the released game.
  • Ghan Ghan:
    So I think folks were angry about that.
  • Varine Varine:
    Didn't the backwards compatability have issues too?
  • Accname Accname:
    I never had any hopes for that. Blizzard is not the same company it was 10 years ago.
  • The Helper The Helper:
    It happens in corporations. They just absorb the companies they buy and it is not about the love of making awesome games it is how much money can we make with the least amount of cost.
  • The Helper The Helper:
    Blizzard is watered down now hopefully they can pull it together

    Members online

    No members online now.

    Affiliates

    Hive Workshop
    Top