What is CSS | Introduction to CSS for Beginners

CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the appearance of a document written in markup language such as HTML5. It defines how HTML elements should be displayed on screen, on paper, or in other media.

Cascading style sheets or CSS is a very powerful tool that transforms the appearance of an HTML document or a collection of documents. It is easy to learn and understand, yet it provides a powerful control over the presentation of an HTML document or website. It allows you to customize the look and feel of your site with great precision and flexibility.

With CSS, we can control

Text color
Font styles
Spacing between paragraphs
Background colors and images
The size and layout of HTML elements
And a variety of other visual effects

In simple words, the CSS allows us to control the position and format of HTML elements on a webpage, enhancing the overall user experience.

One of the major advantages of using CSS is that we can use the same CSS for more than one page. It means that we can control the style of the entire website without having to change each page individually. In other words, we can adjust the layout of multiple web pages all at once. Thus, the CSS simplifies website design and development by saving a lot of work.

The most common use of CSS is to style webpages. However, it becomes a powerful tool when used in combination with HTML and JavaScript, enabling the creation of dynamic and interactive websites.

Brief History of Cascading Style Sheets (CSS)

During the mid-1990s, HTML was only the option to present a webpage. At that time, style sheets were not a new invention. Actually, style sheets were part of the plan from the beginning of HTML in 1990.

In 1994, Tim Berners-Lee invented the World Wide Web Consortium. A few days later, Håkon Wium Lie released his first draft of Cascading HTML Style Sheets (CHSS). In April 1999, he joined the Opera Software as CTO in Oslo, Norway. At that time, he was working at CERN with Tim Berners-Lee and Robert Cailliau. CHSS became CSS because CSS can be applied not only limited to HTML.

After that, the CSS (Cascading Style Sheets) has regularly evolved over the years. Several modules have been included within each version. A brief summary of the features and changes introduced in CSS1 to CSS3, as well as the ongoing developments in CSS4 and CSS5, is as follows:
[adinserter block=”5″]

CSS1 (1996):

In December 1996, the World Wide Web Consortium (W3C) had released the first version of CSS known as CSS level 1.
Introduced basic style properties like fonts, text, colors, backgrounds, and element spacing.
Introduced the concept of selectors for defining which elements to style.

CSS2 (1998):

In 1998, W3C released CSS2, an extended version of CSS1.
In CSS2, there were added more complex features such as absolute, relative, fixed positioning, z-index, and media types (for different devices like screen, print).
Improved support for styling tables and forms.
Introduced the concepts of pseudo-classes and pseudo-elements to target specific HTML elements more precisely in CSS2.

CSS2.1 (2011):

CSS2.1 was a refined version of CSS2, published as a recommendation in 2011.
It clarified and removed some features from CSS2 that were either not widely implemented.
Standardized box model properties to improve cross-browser compatibility.
CSS2.1 version became the stable and widely used standard for many years.

CSS3 (2011-Present):

This is the fourth version of CSS, called CSS level 3, published around 2011.
CSS3 introduced a modular approach, which breaks the language into separate modules so that they could be developed and updated independently.
It added several new features, like gradients, multiple background images, rounded corners, shadows, gradients, transitions, animations, and flexible box layouts (Flexbox).
Added advanced selectors like attribute selectors and :nth-child pseudo-class.
Introduced box model to enhance with properties like box-sizing.
Features for web fonts (e.g., @font-face) and text shadows have been introduced.
Supported new color formats (e.g., rgba(), hsl()) and property like opacity.
Introduced grid-based layout with the display: grid property.
Supporting for multi-column text layout.
Introduced media queries to enable responsive design of webpages across different screen sizes of devices.

CSS4 (Ongoing):

The term “CSS4” is not officially used, but the CSS continues to evolve with new modules and updates.
Several new modules and features are still in development and may improve to existing modules and features.

Defining Cascading and Style in CSS

The term “Cascading” in Cascading Style Sheets refers to a set of principles that tells browsers to determine which styles to apply to a specific portion of the web page. This method is called cascade, and CSS takes its first name from the cascade.
[adinserter block=”2″]
A style is a rule that defines the visual aspect of an HTML element on a webpage. In other words, a style rule is a formatting instruction that tells browsers how to format something on a webpage. For example, create a red border around an image, add a drop-shadow to the box, create gradients, and so on.

Components of Style Rule

A style rule in CSS consists of several components, which together define how HTML elements are formatted and displayed on a webpage. These components include:

Selector
Declaration block
Declaration
Property
Value

Selector: It identifies or chooses an HTML element(s) you want to style in an HTML document. It tells the browser which element(s) on a page to style. Selectors can target elements by their tag name, class, ID, attribute, and more. For example, p, .classname, #idname.

Property: The properties in CSS specify various formatting options for styling HTML elements. Each property can be represented by a single word or a few hyphenated words, such as font-size, list-style-type, overflow, and so on.

Value: Each property is assigned a specific value, such as red for the color property, 16px for the font-size property, or 10px for the margin property.

Declaration: Between an opening and closing curly braces, we can add one or more declarations. Every declaration consists of two parts: a property and a value separated by a colon (:). Each declaration ends with a semicolon. For example, color: red; or font-size: 16px;.

Declaration Block: A group of one or more declarations enclosed in curly braces {} is a declaration block. This block is associated with a selector.

Simple CSS Example

Let’s take a very simple example in which we will set the font color and the font size for all paragraphs on a web document. For this, we can write the following CSS rule like this:

Example 1:

