There are three ways to add CSS in the HTML document, and they are as follows:
- Using Internal CSS
- Using External CSS File (.css extension)
- Using Inline CSS
In this tutorial, you will learn how to add CSS in HTML using these 3 ways.
Adding Internal CSS
Internal CSS defines a unique style for a single HTML page inside the head section, inside the <style> element of a web page. This CSS can’t change the entire look of a website easily as adding code to HTML document can increase the page’s size and loading time because we need to specify styles on every page. Internal CSS can style on elements with class and ID selectors. It may have higher precedence than external CSS.
How to add an internal CSS in an HTML file?
This CSS consists of a declaration block, which can be a set of one or more declarations separating each one with a semicolon containing property/value pairs for styling an element.
The following is an example to transforms and sets the font size of a text in <font> element.
Example-1
This example transforms a text to uppercase, lowercase, and capitalizes the first letter of each word on <font> element and font size to 40 pixels with class selectors a, b and c.
<!DOCTYPE html>
<html>
<head>
<style>
.a{
text-transform:uppercase;
font-size:40px;
}
.b{
text-transform:lowercase;
font-size:40px;
}
.c{
text-transform:capitalize;
font-size:40px;
}
</style>
</head>
<body>
<font class="a">C++ is an Object Oriented Programming Language</font>
<br>
<font class="b">C++ is an Object Oriented Programming Language</font>
<br>
<font class="c">C++ is an Object Oriented Programming Language</font>
</body>
</html>Example-2
Sets the margin on four sides of a paragraph <p> element to 100 pixels in an HTML document.
<html>
<head>
<style>
p{
font-size:50px;
margin:100px;
}
</style>
</head>
<body>
<p>This is a sample paragraph.</p>
</body>
</html>Adding External CSS
External CSS is a .css extension file containing only CSS syntax and a MIME type of “text/css” that is linked with a web page. An external CSS can be created once, but its rules can be applied to many web pages. This makes changes the entire look of a website. So it creates more efficient CSS for styling a large website.
Uploading and linking to multiple CSS files can increase the website’s download time. This creates a disadvantage.
How to add an external CSS in an HTML file?
External CSS is linked with an HTML file through <link> tag inside the head section.
Now a.css file with some CSS rules is linked into an HTML document b with <link> tag.
Example-1
This example is specifying the background color of <body> element to navy. Applying text color and setting left margin on <h1> element to yellow and 20 pixels.
File: a.css
body{
background-image:navy;
}
h1{
color:yellow;
margin-left:20px;
}File: b
Here <link> element contains three attributes (rel, type and href) to define the relationship between the linking document and the current document. To specify the Internet media type (known as a MIME type, MIME stands for Multipurpose Internet Mail Extensions), which indicates that the linking content is CSS and href specifies the location of the external style sheet file.
<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<h1>The capital of India is Delhi</h1>
</body>
</html>Adding Inline CSS
Inline CSS defines a unique style of a single HTML element. This is applied inside the body section attached with an element by using style attribute with property/value pairs by separating each one with a colon. Multiple CSS property/value pairs can be applied by separating each one with a semicolon for styling an element within the style attribute.
Professional Web developers do not use Inline CSS due to time-consuming matter, but it is applied to email HTML, dynamic content ( an HTML document with applying JavaScript codes), etc.
The following are the examples of Inline CSS.
Example-1
This example specifies paddings for four sides of <font> element to 20 pixels with a dashed green border around the element and text color to blue.
<html>
<body>
<font size=7 style="color:blue;">
Monday comes after Sunday
</font>
<br><br>
<font size=7 style="border:10px dashed green;padding:20px;">
Sunday comes after the end of a Week
</font>
</body>
</html>Example-2
Adding rounded corners to two <p> elements.
Here border-radius specifies the radius of element's corners to 15 pixels with a red and green colored solid borders around the <p> element.
<html>
<body>
<p style="font-size:30px;border-radius:15px;border:5px solid red;">
C Programming Language invented after B language.
</p>
<br><br>
<p style="font-size:30px;border-radius:15px;border:5px solid green;">
C++ Programming Language is an Object oriented Programming Language.
</p>
</body>
</html>Example-3
This example set opacity levels, background color, width and height to <div> elements.
Opacity level is specifying the transparency level to 1, .7, .5, .3 and .1 on <div> elements. 1 is the highest transparency level, and 0 is the lowest transparency level that can make an element fully transparent.
<!DOCTYPE html>
<html>
<body>
<div style="background-color:green;width:100%;opacity:1;height:100px;">
opacity:1
</div>
<div style="background-color:green;width:100%;opacity:.7;height:100px;">
opacity:.7
</div>
<div style="background-color:green;width:100%;opacity:.5;height:100px;">
opacity:.5
</div>
<div style="background-color:green;width:100%;opacity:.3;height:100px;">
opacity:.3
</div>
<div style="background-color:green;width:100%;opacity:.1;height:100px;">
opacity:.1
</div>
</body>
</html>
