How to Add CSS to HTML
What is CSS?
CSS stands for Cascading Style Sheets. CSS is used to design a webpage. With the help of CSS we can control the color, font and the size of the text. We will learn more about CSS in upcoming articles.
Adding CSS to HTML documents
We can add CSS
to HTML documents in three ways:
- Inline
- Internal
- External
Inline CSS
Inline CSS
is used to style a single HTML Element.
In Inline CSS, we use the style attribute inside the particular element to style it.
In an Example below we will set the text color of the <h3> element to red, and the background color of the <p> element to green:
Example
<html> <head> </head> <body> <h3 style="color:red;"> A red heading </h3> <p style="background-color:green;"> A paragraph with green background </p> </body> </html>
Internal CSS
Internal CSS is used to define a style for a specific or for a whole html page
.
We have to add <style> element in the <head> section of the html page to define an Internal CSS.
In an Example below we will set the text color of all the <p> elements to blue, and the background color of the whole html page to green.
Example
<!DOCTYPE html> <html> <head> <style> body {background-color:green;} p {color:blue;} </style> </head> <body> <h1>This is a normal heading</h1> <p>This is a paragraph.</p> </br> <p>This is also a paragraph.</p> </body> </html>
External CSS
An External CSS style sheet is used to define a style for one or more htm pages.
We can use external CSS by adding it’s link in the <head> section of html page.
The external CSS style sheet can be written in an Text Editor. The file must be saved with .css
extension and must not contain html code.
Below in an Example I have showed you how you can add external CSS style sheet to any HTML Page:
Example
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>This is a normal heading</h1> <p>This is a paragraph.</p> </br> <p>This is also a paragraph.</p> </body> </html>
Summary
- CSS stands for Cascading Style Sheets.
- We can add CSS to HTML documents in three ways: Inline, Internal, External.
Inline CSS
is used to style a single html element, by adding style attribute inside that particular element.- Internal CSS is used to define a style for a whole html page, by adding <style> element inside the <head> section.
- An External CSS style sheet is used to define a style for one or more html pages, by adding external style sheet’s link inside the <head> section.
Related Posts
HTML Inline and Block Elements
12 thoughts on “How to Add CSS to HTML – crus4”