p {
  color: red;
  font-size: 16px;
}

The above style rule tells the browser that change the color of the text in all paragraphs to red and set the size of the text to 16 pixels. In the above example, p is a selector, whereas color: red; and font-size: 14px; are two declarations. In the first declaration, color is property and red is value.

In the second declaration, font-size is property and 14px is value. The area inside { and } is called a declaration block. To make CSS more readable, always put declaration on each line.

Example 2:

h1 {
  color: blue;
  font-size: 24px;
}
In this example:

h1 is the selector, which targets all <h1> elements on the webpage.
Inside the curly braces {}, there are two declarations:
- color: blue; sets the text color of the <h1> elements to blue.
- font-size: 24px; sets the font size of the <h1> elements to 24 pixels.

Together, this rule set specifies that all <h1> elements should have blue text and a font size of 24 pixels on the HTML document.

Defining Style Sheets

We can include CSS styles directly in a head section of an HTML document or in a separate stylesheet file. In either case, the set of CSS style rules is called a style sheet. The term style sheet refers to a CSS file, which consists of a number of style rules.

Style sheets provide a more convenient way to separate style from content when you are maintaining a large website. It provides us flexibility to easily redesign or rebrand a website.

For example, if you want to use a different background color on all the webpages of the site, you can make one change to the CSS style sheet to automatically update every page. It not only saves a lot of time but also provides less maintenance for another web developer and yourself.

When we place style rules directly within an HTML document or web page, then it is called an internal stylesheet. On the other hand, when we place style rules in a separate document and linked to an HTML document through a special tag, it is called an external stylesheet.

When we apply a unique style to a single HTML element, it is called inline CSS. It is done using the style attribute within the HTML tag. For example:

<!DOCTYPE html>
<html>
<body>
    <h1 style="color: blue; font-size: 24px;">Welcome to Scientech Easy</h1>
    <p style="color: green;">Best CSS tutorial.</p>
</body>
</html>

Moreover, the style rules in CSS form a hierarchy in which more specific styles override more general styles. It is the responsibility of the CSS to determine the precedence of style rules according to this hierarchy, which establishes a cascading effect.

The order of precedence for CSS rules, from highest to lowest, is as follows:

Inline CSS
Internal CSS (i.e. Internal stylesheet)
External CSS (i.e. External stylesheet)

What CSS Can Do

You can use CSS to change anything from the styling of text to the layout of the page. You can also combine CSS with JavaScript to produce dynamic presentation effects.

Text Formatting and Colors

You can use CSS to produce a variety of text effects by setting properties on text, such as

Choosing specific fonts and font sizes.
Setting bolds, italics, underlines, and text shadows.
Changing text color and background color.
Transforming the colors of links or removing underlining.
Indenting or centering text.
Adjusting text size and line spacing.
Changing sections of text to upper-, lower-, or mixed-case and many more.

All of these effects are achieved by creating CSS rules by setting properties on text. We will understand all these text effects in further tutorial one by one with various examples.

Graphical Appearance and Layout

You can also use CSS to change the look of the entire web page. Some things you can do with CSS to affect the graphical layout of the page include:

Setting a background graphic and controlling its location, tiling, and scrolling.
Add borders and outlines around sections of a page
Specify vertical and horizontal margins for all elements or for specific elements.
Specify vertical and horizontal margins for the web page.
Wrap text around images or other elements.
Positioning sections of the page in precise locations on the virtual canvas.
Styling tables and lists.
Layering page elements in a specified order.

Dynamic Actions

Dynamic effects in Web design are those that are interactive, changing in response to being used. CSS lets you create interactive designs that respond to the user, such as

Change the appearance of links when hovered over with the mouse.
Insert content dynamically before or after HTML tags using CSS pseudo-elements.
Automatic numbering of page elements.
Combining CSS with JavaScript to create fully interactive designs, commonly known as Dynamic HTML (DHTML).

Advantages of Using CSS

There are the following advantages of using cascading style sheets (CSS) in web development. They are as:

(1) Cascading style sheets allow us to separate the structure of an HTML document from its presentation. This is because we can write the CSS code independently of HTML, which makes it easier to manage and update styles without altering the HTML structure.

(2) We can use the same CSS file across multiple HTML webpages, ensuring consistent styling and reducing redundancy.

(3) CSS reduces the code duplication. We can avoid the repeating of the same style rules in multiple places by centralizing styles in one or more CSS files.

(4) Style sheets download much more quickly because web documents using CSS commonly consume less bandwidth.

(5) Browsers use a feature called caching, which caches external CSS files to load page faster for subsequent visits. A cache is a process by which a web browser downloads a CSS file only once, and does not request that file from the web server again unless it has been updated. This cached file provides the potential for lighting-fast performance to your website.

(6) With CSS, we can precisely control over the layout, design, and appearance of web elements. We can style individual elements or groups of elements with ease.

(7) CSS supports advanced features like animations, transitions, and responsive design, allowing to create more dynamic and interactive web pages.

(8) We can provide a uniform appearance across all web pages using CSS. This is especially important for branding and user experience.

(9) Cascading style sheet file is easy to update. If you need to update the website’s design, you can update the style sheet file, and the changes will automatically apply to all HTML pages of the website linked to that style sheet.

(10) Style sheet makes it easier to create a responsive design of website for more than one type of devices, such as desktops, tablets, and smartphones.

These advantages make cascading style sheets a powerful and essential tool in modern web development, enhancing the efficiency, performance, and quality of websites.