Introducing basics of CSS

By:, On:

We already know that we can style our HTML to make it look good. However, there is a problem with the way we do it. Let's say we have a paragraph:


<p style="color: blue;">This will be one paragraph. Just like the one you would see in a book or magazine. It will be treated by the browser as one chunk of information</p>

What if you had two paragraphs on one page? You would have to repeat the style for every single paragraph:


<p style="color: blue;">This will be one paragraph. Just like the one you would see in a book or magazine. It will be treated by the browser as one chunk of information.</p>

<p style="color: blue;">And here is another paragraph with the same formatting.</p>

What if you had a hundred of those on a single page? Or worse, what if you had to change the color at some point? After copying the style a hundred times, you would find yourself in deep trouble if you had to make some style changes to the whole document.

Someone had this problem before. This is why today we have a special language, called Cascading Style Sheets or CSS for short. HTML and CSS are toolsets we will use to build some awesome looking websites. HTML we will use for the "structure" and CSS for the "style".

Step 1: Add CSS inside Head Tag

So far, we have been simply using HTML but we didn't pay any attention to the structure of the document. Let's have a look how the structure should look:


<!DOCTYPE html>


<html>
    <head>
        THIS IS THE HEAD
    </head>
    <body>
        THIS IS THE BODY
    </body>
</html>

At the top you can see "!DOCTYPE html" declaration. It notifies the web browser that we will be using HTML5 syntax. This tag doesn't need to be closed. Below we have two sections: Head and Body. Head will not be visible to the user who will open the website in the browser. In the header, we will put all the code that will be not displayed to the user, but will instead be used by the browser. We will put our CSS in the header section along with keywords, the website description and other information that will allow search engines to find the website. Inside the BODY we will put all content that we want to display to the user, so all images, paragraphs and links will end up in the body. Let's try:

Delete all content inside your index.html file and type:


<!DOCTYPE html>


<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
        </style>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

What happened here? We extracted the style from the html and put it the head of the HTML document. From now on, all H1 headers will be red. We don't need to specify the style every single time. It will work across the whole page.

Step 2: Add Some Style

Let's try something else:


<!DOCTYPE html>


<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
        </style>
    </head>
    <body>
        <h1>THIS SHOULD BE RED</h1>
        <h1>THIS SHOULD BE BLUE</h1>
        <h1>THIS SHOULD BE BLUE</h1>
    </body>
</html>

What should we do if we want to keep a couple of the headers blue and a couple red? At the moment we give the same style to all of them. Fortunately, HTML and CSS provide a handy way of dealing with that. We can group elements under a class and give that class certain abilities. Let's give it a try:


<!DOCTYPE html>


<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
            .blue { color: blue; }
        </style>
    </head>
    <body>
        <h1>THIS SHOULD BE RED</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
    </body>
</html>

Step 3: Understand Class and Id Attributes

Notice that we added a line inside the CSS ".blue". This is the name of the class, the dot ('.') is used by CSS to indicate that it corresponds to an HTML class. Another important thing to notice here is that we styled all headers with "h1 { color: red; } " and then we have "overridden" the color attribute for those h1 tags that have class attached. In other words, class is "stronger" than a generic style to HTML tags.

Beside styling HTML tags and creating classes we can also create IDs. They are "stronger" than classes, but they should be used with care. The rule is that ID should NOT be repeated on the page. It's meant to be unique. Of course the website will not crash if we have two elements with the same ID on the same page, but this is considered an error and may cause you problems down the road. Let's try:


<!DOCTYPE html>


<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
            .blue { color: blue; }
        </style>
    </head>
    <body>
        <h1>THIS SHOULD BE RED</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
        <h1 class="blue" id="orange">THIS SHOULD BE ORANGE</h1>
    </body>
</html>

So far we can see that HTML tag styling is the weakest, followed by class style and ID being the strongest so far. But what about writing style directly in line with HTML like we did before?


<!DOCTYPE html>


<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
            .blue { color: blue; }
            #orange { color: orange; }
        </style>
    </head>
    <body>
        <h1>THIS SHOULD BE RED</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
        <h1 class="blue" id="orange">THIS SHOULD BE ORANGE</h1>
        <h1 class="blue" id="orange" style="color: black">THIS SHOULD BE ORANGE</h1>
    </body>
</html>

