What is CSS Meaning? Types of CSS

Types of CSS
Types of CSS (Cascading Style Sheets)

What is CSS Meaning? Or what is CSS?

CSS Stands For

CSS Stands For

CSS stands for Cascading Style Sheets. It is used to decorate a HTML page as you wish. HTML is a like a building structure and CSS is decoration material. CSS is used to style everything in a website to attract the user’s attention to the design my making it look good. It is used links, images, text and menus etc. look like what you wanted to display. CSS explains how HTML tags are to be displayed on a website. Now I hope the CSS meaning should be clear to you.

CSS Meaning

CSS Meaning

CSS or Cascading Style Sheets was developed by W3C (World Wide Web Consortium) and the term cascading is derived from the fact that multiple style sheets can be added to the same Web page.

Why Use CSS?

CSS solves a number of designing issues with ease. It helps you to code for multiple pages, to style and look similar, if you want to change the style just change the CSS code and it’s done. It is used to define styles for your web pages and set layout.

Types of CSS

There are three types of CSS

  1. Inline CSS
  2. Internal CSS
  3. External CSS.
Types of CSS

Types of CSS (Cascading Style Sheets)

These 3 types of CSS are discussed below in more detail.

Types of CSS – Inline CSS

The CSS code which is added or specified inside an HTML tag is called an Inline CSS. The style attribute of HTML is used to define an Inline CSS code. The style attribute is able to hold any CSS property. Here is an example of inline CSS. It is used to apply a unique style for a particular element.
Inline CSS code Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Inline CSS</title> 
    </head> 
      
    <body> 
        

 This tag has an Inline CSS

 
    </body> 
</html>

Types of CSS – Internal CSS or Embedded CSS

The Internal CSS is used to uniquely style a single webpage. The styles are applied to the elements on the page but not to other pages. The Internal CSS is added to a webpage using the

HTML tags. These tags can be added anywhere on the page before the styled contents, but you should include them in the head section. Here is an internal CSS code example to elaborate more.

Internal CSS code Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Internal CSS</title> 
        <style> 
            .wrapper { 
                text-align:center;    
            } 
            .htc_title { 
                color:#008800; 
                font-size:30px; 
                font-weight:bold; 
            } 
            .htc { 
                font-style:bold; 
                font-size:18px; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "wrapper"> 
        <div class ="htc_title">HowToCode.pk</div> 
        <div class ="htc">Learn How to Code</p> 
        </div> 
    </body> 
</html> 

Types of CSS – External CSS

The External CSS as name suggests is a included in an external file. There is no HTML tag in the CSS external file. The style sheet file have to be saved with a .css extension. If you want use the styles of an external CSS file you should include the file in the webpage. Every page that includes the external style sheet will have same styles. This file will have CSS class, ids and tag style codes. Here is an External CSS file example to understand more.
External CSS Code Example:
This is style.css file.

.wrapper { 
   text-align:center;    
} 
.htc_title { 
    color:#008800; 
    font-size:30px; 
    font-weight:bold; 
} 
#htc { 
   font-style:bold; 
   font-size:18px; 
}

The following HTML file uses the external CSS file (style.css in this case) to style the page elements.
To use and external CSS file you have to write tag with its attributes.
• To link the external CSS file you have to use tag.
• The “href” attribute is the compulsory attribute where you have to give the external CSS file URL.
• The “rel” attribute is used to tell the relationship of the file to the page.

<!DOCTYPE html> 
<html> 
    <head> 
      <link rel="stylesheet" href="style.css"/>
        <title>External CSS</title> 
    </head> 
    <body>  
      
<div class = "wrapper">

<div class ="htc_title">HowToCode.pk</div>


<div id ="htc">Learn How to Code</div>

       </div>

   
    </body> 
</html> 

Comments