Building Blocks of Beautiful Websites: A Beginner's Journey with CSS

Hi Folks, In this article we are going to learn about CSS, First thing First CSS stands for Cascading Style Sheets, which is responsible to add beautification in our website or webpage. Whatever we see see in our webpage like colorful buttons, proper alignment of elements, texts , animation etc, it all comes from CSS.

Like any other language, it also has a syntax.

For e.g.

<h1 style="color: Blue;" >Intro to Cascading Style Sheet</h1>

As we can see here, I inserted style attribute in H1 element and applied color property which changed the color of my h1 element.

We write CSS in key:value pair, here we can see in our code color is key and Blue is value, we can inserting multiple properties just by separating them by commas (,).

<h1 style="color: Blue; background-color: bisque;" >
Intro to Cascading Style Sheet</h1>

Ways to add CSS in our Code

There are 3 ways to add CSS in Html code:-

Inline CSS
Internal CSS
External CSS

Inline CSS

In inline CSS, we add CSS in HTML element by using <style> tag. e.g.

<h1 style="color: Blue;" > Intro to Cascading Style Sheet</h1>

Internal CSS

In Internal CSS, we add CSS in Head part of HTML by using <style> tag.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intro to CSS</title>

    <style>

        h1{
            color: Blue;
        }
    </style>
</head>

As we can see, we are getting same results but the catch is, we are selecting h1 element to add CSS. In internal CSS we select the particular element to add styling in it. we can add multiple properties(key : value pair) in h1 tag.

External CSS

In external CSS , we makes an external CSS file with extension .css and link that file with our HTML file. So our CSS gets apply in HTML.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

As we can see above, we used link tag to <link> tag our CSS file with our HTML code. style.css is the name of our file which we've written in href.

In external file, we applies CSS similar like internal CSS but we don't use style tag.

   h1{
        color: Blue;
      }

Important Note:-

As we can see, again we are getting the same results, now the question is which is the best way to write CSS ? The best way is to write CSS is External because:-

It keep our code clean and easy to change
It is SEO friendly because for search engines it is easier to read HTML file.

Specificity

Now we'll see the specificity of CSS, which mean which is most dominated way to apply CSS. If we use all 3 ways to apply CSS on the same element then inline CSS will override internal and external. similarly if we apply only internal and external CSS then internal override external. But we uses External CSS in 99% of the time because of it's great application we saw above.

Now we'll apply all three ways on the same element.

/*---------------------------External CSS-------------------------*/ 
h1{
        color: green;
      }

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intro to CSS</title>

<!-------------------- Internal CSS----------------------------->
    <style>

        h1{
            color: Blue;
        }
    </style>
</head>

<!-----------------Inline CSS------->
<h1 style="color: red;" > Intro to Cascading Style Sheet</h1>

As we can saw, we used all three ways on the same element but inline override internal and external.

Order of specificity:- Inline > Internal > External

As I believe, to be a good developer we should more focus on practicality, not on theory. so go and get your hands dirty on it, try all the code by yourself and read about some more CSS properties.

Thank you so much for reading it completely, If you liked it do like, comment, share and follow for more content. Comment for any feedback.

Bharat Singh's Blog