Skip to main content

Types of CSS (Cascading Style Sheet)


The Cascading Style Sheet (CSS) is used to set the style on web pages that contain HTML elements.
It sets the background color, font size, font family, color, etc. owned by the elements on a web page.

Types of CSS (Cascading Style Sheet)
(Image Source - Google Images)

There are three types of CSS :
  • Inline CSS
  • Internal or Embedded CSS
  • External CSS

Inline CSS: Inline CSS contains the CSS property in the body section attached with the element known as Inline CSS. This type of style is specified within an HTML tag using the style attribute.

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Inline CSS</title> 
    </head> 
      
    <body> 
        <p style = "color:#009900; font-size:50px; 
                font-style:italic; text-align:center;"> 
            Hello World... 
        </p> 
    </body> 
</html>

Internal or Embedded CSS: This can be used when a single HTML document must have a unique style. The CSS rule set must be inside the HTML file in the main section, that is, the CSS is embedded inside the HTML file.

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Internal CSS</title> 
        <style> 
            .main { 
                text-align:center;  
            } 
            .text { 
                color:#009900; 
                font-size:50px; 
                font-weight:bold; 
            } 
            .sub_text { 
                font-style:bold; 
                font-size:20px; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "main"> 
            <div class ="text">Demo Text</div> 
              
            <div class ="sub_text"> 
                Hello World 
            </div> 
        </div> 
    </body> 
</html>

External CSS: External CSS contains a separate CSS file that contains only style properties with the help of tag attributes (eg class, id, header, ... etc.). CSS property is written in a separate file with a .css extension and must be linked to the HTML document using the link tag. This means that for each element, the style can be configured only once and will be applied on all web pages.

Example: The file below contains the CSS property. This file is saved with the .css extension. For example - style.css

body {
    background-color:powderblue;
}
.main {
    text-align:center;   
}
.text {
    color:#009900;
    font-size:50px;
    font-weight:bold;
}
#sub_text {
    font-style:bold;
    font-size:20px;
}

Below is the HTML file that the created external style sheet is using
  • The link tag is used to link the external style sheet to the HTML web page.
  • The href attribute is used to specify the location of the external style sheet file.


<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css"/>
    </head>
  
    <body>
        <div class = "main">
            <div class ="text">Demo Text</div>
            <div id ="sub_text">
                Hello World
            </div>
        </div>
    </body>
</html>

CSS Properties: Inline CSS has the highest priority, then comes Internal / Embedded followed by External CSS, which has the lowest priority. Multiple stylesheets can be defined on one page. If the styles are defined in several stylesheets for an HTML tag, the following order will be followed.

  • Because Inline has the highest priority, Inline styles override any styles defined in the internal and external style sheets.
  • Internal or Embedded ranks second on the priority list and overrides styles on the external style sheet.
  • External style sheets have the lowest priority. If there are no styles defined in the internal or inline style sheet, the rules in the external style sheet apply to HTML tags.

Labels:

Comments

Post a Comment

Popular posts from this blog

Responsive Google Maps

Create Responsive Google Maps on Any Website. (Image Source - Google Images) Google Maps makes it easy to insert/embed a map into your own website. However, by default, Google Maps does not provide responsive support. In my Blog, I will show you how to make your maps responsive, using just a few lines of CSS. This technique will work on any website platform. 1. Get the embed code from Google Maps Go to Google Maps. Find the area of the map you want to use on your website. Click on the "Share" link. (Image Source - Google Images) Choose "Embed map". Select the iframe code. Right-click and copy the embed code. (Image Source - Google Images) 2. Use the Google Maps Embed Code Paste the embed code on your website. It will look similar to this: <iframe src="/" width="600" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> 2.1.Modify the Embed Code Add a div tag around the embed code. Use th...
2 comments
Read more

Moto G8 Power Lite Released in India

Moto G8 Power Lite with 5,000 mAh battery, Helio P35 SoC released in India . The price of the Moto G8 Power Lite in India is set at Rs. 8,999 for the 4GB + 64GB solo model. (Image Source - Google Images) Motorola's Moto G8 Power Lite made its debut in India and the new phone will go on sale later this month. The phone was introduced worldwide in April. The Moto G8 Power Lite is powered by the MediaTek Helio P35 octa-core processor and has a triple rear camera setup. The phone will be offered in a single RAM and storage configuration but in two color variants. It also includes a large 5,000 mAh battery. Moto G8 Power Lite Price in India, Sale Date... Read The Tweet... 3...2...1..The #UltimatePower has been launched!🚀 Gear up to experience power like never before with ultimate battery, performance, camera, and much more, with the all-new Moto g8 power lite at just ₹8,999! Sale starts 29th May at 12 PM on @Flipkart : https://t.co/Kc3P3geEqW pic.twitter.com/nAtUy48hFD — Motorola ...
2 comments
Read more

Micromax In Note 1, Micromax In 1b With MediaTek SoCs Launched in India: Price, Specifications

Micromax In Note 1 price in India starts at Rs. 10,999 , while Micromax In 1b carries a starting price of Rs. 6,999 . (Image Source - Google Images) Micromax "In" series has finally been launched in India after much anticipation and a variety of teasers.  The new series comprises the Micromax In Note 1 and Micromax In 1b that both accompany MediaTek chipsets and run on Android 10 with a “complete stock experience”, with none bloatware and ads. Micromax has also promised to supply two years of software updates on the new smartphones. The Gurugram-based company was once a pacesetter within the Indian mobile market. However, it bowed call at the growing dominance of Chinese brands including Oppo, Vivo, and Xiaomi within the country. Micromax co-founder Rahul Sharma during the virtual launch showcased the company's facility in Bhiwadi and detailed the assembly process of the new smartphones, which are being touted to be a part of the 'Make in India' initiative. (Im...
Post a Comment
Read more