CSS Getting Started

A CSS file is essentially a plain text document with a .css file extension.

Getting Started with CSS

In this article, we will explore how easy it is to utilize CSS for adding style and formatting to web pages. However, before we delve into it, it's important to have a good understanding of HTML.

If you're new to web development, you can start learning right away by diving into the subject.

Now, let's begin our journey into Cascading Style Sheets (CSS) without any further delay.

Including CSS in HTML Documents

CSS can be applied either as a separate file or directly integrated into the HTML content. Within an HTML document, there are three ways to include CSS:

Inline styles - These are created using the style property within the HTML start tag, allowing you to add style directly to an element.
Embedded styles - These styles are applied to the document's head section using the style element.
External style sheets -The link element is used to reference an external CSS file.

In this article, we will discuss each of these techniques for injecting CSS, one by one.

Note: It's important to note that external style sheets have the lowest precedence, while inline styles have the highest. This means that if conflicting style rules for an element are declared in both embedded and external style sheets, the rules from the embedded style sheet will take precedence over the external style sheet.

Inline Styles

Inline styles are used to add style rules directly to an element by inserting CSS rules within the start tag. The style property is used to associate it with the element.

The style attribute includes a set of CSS "property: value" pairs, separated by semicolons (;), just like in embedded or external style sheets. However, it must be written on a single line without line breaks.

<body>
	<h4 style="color:red; font-size:30px;">This is heading</h4>
	<p style="color:green; font-size:22px;">This is first paragraph.</p>
	<div style="color:blue; font-size:14px;">This is next paragraph</div>
</body>

Try this code

Using inline styles is generally discouraged because it intermingles the appearance of the page with the document's content, making the code harder to maintain and defeating the purpose of CSS.

Note :- Furthermore, inline styles cannot be used to style pseudo-elements and pseudo-classes, so it's advisable to avoid using style attributes in your code. The preferred method for adding styles to HTML is by using external style sheets.

Embedded Style Sheets

Internal style sheets, also known as embedded style sheets, only affect the document in which they are embedded.

To declare embedded style sheets, the style element is used within the head section of an HTML document. You can have multiple style elements in an HTML page, as long as they are placed between the head and /head tags.

Tip: The language of the style sheet is defined by the type property of the style and link tags (e.g., type="text/css").

<html lang="en">
<head>
<style>
    body { background-color: purple; }
    p { color:skyblue; }
</style>
</head>
<body>
    <h4>The Heading</h4>
    <p>This is a paragraph.</p>
</body>
</html>

Try this code

External Style Sheets

When a style needs to be applied across multiple pages on a website, an external style sheet is ideal.

An external style sheet is a separate document that contains all the style rules and can be linked from any HTML page on your site. External style sheets offer great flexibility, as modifying just one file can change the appearance of an entire website.

There are two ways to attach external style sheets: linking and importing.

Linking External Style Sheets

Before linking, you need to create a style sheet. Open your preferred code editor, create a new file, write the CSS code below, and save it as "style.css".

Example :- A sample stylesheet file "sample.css"

body {
    background: lightyellow;
    font: 18px Arial, sans-serif;
}
h4 {
    color: orange;
}

The link element is used to connect an external style sheet to an HTML document. It is placed within the head section, as shown in the example.

Example :- A sample html file "sample.html"

<html lang="en">
<head>
	<link rel="stylesheet" href="sample.css" />
</head>
<body>
    <h4>This is a heading</h4>
    <p>This is a paragraph.</p>
</body>
</html>

Try this code

Tip: The recommended approach for creating and applying styles to HTML is to use external style sheets. This method requires only minor markup adjustments in the HTML file, as demonstrated by the use of external style sheets.

Importing External Style Sheets

Another way to load an external style sheet is by using the @import rule. This rule instructs the browser to load and utilize an external style sheet.

The @import rule can be used in two ways. The simplest method is to place it in the document's header. Keep in mind that other CSS rules can still be included within the style element. Here's an example:

<head>
	<meta charset="utf-8">
    <title>CSS Imported Style Sheet</title>
    <style>
        @import url("style.css");
        p {
            color:green;
            font-size:20px;
        }
    </style>
</head>

Try this code

Similarly, the @import rule can also be used to import a style sheet into another style sheet.

<head>
<style>
    @import url("layout.css");
    @import url("color.css");
    body {
        color:green;
        font-size:20px;
    }
</style>
</head>

Try this code

Note :- All @import rules should be included at the beginning of the style sheet. Any style rules defined within the style sheet will take precedence over conflicting rules in the imported style sheets. However, importing a style sheet into another style sheet is not recommended due to performance issues.

All Tutorials