/

Introduction to CSS: Enhancing Your Web Pages' Visual Appearance

Introduction to CSS: Enhancing Your Web Pages’ Visual Appearance

CSS (Cascading Style Sheets) is a language that plays a significant role in defining the visual appearance of an HTML page in a web browser. With its continuous evolution and the introduction of new features, CSS has become easier to use than ever before.

In this blog, we will cover the following topics:

What is CSS

CSS (Cascading Style Sheets) is a language used to style HTML files and instruct web browsers on how to render the elements on a web page. It emerged as a solution to the need for web page styling. In the past, web pages had a generic and academic appearance, lacking personalization options. HTML 3.2 tried to address this issue by introducing color definitions and presentational tags, such as center and font, but it resulted in an unsatisfactory situation.

CSS allowed developers to separate the presentation-related aspects of a web page from its underlying structure. With CSS, HTML became a format purely defining the document’s structure rather than how it should look in the browser. CSS continues to evolve, introducing new idiomatic techniques and keeping up with changes in browsers.

A brief history of CSS

Before delving deeper, let’s take a brief look at the history of CSS. CSS emerged as a solution to the limited customization opportunities in web pages. In the early days, web developers faced the challenge of building websites for different browsers such as Internet Explorer and Netscape Navigator, each introducing non-standard tags.

In 1996, CSS received its first release with CSS Level 1 (“CSS 1”). CSS Level 2 (“CSS 2”) followed in 1998. CSS Level 3, on the other hand, was split into separate modules, allowing features to be developed and implemented independently.

Implementing CSS in browsers was not always straightforward. For instance, Internet Explorer incorrectly implemented the box model, causing consistency issues across different browsers. Developers had to use various tricks and hacks to achieve their desired rendering.

Today, CSS standards have become more reliable, and CSS itself has become more powerful. Though CSS no longer has official release numbers, the CSS Working Group releases snapshots of stable and ready-to-use modules. CSS Level 2 remains the foundation of CSS styling, with many additional features built on top of it.

How does CSS look like

A CSS rule set comprises a selector and a declaration. The declaration consists of individual rules, each consisting of a property and a corresponding value. Here’s an example:

1
2
3
p {
 font-size: 20px;
}

In this example, p is the selector, specifying that the font size property should be set to 20 pixels for all <p> elements.

Multiple rules can be stacked one after another, like so:

1
2
3
4
5
6
7
p {
 font-size: 20px;
}

a {
 color: blue;
}

Selectors can target one or more items, including HTML tags (p, a), HTML elements with a certain class attribute (.my-class), or HTML elements with a specific id attribute (#my-id).

Advanced selectors allow you to choose items based on attribute values or pseudo-classes.

Semicolons

Each CSS rule must be terminated with a semicolon. Although the semicolon is optional after the last rule within a declaration, it is recommended to always include it for consistency and error prevention.

Formatting and indentation

While there is no fixed rule for formatting, it is essential to adhere to conventions that enhance code readability. For example:

1
2
3
4
5
6
7
p {
 font-size: 20px;
}

a {
 color: blue;
}

Maintaining consistent spacing and indentation aids understanding code structure.

How do you load CSS in a Web Page

CSS can be loaded in a web page using three methods: through the link tag, the style tag, or inline styles.

The link tag is the recommended way to include a CSS file in a web page. By linking one CSS file to multiple pages, changing that file will affect the presentation of all pages across the site. To use this method, add a link tag within the head tag of the HTML document:

1
<link rel="stylesheet" type="text/css" href="myfile.css">

The rel and type attributes are necessary as they inform the browser of the file type being linked.

2: Using the style tag

The style tag allows CSS to be added directly within the HTML document. This can be useful for experimenting or adding specific CSS rules to individual pages. The syntax is as follows:

1
2
3
<style>
...our CSS...
</style>

3: Inline styles

Inline styles offer a way to add CSS directly to specific HTML elements. This can be achieved by using the style attribute:

1
<div style="">...</div>

For example:

1
<div style="background-color: yellow">...</div>

Using the style attribute, you can customize the appearance of individual elements on a web page.

tags: [“CSS”, “web development”, “coding”, “front-end development”]