Author: M Abo Bakar Aslam

Basic Structure

1. Styling Methods

There are three way to use CSS.

1. Inline CSS
2. Internal/Embeded CSS
3. External CSS

2. Styling Using Inline CSS

Inline CSS, also known as “inline styles” is a way to apply CSS directly to individual HTML elements within an HTML document. Unlike external and internal/embedded stylesheets, which apply styles globally to multiple elements, inline CSS is specific to a single element. It’s defined within the HTML tag itself, using the style attribute.

Example Code 1: color property by using inline-css

<!--File: myFile.html-->
<p style="color: blue;">This is a paragraph with inline CSS.</p>

Output

Example Code 2: background-color property by using inline-css

<!--File: myFile.html-->
<div style="background-color: #D8B08C;">This has a yellow background.</div>

Output

Example Code 3: font-size property by using inline-css

<!--File: myFile.html-->
<p style="font-size: 24px;">This is a larger paragraph.</p>

Output

Example Code 4: font-family property by using inline-css

<!--File: myFile.html-->
<p style="font-family: Comic Sans MS;">This text uses the Arial font.</p>

Output

Example Code 5: text-align property by using inline-css

<!--File: myFile.html-->
<div style="text-align: center; border: 1px solid red; width: 200px;">Centered text</div>

Output

3. Styling Using Internal/Embedded CSS

This method applies styles globally to multiple elements. All styles are applied under <style> </style> tags.

Example Code 6: Style all HTML elements in internal/embedded CSS

Note following points in this example.

• All three paragraph have same color and backgroud-color
• Similarly, both headings have same font-size as 24px.

<!--File: myFile.html-->
<style>
p{
    color: red;
    background-color: black;
}
h1{
    font-size: 24px;
}
</style>
  
<h1>Name</h1>
<p>Introductory paragraph</p>
<p>Contact Information</p>
  
<h1>Education History</h1>
<p>Detail about educational journey</p>

Output

Example Code 7: Styling using IDs in internal/embedded CSS.

Note following points in this example.

• Hash (#) is used to define ID.
• Only first heading has font-size as 24px.
• Last paragraph as font-size as 24px.
• Only second paragraph has red color and black background-color.

IDs are used to apply styles, but this method is not suggested. It is rarely used.

<!--File: myFile.html-->
<style>
#pID{
    color: red;
    background-color: black;
}
#myID{
    font-size: 24px;
}
</style>
  
<h1 id="myID">Name</h1>
<p id="pID">Introductory paragraph</p>
<p>Contact Information</p>
  
<h1>Education History</h1>
<p id="myID">Detail about educational journey</p>

Output

Example Code 8: Styling using classes in internal/embedded CSS.

Note following points in this example.

• Dot (.) is used to define class-name.
• class keyword is used in HTML elements instead of id.
• Only first heading has font-size as 24px.
• Last paragraph as font-size as 24px.
• Only second paragraph has red color and black background-color.

Classes are used to apply styles. This method is highly suggested and mostly used.

<!--File: myFile.html-->
<style>
.pID{
    color: red;
    background-color: black;
}
.myID{
    font-size: 24px;
}
</style>
  
<h1 class="myID">Name</h1>
<p class="pID">Introductory paragraph</p>
<p>Contact Information</p>
  
<h1>Education History</h1>
<p class="myID">Detail about educational journey</p>

3. Styling Using External CSS

This method applies styles globally to multiple elements. All styles are applied in separate file having extension as .css

Example Code 9: There are two files. One is myFile.html and other is myStyle.css. Both files are place in same directory. Code for both files are shown below.

Note following points in this example.

1. The <link> tag is used to link myStyle.css file to current HTML file. It is writteni in header tag because this file is in our computer/server. If this file is in other’s computer/server, then it is suggested to write this link at bottom of HTML file.
2. The <link> tag is closed properly.
3. Output will be same as for previous example.

<!--File: myFile.html-->
<header>
    <link rel="stylesheet" href="myStyle.css" />
</header>
<h1 class="myID">Name</h1>
<p class="pID">Introductory paragraph</p>
<p>Contact Information</p>
  
<h1>Education History</h1>
<p class="myID">Detail about educational journey</p>

    /* File: myStyle.css */
.pID{
    color: red;
    background-color: black;
}
.myID{
    font-size: 24px;
}

Example Code 10: Repeat previous example but use IDs instead of classes in both files.

