How to use CSS with HTML

How to use CSS with HTML

Welcome friends to this new publication. Recall from our last article, where we talked about “what is cascading style sheet in HTML”, today’s publication we are going to deeper in CSS, on how to use it in our HTML document. By the end of this article, you will be able to use CSS on your web page.

CSS has many features that make our pages look designed and beautiful. Every application out there and website uses CSS to style the display of pages.

The Different ways of using CSS

CSS can be added to the document (HTML) in 3 ways which are:

  • In-line CSS
  • Internal CSS or elements CSS and
  • External CSS

1.In-line CSS

Using CSS in-line is when the CSS code is used inside the HTML documents or in the HTML tag by using the appropriate attribute.

<body style=”background-color: cyan”>

Example :

In-line CSS code in line 6

As you can see in line 6, inside the <body> tag, using the style=”…” attribute.
It just means, hey browser, make the background of my body to be cyan.

Here below is the result:

the output from browser

The content of that attribute is a property that has cyan as value. Note that there is “;” at the end of the property statement, which means our attribute reaches the end. We can chain many properties after another by separating them by that “;”.

Example of chained CSS properties:

chained in-line CSS

This means: hey browser, style my web page by giving it a background color of “cyan” and put my content in the center. As you can see the result below:

output of chained properties

The con and Pro of inline CSS:

The Pro: Great for quick fixes and prototypes. Better when you writing email templates, that is the best way to do that.

The Con: It fills with spaces, no possibility to reuse properties somewhere else, and too much bandwidth.

2.Internal CSS

The internal CSS is used in the head section of our HTML page in the <style> element, as seen in the image below from lines 6 to 16.
Example as follow:

Internal CSS from line 6 - 16

And here below is the result of the above code.

the output of element CSS

Note: Either you use inline CSS or internal CSS, the result will be the same. The difference is that with inline CSS, you are not able to use the same style somewhere else at least you have to rewrite it again where you want it to be applied.

That why we use what we call “selector”. We have to select the elements as we did with “body” and “h1”. If we have multiple “h1” in our code, the style is going to be applied to all those h1 elements.
This way selecting tags is not efficient because we may need to use many h1 on our page but with different styles. The reason why we have CSS selectors such as:

  • ID:

a ID CSS selector selects the HTML element(s) you want to style.

example:


<body id=”bodyBackground”>
    <h1 id=”title”>Hello, world</h1>
</body>

 

We have to define the ID selector in our body and then start to style in the internal CSS at the head of our page.

Note that the use of value or property was given to the ID attribute is used with a hash “#” in the front.

And the result will still be the same as the above result.

  • Class

A class CSS selector selects the HTML element(s) you want to style.
example:


<body class=”bodyBackground”>
    <h1 class=”title”>Hello, world</h1>
</body>

then as with ID, we can apply the style in the head section as well


<head>
    <style>
        .bodyBackground {
            background-color: cyan;
        }

        .title {
            font-style: italic;
            font-size: 30px;
        }
    </style>
</head>

The same process with the ID selector, the CLASS also has to be defined before styling it in the head of our page.
CLASS uses a dot “.” in the front of the property name.

And the result will still be the same as the above result.

Difference between CLASS and ID

The difference between an ID and a class is that an ID can be used to identify one element.
Let us see it by example.


<body>
    <h1 id=”title”> Hello, world</h1>
    <h2 id=”title”>Sub title</h2>
</body>

This will not work, because we are applying one ID to identify more than one element.

Whereas a class can be used to identify more than one.
Let us see it also by example.


<body>
    <h1 class=”title”> Hello, world</h1>
    <h2 class=”title”>Sub title</h2>
</body>

This will work because we can apply a class to identify more than one element.

The con and Pro of internal CSS: 

The Pro of using internal CSS is that our page will have fewer HTTP requests and a fast load. Also, it’s best when we decide to use external CSS because we can copy or cut content easily to an external file.

The con is that we can not use the same style for another page within our project.
That why we need external CSS.

3.External CSS

As by the name external, it is a style in a separate file. That you give the reference of that file in the head of the page. The browser then is going to scan your page and use that link to access the style CSS then apply it to style your web page accordingly.

For example, the file saved as “myStyle.css”:

.bodyBackground {
    background-color: cyan;
}

.title {
    font-style: italic;
    font-size: 30px;
}

then to use it in the page:


<head>
    <link rel=”stylesheet” href=”myStyle.css”>
    …
</head>

External CSS is the best practice because it makes our code looks clean and professional and we can apply the same style from the same CSS file to multiple pages within our project.

In conclusion, the CSS is the design side of our web page. We just tell the browser, hey browser, style my page in such and such way. For us to give that instruction of styling page to the browser, we have to know how to use that and where to put those styles. The reason why we have seen 3 different ways of applying styles to our page which are Inline, Internal, and External CSS. We saw the selectors and how they work.

Thanks for your time and for reading my article.

This Post Has 4 Comments

  1. zortilonrel

    Thank you for another informative website. Where else could I get that kind of info written in such an ideal way? I have a project that I’m just now working on, and I have been on the look out for such info.

    1. Alexis Dauli

      Hi friend. Thanks for coming to my blog. Unfortunately I don’t have any website to suggest yet. But I am preparing a book on the matter that I will be going deeper. Stay connected

  2. zortilo nrel

    I’d have to examine with you here. Which is not one thing I usually do! I take pleasure in reading a post that may make folks think. Additionally, thanks for permitting me to comment!

Leave a Reply