If you're new to web development, you'll find it surprisingly simple to add style and formatting to your web pages using CSS. However, it's important to have a basic understanding of HTML before diving in.
If you're just beginning your journey into web development, start learning HTML here »
Now, without further delay, let's explore the world of Cascading Style Sheets (CSS).
CSS can be incorporated into HTML documents in three different ways:
style attribute.<style> element in the document's <head> section.<link> element.In this tutorial, we will cover all these three methods for inserting CSS one by one.
Note: Inline styles have the highest priority, and external style sheets have the lowest. This means that if you specify styles for an element in both embedded and external style sheets, the conflicting style rules in the embedded style sheet would override those in the external style sheet.
Inline styles are used to apply unique style rules to an element by placing the CSS rules directly into the start tag. They can be attached to an element using the style attribute.
The style attribute contains a sequence of CSS property and value pairs. Each "property: value" pair is separated by a semicolon (;), just as you would write in embedded or external style sheets. However, they need to be all in one line without line breaks after the semicolons, as shown here:
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>Using inline styles is generally considered bad practice. Embedding style rules directly within HTML tags mixes presentation with content, making the code harder to maintain and defeating the purpose of using CSS.
Note: It's impossible to style pseudo-elements and pseudo-classes with inline styles. It's recommended to avoid the use of style attributes in your code. Using external style sheets is the preferred way to add styles to HTML documents.
Embedded or internal style sheets solely impact the document in which they are embedded.
Embedded style sheets are defined in the <head> section of an HTML document using the <style> element. You can include any number of <style> elements in an HTML document, but they must appear between the <head> and </head> tags. Let's take a look at an example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Tip: The type attribute of the <style> and <link> tags (e.g., type="text/css") specifies the language of the style sheet. However, since CSS is the standard and default style sheet language in HTML5, this attribute is purely informative and can be omitted.
An external style sheet is perfect when you want to apply the same style across many pages of your website.
It's like having a rulebook for how your website should look, and you can keep this rulebook separate from your HTML files. This way, you can link to it from any HTML file on your site. External style sheets are super flexible because you can change the appearance of your entire website by just tweaking one file.
You've got two ways to attach external style sheets — linking and importing.
Before you link, you need to create a style sheet. Open your favorite code editor, create a new file, and paste in your CSS code. Save this file as "style.css".
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}You can link an external style sheet to an HTML document using the <link> tag. Place this <link> tag inside the <head> section, just like in this example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Tip: Out of all the methods, using an external style sheet is the best way to define and apply styles to HTML documents. When using external style sheets, you'll notice that the HTML files require minimal changes in the markup.
Another way to load an external style sheet is using the @import rule. This rule tells the browser to load an external style sheet and use its styles.
You can do this in two ways. The simplest method is to include it within the header of your document. Other CSS rules can still be included in the <style> element. Here's an example:
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>Similarly, you can use the @import rule to import a style sheet within another style sheet.
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}
Note: All @import rules must occur at the start of the style sheet. Any style rule defined in the style sheet itself overrides conflicting rules in the imported style sheets. However, importing a style sheet within another style sheet is not recommended due to performance issues.