Print bookPrint book

Types of CSS

Site: Philippine Science High School - MC - Knowledge Hub
Course: SY25.CS3.Web Development
Book: Types of CSS
Printed by: , Guest user
Date: Thursday, 7 August 2025, 10:58 AM

Table of contents

1. Introduction to Types of CSS


After completing this module, you are expected to

● Differentiate the three types/ways to incorporate CSS

          In the previous module, you have learned that the design and layout of the webpage is possible with the help of CSS. You also learned about the basic syntax of CSS and apply simple properties on HTML elements using different selectors namely; element, universal, id, class, descendant, child and grouping selectors.

          In this module, we will be discussing the different types of CSS and when to use each one. The module will also discuss what will be the effect when the different types of CSS are combined in one HTML document. Furthermore, we will also learn the effect of using !important on a CSS property.

1.1. Types of CSS


          The different types of CSS are technically about how CSS could be inserted or incorporated inside an HTML document.

          The different ways to incorporate CSS are as follows, and are discussed in details in the following sections of this module:

  • Inline
  • Internal or Embedded
  • External

1.2. Inline CSS


          Inline CSS is incorporated as value of the style attribute of an HTML element. This is used to apply a unique style on an element as shown in the following code example and its output.

The code:


<!DOCTYPE html>
<html>
<body>
    <h3 style="color:blue;text-align:center;">This is header3.</h3>
    <h3 style="color:red;">This is another header 3.</h3>
</body>
</html>

The output:

          As you can see, the two <h3> elements will have a different style applied on each one. The first one will have blue colored text and centered on a line, while the second will have a red colored text and it is flushed to the left. You can also see in the code example, that there could be more than one CSS properties on an element that are separated with commas. If there would be several CSS properties to be applied on an HTML element, it is best to use the other two types of CSS as discussed next.

1.3. Internal or Embedded CSS


          Internal CSS, as compared to inline CSS, is used when an HTML page will have a unique style. The CSS properties are defined inside the tag in the head section of an HTML document.

          The sample code below and the following output shows that the browser window will have a teal background and both <h3> tags will have the same color and text-alignment.

The code


<!DOCTYPE html>
<html>
<head>
    <style>
        body {
         background-color: teal;
        }
        h3 {
         color: white;
         text-align: center;
        }
    </style>
</head>
<body>
    <h3>This is header3. </h3>
    <h3>This is another header 3</h3>
</body>
</html>


The output




1.4. External Stylesheet

        

          The last type of CSS is the external stylesheet. This type of CSS is used to have a single uniform style applied on every web page of a website that uses it. The CSS properties are saved in a separate text file with an extension of .css and is referenced from an HTML document using the tag inside the head section. The <link> has a format as shown below:



<link rel="stylesheet" type="text/css" href="mystyle.css">

          rel="stylesheet",  means what will be relationship of the file href="mystyle.css"  to the HTML document. In this case it is a stylesheet to format the elements in the HTML document.  While type="text/css" indicates the file type (text) and what it contains (css). Lastly, the values for href could be a path\filename or a URL that points to an online .css document.



<!DOCTYPE html>
<html>
    <head>
        <!-- incorporate an external stylesheet saved in mystyle.css -->
        <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    <body>
        <h3>This is header3. </h3>
        <h3>This is another header 3</h3>
    </body>
</html>

          The .css file DOES NOT need the <style></style> tag inside it as shown in the mystyle.css below. The output would be the same as the Internal CSS.



/* saved inside mystyle.css */


body {
    background-color: teal;
}
h3 {
    color: white;
    text-align: center;
}

          The advantage of using an external stylesheet is that one definition of CSS style rules could be applied to several HTML documents or webpages. So that when the style is updated it affects several web pages that uses it.


1.5. Combining The Different Types of CSS


          Now, what will happen if you combine all three CSS types in a single document? Then a “Cascading” effect will take place. Meaning all the styles will be combined into one “virtual” style rule for an HTML element wherein the properties nearest to the element will take precedence regarding its effect. This is called the “cascading rule”, wherein Inline CSS properties will have precedence over Internal and External CSS. While the position of the <style></style> and the <link> in the head section affects who has precedence over the other between the Internal and External CSS. If no style sheet incorporated into the HTML document, then it uses a browser’s default. Please refer to the following screenshot examples.

          The example below shows that the <h1> tag has both an internal and inline CSS applied to it. The effect is that all the properties are combine into one style rule for <h1>. The inline CSS properties will take precedence over the internal. So, the color of the text would be white instead of teal, then centered and has a background color of blue.


          Another example on the next page showing both an external and internal CSS are present in one HTML document. This means that there would only be one style rule for the HTML document, and the properties that are the same for the same selector, the Internal CSS will take precedence over the one defined in the External stylesheet. In case that the <link> tag comes after the <style></style> tag, then the reverse would be true, meaning the external stylesheet will take precedence over the internal stylesheet for the same properties of the same selector to form one style rule.



<!DOCTYPE html>
<html>
<head>
     <!-- incorporate an external stylesheet saved in mystyle.css -->
     <link rel="stylesheet" type="text/css" href="mystyle.css">
     <style>
         body {
            background-color: teal;
         }
         h3 {
            color: white;
            text-align: center;
         }
     </style>
</head>
<body>
</body>
</html>



2. Summary


          CSS has three types that pertains to how it is incorporated into an HTML document. Inline CSS is used as a value to an element style attribute and uniquely formats that element. While the Internal CSS is used to uniquely format an HTML document and is incorporated inside the <style></style> tag of the head section. Lastly, the External CSS is a separate .css text file that is inserted into the HTML document using the <link> tag inside the head section.

          The three CSS types could be incorporated into one HTML document and are “cascaded” into one style rule to format the elements inside it. The effects of the combined CSS properties follow a precedence rule based on the nearness to the elements being formatted. The use of !important on a CSS property overrides this precedence rule.

References


How to Add CSS. (n.d.). Retrieved August 12, 2020 from https://www.w3schools.com/css/ css_howto.asp

CSS Inclusion. (n.d.). Retrieved August 12, 2020 from https://www.tutorialspoint.com/css/ css_inclusion.htm

Coyler, Coyler (2017, February 226) When Using !important is The Right Choice. Retrieve from https://css-tricks.com/when-using-important-is-the-right-choice/