Now we can see the full spectrum: tag < class < id < inline. It gets a little more complex. What will happen when we have two classes attached to the same element and they address the same attribute?


<!DOCTYPE html>


<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
            .blue { color: blue; }
            .pink { color: pink; }
        </style>
    </head>
    <body>
        <h1>THIS SHOULD BE RED</h1>
        <h1 class="blue pink">THIS SHOULD BE BLUE</h1>
    </body>
</html>

Step 4: Understand Tag Priority

Note that we put both classes together in the same set of quotes: class="blue pink". Which class will override the other? The second one. Your browser reads CSS from top to bottom and it's trying to combine all styles and make sense out of them. If it finds the conflict, it will pick the value closer to the bottom of the file.

There is a way to be more specific when targeting the HTML elements with CSS:


<!DOCTYPE html>


<html>
    <head>
        <style type="text/css">
            h1.blue { color: blue; }
            .pink { color: pink; }
        </style>
    </head>
    <body>
        <h1 class="blue pink">THIS SHOULD BE BLUE</h1>
    </body>
</html>

You can see here, that we wrote "h1.blue" . It literaly reads: "every h1 tag that has class blue gets ... style". The text is blue, not pink even though class pink is "under" the class blue. It's because first declaration is "more specific".

Have a look at the table below. It explains how your browser calculates how "strong" is a CSS declaration.

Let's assume we have two declarations for our element:


<!DOCTYPE html>


<html>
    <head>
        <style type="text/css">
            h1.blue { color: blue; }
            .pink { color: pink; }
        </style>
    </head>
    <body>
        <h1 class="blue pink">THIS SHOULD BE BLUE</h1>
    </body>
</html>

Declaration HTML inline (x1000) ID (x100) Class (x10) Tag (x1)
h1.blue {} <h1 class="blue">TEXT</h1> - - blue (1x10) h1 (1x1)
    0 0 10 1
Total: 11
Declaration HTML inline (x1000) ID (x100) Class (x10) Tag (x1)
.pink {} <h1 class="pink">TEXT</h1> - - pink (1x10) 0
    0 0 10 0
Total: 10

From the above we can see that by declaring both, HTML tag and the class will be stronger(11 points) than styling attribute just with a class(10 points). Still both would be overridden if we had declared an ID (100points) or inline style (1000points)

The way the CSS is "compiled" by your browser can be confusing at times so make sure your CSS is easy to read and you don't use too many classes or ids to style your website.

The great thing about the class or ID declaration is that we can attach it to many different elements:


<!DOCTYPE html>


<html>
    <head>
        <style type="text/css">
            h1 { color: red; }
            .blue { color: blue; }
        </style>
    </head>
    <body>
        <h1>THIS SHOULD BE RED</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
        <p class="blue">this paragraph will also be blue</p>
    </body>
</html>

That gives us tremendous amount of flexibility. For example, we can give shadow to fonts, tables, or other HTML elements by defining one class and attaching it to the elements we want to modify.

The final question I'd like to ask you in this tutorial is: What if we have two or more classes that share the same behavior? For example:


<!DOCTYPE html>


<html>
    <head>
        <style type="text/css">
            .red {
                color: red;
                text-decoration: underline;
            }
            .blue {
                color: blue;
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <h1 class="red">THIS SHOULD BE RED</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
    </body>
</html>

We can extract common behavior and override one or more attributes with another class "under" the first class:


<!DOCTYPE html>


<html>
    <head>
        <style type="text/css">
            .red, .blue {
                color: red;
                text-decoration: underline;
            }
            .blue {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1 class="red">THIS SHOULD BE RED</h1>
        <h1 class="blue">THIS SHOULD BE BLUE</h1>
    </body>
</html>

We define both attributes for both classes and then we override color for blue class.

Oh dear, that was a lot in one go. Good news is: this is probably the most difficult to understand about CSS. It gets easier from here :-)

If you login you will be able to mark this tutorial as finished to track your progress



Comments

  • On: Frank wrote:

    After creating an app is there already and "index.html" file created? If not, where should it be created? I am using sublime text editor. Thanks!
  • On: Frank wrote:

    I did another lesson first before this. The series order is not always very clear, but I realize this is a WIP!
  • On: sameer wrote:

    Hey ,CSS also 2 parts Outer ,Inner and inline like that based on convince we can create CSS(cascaded Style Sheet)

    Outer :

    Inner :

    Inline :

Comment

You can login to comment