CSS (Cascading Style Sheets) in HTML is used to style the design and layout of multiple web pages simultaneously, thus reducing the amount of work required.
Using CSS, you can customize various aspects such as color, font, text size, positioning and layout of elements, background images or colors, etc.
You can also create different displays for various devices and screen sizes by using CSS (CSS Media Queries).
In CSS, the styles applied to a parent element are also applied to all its children elements. For example, if you apply the "blue" font color to the body element, it will apply the same blue color to all its children text elements, unless you specify a different color for them.
How to Include CSS
CSS can be included in HTML documents in three ways:
- Inline: By using the
styleattribute inside HTML elements. - Internal: By using a
<style>element in the<head>section of the HTML document. - External: By using a
<link>element to link an external CSS file.
The most common practice is to use external CSS files for styling.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element by using the style attribute. For example, in the below code we are setting the text color of an <h2> and a <p> element to "blue" and "red" respectively:
<h1 style="color:blue;">This is a blue Heading</h1>
<p style="color:red;">This is a red paragraph.</p> Internal CSS
Internal CSS is used to apply a style to the whole HTML page, which is done by using the <style> element, by placing it within the <head> section of the HTML page.
For example, the below code will set the text color of all the <h1> elements on the page to "blue" and the text color of all the <p> elements to "red".
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<h1>This is another heading</h1>
<p>This is another paragraph.</p>
</body>
</html> External CSS
An external CSS is used to specify the style for multiple HTML pages, which is inserted in HTML pages by using the <link> tag in the <head> section.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<h1>This is another heading</h1>
<p>This is another paragraph.</p>
</body>
</html> An external CSS file can be created using the same CSS codes by using any text editor. It should not include any other code except the CSS code and should use the CSS extension.
In case of the above examples, the content of the "styles.css" file should be:
h1 {
color: blue;
}
p {
color: red;
}This is very helpful in changing the styling of an entire web site, by changing one file, because we will not need to edit every web page to edit the CSS in this case.
CSS Property Examples
Some commonly used CSS properties are:
The CSS color property defines the text color: p {color:blue;}
The CSS font-family property defines the font family: p {font-family: verdana;}
The CSS font-size property defines the text size: p {font-size: 20px;}
The CSS border property defines the element border: p {border: 1px solid #ccc;}
The CSS padding property defines the space between an HTML element content and border:
p {
border: 1px solid #ccc;
padding: 10px;
}The CSS margin property defines the space outside the border of an element.
p {
border: border: 1px solid #ccc;
margin: 20px;
}External style sheets can also be referenced with a full URL or with a path relative to the current web page.
<link rel="stylesheet" href="https://www.webmastermaze.com/html/styles.css">
<link rel="stylesheet" href="styles.css">More CSS properties will be discussed in our CSS Reference Guide.
Please check below options for the links to our previous or next tutorial.