Before start with how to link CSS with HTML,
Let’s have a look at: What is CSS?
Full form of CSS stands for Cascading Style Sheets (CSS) which is used to format the layout of a webpage.
With the help of CSS, someone can control the color, font, the size of text, the spacing between elements and also how elements are positioned and laid out, what background images or background colors to be used, different displays for different devices and screen sizes, and so many more as well.
Types of CSS:
So there are three ways to add CSS to HTML documents :
- Inline – by putting the style attribute inside HTML elements
- Internal – by putting a <style> element in the <head> section
- External – by adding a <link> element to link to an external CSS file
The most common and used way to add CSS, is to have the styles in external CSS files.
Inline CSS
An inline CSS can be used to apply a unique and also different style to a single HTML element.
An inline CSS has the style attribute of an HTML element.
Now put the text color of the <h1> element to red, and the text color of the <p> element to blue:
<h1 style="color:red;">A Blue Heading</h1>
<p style="color:blue;">A red paragraph.</p>
Internal CSS
An internal CSS can be used to define a style for a single HTML page.
An internal CSS is used to define in the <head> section of an HTML page and also within a <style> element.
Now let’s have an example of the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red.
The page will be displayed with “powderblue” background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
External CSS
An external style sheet concept is normally used to define the style for many HTML pages.
In order to start using an external style sheet, put a link to it in the <head> section of each HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
