HTML CSS
In this tutorial, we will learn about CSS ,CSS types and their implementation in HTML with the help of examples.
CSS
CSS stands for Cascading Style Sheets. CSS is a set of commands used to control the layout of various elements on web pages.
It describes how the HTML documents are displayed on browsers.
CSS saves a lot of time and work by providing easy and effective ways to specify various attributes for HTML tags.
Types of CSS
There are three types or ways to use CSS in HTML document :
- Inline CSS - By using style attribute inside HTML elements.
- Internal CSS - By using <style> element inside the <head> section of the HTML document.
- External CSS - By using <link> element to link an external CSS file with the HTML document.
Inline CSS
An inline CSS is specified within an HTML element using the style attribute.
It is used to apply style on a single HTML element.
Note : An inline CSS rule overrides the External CSS as well as Internal CSS rules.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color : blue;" >This is a simple paragraph.</p>
<h4 style = "color : red;">This is heading 4.</h4>
</body>
</html>Output
This is a simple paragraph.
This is heading 4.
Internal CSS
An internal CSS is specified within the <head> element of the HTML document. It is applied by using <style> element inside the <head> section.
An internal CSS is used to define a style for a single HTML document.
Note : Internal CSS rules override the External CSS rules.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
body {
background : black;
}
p {
color : yellow;
}
h4 {
color : red;
}
</style>
</head>
<body>
<p>This is a simple paragraph.</p>
<h4>This is heading 4.</h4>
</body>
</html>Output
This is a simple paragraph.
This is heading 4.
External CSS
An external CSS is used to define the style for many HTML pages with a single file. It is declared in an external file with extension .css.
External CSS is used by the <link> tag which should be placed in the head section of an HTML document.
When using an external Style Sheet, we can change the look of an entire website, by changing one file. The <link> element defines a link between a document and an external resource.
The <link> element contains three attributes :
| Attribute | Value | Description |
|---|---|---|
| rel | Stylesheet | It is used when using an external stylesheet on a webpage |
| type | text/CSS | It is used to declare the type of document we will attach |
| href | URL/name of file | Used to denote the location and name of the external stylesheet to be used |
Example :
index.html
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<p>This is a simple paragraph.</p>
<h4>This is heading 4.</h4>
</body>
</html>style.css
body {
background : black;
}
p {
color : yellow;
}
h4 {
color : red;
}Output
This is a simple paragraph.
This is heading 4.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of CSS in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Links.