Note following points in this example.

1. we just replace dot(.) by hash(#) and class by id.

<!--File: myFile.html-->
  
<header>
    <link rel="stylesheet" href="myStyle.css" />
</header>
  
<h1 id="myID">Name</h1>
<p id="pID">Introductory paragraph</p>
<p>Contact Information</p>
  
<h1>Education History</h1>
<p id="myID">Detail about educational journey</p>

/* File: myStyle.css */
#pID{
    color: red;
    background-color: black;
}
#myID{
    font-size: 24px;
}

Preferences

Inline-CSS > Internal-CSS > External-CSS

If you style HTML element in multiple ways, then a method can override the other method’s property.

• Inline-CSS can override both internal and external CSS
• Internal-CSS can only overrise external CSS

Example Code 13: Multiple styles to multiple HTML elements are applied here.

Question 1: Why background-color for last paragraph is black, although p is styled as blue background-color?

Question 2: Why text-color for last paragraph is white, although there is no property in mStyle class?

<!--File: myFile.html-->
<style>
p{
    color: white;
    background-color: blue;
}
h1{
    color: red;
}
.mStyle{
    background-color: black;
}
</style>
  
<p>Web Development Using HTML and CSS.</p>
<h1>University of Gujrat.</h1>
<p class="mStyle">Computer Science</p>

Output

Example Code 14: Overriding internal CSS by inline-CSS

Question 1: Why background-color for last paragraph is red, although p is styled as blue background-color in internal CSS?

Question 2: Why text-color for heading is white, although there is no property in mStyle class?

<!--File: myFile.html-->
<style>
p{
    color: white;
    background-color: blue;
}
h1{
    color: red;
}
.mStyle{
    background-color: black;
}
</style>
  
<p>Web Development Using HTML and CSS.</p>
<h1 class="mStyle" style="color: white;">University of Gujrat.</h1>
<p style="background-color: red;">Computer Science</p>

Output

Example Code 15: Overriding external CSS by internal-CSS

Question 1: Why background-color for first paragraph is black, although p is styled as blue background-color in external CSS?

Question 2: Why text-color for heading is orange, although there is no property in mStyle class?

<!--File: myFile.html-->
  
<header>
    <link rel="stylesheet" href="myStyle.css" />
    <style>
        p{
            color: yellow;
            background-color: black;
        }
        h1{
            color: orange;
        }
        .mStyle{
            background-color: black;
        }
    </style>
</header>
  
<h1 class="myStyle">Name</h1>
<p>Introductory paragraph</p>
<p>Contact Information</p>
  
<h1 class="myStyle">Education History</h1>
<p>Detail about educational journey</p>

/* File: myStyle.css */
p{
    color: red;
    background-color: blue;
}
.myStyle{
    font-size: 24px;
}

Output

Example Code 16: Overriding both internal and external CSS by inline CSS

Question 1: Why background-color for first paragraph is green, although p is styled as blue background-color in external CSS and yellow in internal CSS?

Question 2: Why text-color for last heading is purple, although there is no property in mStyle class?

<!--File: myFile.html-->
  
<header>
    <link rel="stylesheet" href="myStyle.css" />
    <style>
        p{
            color: black;
            background-color: yellow;
        }
        h1{
            color: orange;
        }
        .mStyle{
            background-color: black;
        }
    </style>
</header>
  
<h1 class="myStyle">Name</h1>
<p style="background-color: green;">Introductory paragraph</p>
<p>Contact Information</p>
  
<h1 class="myStyle" style="color: purple; ">Education History</h1>
<p>Detail about educational journey</p>

/* File: myStyle.css */
p{
    color: red;
    background-color: blue;
}
.myStyle{
    font-size: 24px;
}

Output

:hover pseudo-class

In web development, hover refers to a user interaction where the pointer (usually a mouse cursor) is placed over an element without clicking it. The :hover pseudo-class in CSS allows developers to apply specific styles to an element when it’s hovered over.

Note: It cannot be applied using inline-CSS.

Example Cdoe 17:

<!--File: myFile.html-->
<style>
    p{
        background-color: #D8B08C;
    }
    p:hover{
        opacity: 70%;
    }
    .myParagraph:hover{
        opacity: 100%;
        background-color: #0F6466;
        color: white;
    }
</style>
  
<p>Hover Over Me</p>
<p class="myParagraph">New Paragraph</p>

Output

Important CSS Properties