Web Design Course – Part 4 – Style Sheets & It’s Types

Hello people! Oops not just people, but passionate web designers, first of all let me tell you that in our previous article, we have learned about different web design layouts that are mostly trending over the past few years.

So, what we’ll be learning in this post is quite interesting. So, it is clearly understood that we aren’t able to make attractive and good web design, and the thing that makes us WOW are the best STYLES we use for designing web pages. Yes of course, the style elements give a life to designs. The variations, the colors, animations all just appears to our eyes because of this.

Therefore, in this article, we’ll be learning about how we could actually apply styles in our designs. Basically there are three ways to implement styles to our web elements, which are:

  • Inline Styling
  • External Styling
  • Internal Styling

We will also discuss about when and how to use the specific type of style.

Inline Styling

Inline styling is done when we don’t have too much elements in our layout. Or its often done when styles are applied from various external style sheets, which makes us difficult to modify in bunch of external style sheets.

Since, Inline style can be applied as below:

 

Web Design - Inline Styling

 

So, here is how it looks like….

Web Design - Inline Styling Result

 

So, In the above code, you can see the style attribute is applied in a body tag. (Therefore for applying multiple styles to a body element, styles can be given by separated terminator symbols “;”.

For example: style=”background:blue;color:white;”

It’s easy to implement but it’s not the preferred method of applying styles to your HTML. Because for each and every element one needs to redefine style, which doesn’t make HTML and CSS code maintainable.

Internal Styling

Internal styling is used when you want to define one style to multiple elements. This is often done when there are bunch of external style sheets, and we want to modify the style in our specific elements. Not exactly as defined in external style sheet, but actually to rewrite the style we do it.

HTML file first renders inline styles, then internal style, and then external style . Means that if an element has a style defined in external, internal and inline. it will only apply the style that is defined by inline styling method. However, the extended styling can also be used that are defined either in internal or external styling.

Additionally, the conflict of style attributes are rendered on basis of the highest priority. And the highest priority is for the inline styling, then internal and then external styling.

So, let’s have a look at the markup;

<html>

  <head>

   <title>hello</title>

   <style>
    body
    {
     background:blue;
    }
   </style>

 </head>

 <body>

   <h1>hello world</h1>

 </body>

</html>

In above piece of code, you can see that style is defined inside head tag, so that style renders first on the web page. Also its the standard way of applying the style.

Furthermore, HTML elements can be targeted for applying styles by three ways which are:

  • Element/Tag selector
  • ID Selector
  • Class Selector

Therefore, for element/tag selector, one only needs to write the name of the tag with code block which means to define style inside its parenthesis.

So let’s see the example below;

<style>

h1
{
   color:black;
}

</style>

As a result, all the h1 tags will display text color as black.

Similarly for ID, one needs to give a unique ID to elements with various styles. But if one wants to have elements with the same style then he/she should use same class to various HTML elements.

For Example;

<html>
  <head>
  <title>hello</title>

  <style>

   #text
   {
    color:black;
   }

  </style>

  </head>

  <body>

   <h1>hello world</h1>

   <h1 id="text">hello world</h1>

  </body>

</html>

As a result of that, In above code, you can see that h1 tags except the first one was given ID to target the specific tag. In addition to that, you’ve seen Hash ‘#’ symbol which is used to locate the element for its ID name.

Furthermore, classes are specifically used to target to apply the style on bunch of elements. Therefore it is clear that ID’s can’t be able to do the same thing. The need for classes arrived when the complexity of code is increased, and to monitor the changes, as well as to make code maintainable.

This self-explanatory word “class” means that it targets multiple elements, and hence changing the style in it could change all the elements of this class. it can be applied as follows.

<html>
  <head>

   <title>hello</title>

  <style>

    .text
    {
     color:black;
    }

  </style>

  </head>

  <body>

   <h1>hello world</h1>
   <h1 class="text">hello world</h1>
   <h1 class="black">hello world</h1>
   <h1 class="black">hello world</h1>

  </body>
</html>

 

While writing the above markup, you can easily encounter the only difference in ID and class. In style tag, to target Class ‘.’ (dot or period), is used before the class name defined inside a tag.

Now, lastly we will study about how we can apply external styling.

External Styling

External styling is mostly used by web designers or developers for managing their styles separately from HTML code and to use external styling method, one needs to follow the following step:

  1. Create an empty file
  2. Save it with .css extension

Hence, you’ve successfully created an external style sheet. Furthermore, to link your HTML page with the external style sheet, you need to write this in your head tag after the title tag:

<link rel="stylesheel" href="style.css"/>

So, In the above line, you can see href attribute, it is for defining the path of the style sheet.

Due to ease in referencing CSS file, I always create style sheets in the folder I save my HTML file. So, I just wrote the name of the file with its extension. However, if you’re creating style sheet in a folder and name it as css, and you put your file in your css folder, then this way you can give a link inside your header.

<link rel="stylesheel" href="css/style.css"/>

Folder Structure For Web Design

 

So, above is the illustration of the folder structure for the style sheet.

Finally, I hope you guys have enjoyed learning it. In conclusion, let me tell you that in our next tutorials we will be learning about various CSS styling attributes with their proper usage.

Cheers!

In case of any query contact me.

& Don’t forget to subscribe my blog.

Join our mailing list for exclusive offers and crazy deals!

4 thoughts on “Web Design Course – Part 4 – Style Sheets & It’s Types

Leave a Reply

Your email address will not be published. Required fields are marked *