Add CSS into HTML
So let's have our first look at Cascading Style Sheets. As you probably already know, all programming languages have their own syntax, and while HTML and CSS aren't exactly programming languages, they do have their own syntax.
CSS syntax is not much of a trouble. CSS rules are defined as a property name followed by a colon and then a property value followed by a semicolon. Individual rules are terminated by semicolons, with the final rule having an optional semicolon. Phew! Let's look at this sentence more closely.
property: value; property: value;
Generally, there are three ways to add CSS in the HTML document, these are:
- Inline CSS
- Internal or Embedded CSS
- External CSS
Inline CSS
The inline CSS is the quickest way to provide styling to any HTML tag. It is used when you want to set the styling properties for any single HTML tag. To set the CSS properties inline, you have to add the style attribute within the opening HTML tag. Then, you have to add the CSS property in the form of property: value; pair.
Syntax of inline CSS
<p style="background-color: yellow;">Welcome to Studytonight.</p>
Example: Specifying inline CSS
In this example, we have created a paragraph using <p> tag and then set the background-color to yellow using the inline CSS.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="background-color: yellow;">Welcome to Studytonight.</p>
</body>
</html>
Output:
Internal or Embedded CSS
The inline CSS is the quick and effective way to style any HTML tag but it has some limitations also such as if you want to set the same styling for two different paragraphs. Then you have to add the same inline styling to each paragraph separately. To overcome this problem the embedded CSS was introduced.
The embedded CSS is used to set the same styling properties for multiple HTML tags. It provides the dedicated space within the HTML document for writing the CSS properties.
To set the CSS properties using embedded or internal CSS, you have to first add the opening and closing <style> tag. The <style> tag must be placed in between the opening and closing <head> tag. All the CSS styling properties can be written in between the opening and closing <style> tag.
Syntax of internal or embedded CSS
<head>
<style>
p{
background-color: yellow;
}
</style>
</head>
Example: Specifying internal CSS
In the given example, we have created a heading using <h1> tag and a paragraph using <p> tag. Then set the CSS styling properties using the internal CSS method. We have set the text color of the heading to red. For the paragraph, we have set the background-color to yellow and font-size to 20px.
<!DOCTYPE html>
<html>
<head>
<title>External or Embedded CSS</title>
<style>
h1{
color: red;
}
p{
background-color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Studytonight</h1>
<p>Welcome to Studytonight.</p>
</body>
</html>
Output:
External CSS
The external CSS is used when the CSS code is very lengthy or the developer doesn't want to put both codes (HTML and CSS) in a single file. This will also improve the readability of the code.
To create an external CSS file, you have to first save the file with a .css file extension. Then, you have to link that CSS file to the HTML file with the help of the <link> tag. The <link> tag can be placed in between the opening and closing <head> tag.
Example: Specifying external CSS
In the given example, we have created two files one is an HTML file having a .html extension and the second is a CSS file having a .css file extension.
External.html file
This file consists of HTML code only.
<!DOCTYPE html>
<html>
<head>
<title>External or Embedded CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Studytonight</h1>
<p>Welcome to Studytonight.</p>
</body>
</html>
style.css file
This file consists of CSS code only.
h1{
background-color: yellow;
}
p{
color: red;
font-size: 20px;
}
Output:
Conclusion
In this lesson, we have learned how to specify the CSS within the HTML document. There are three ways to specify the CSS in an HTML document which are given below:
- Inline method
- Internal or embedded method
- External method
