Tutorial Basics of CSS

Discussion in 'Webmaster Tutorials and Resources' started by codemonkey, Aug 14, 2009.

  1. codemonkey

    codemonkey Code monkey not crazy, just proud.

    Ratings:
    +67 / 0 / -0
    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.
     
  2. UndeadDragon

    UndeadDragon Super Moderator Staff Member

    Ratings:
    +450 / 0 / -0
    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>
    
     
  3. codemonkey

    codemonkey Code monkey not crazy, just proud.

    Ratings:
    +67 / 0 / -0
    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.
     
  4. JerseyFoo

    JerseyFoo 1/g = g-1

    Ratings:
    +40 / 0 / -0
    #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.
     

Share This Page