CSS Introduction - Basics, Working, And Advantages

1. Introduction To CSS Language

This CSS introduction tutorial is helpful for those who have learned HTML language and are thinking about the next step in web design. The tutorial covers the basics of CSS, including what it is, how to write CSS declarations, and how web pages can become more appealing after implementing CSS stylesheets. It's important to note that CSS is the fundamental building block of a web page, so it's recommended to learn some basics of HTML beforehand.

1.1. What is CSS

• CSS stands for Cascading Style Sheets
• CSS enhances the presentation of HTML markup
• A web page looks ugly without any styling, and therefore CSS declarations play their role
• CSS selectors capture each element on a web page and apply style declarations
• We can design every pixel on the screen or web page using CSS language
• CSS has become a vital component of web design thanks to its versatility and power to improve the visual appeal of HTML elements

1.2. Is CSS a Programming Language?

• Well, many noobs ask the same question for HTML and certainly, both of them are not programming languages.
• First of all, HTML is a markup language and it just specifies the structure of a web page.
• HTML contains different varieties of HTML tags that behave like the blocks in a building.
• Secondly, a developer combines these HTML elements systematically to develop the structure of a document.
• Yet, the web page still wants something to make it classy and presentable.
• Eventually, CSS helps HTML in increasing the aesthetics of the web page.
• Therefore, the presentation of a web page is completed after implementing CSS styles.

1.3. Need for CSS Language

• Back in the 90s, when HTML was initially documented, it empowered the scientists and researchers at CERN Lab to share their documents with their associates.
• Also, apart from sharing the documents, they were able to link the documents and make headings, tables, etc.
• But it was just related to the structure of documents, and the presentation or styling was not involved.
• Hence, the need to style documents appeared after the developers constantly saw simple web pages.
• Therefore Cascading Style Sheets or CSS language evolved as a result in 1996.
• Depending on the HTML content of the web pages, CSS is enriched with very wonderful characteristics.
• These features include the designing of every HTML element according to needs.

2. What are the Basics of CSS?

The next section of this intro tutorial is to learn some basics of CSS. The following list aims to provide beginners with a clear understanding of the fundamentals or core features of CSS language. Every web designer must remember these basics as they form the building blocks of CSS.

2.1. Basics of CSS Language

Following are some basics that the new learners need to keep in mind:

• First thing first, CSS is the key to styling web pages
• Secondly, CSS is a short form of Cascading Style Sheets
• Importantly, CSS defines the rules for HTML elements and these rules improve the visibility and aesthetics of the web page elements
• Also, CSS can save a lot of time, since it has the feature of reusability
• We can use the same style declarations and stylesheets for multiple web pages, even multiple or millions of websites at once
• All browsers support CSS style sheets
• The filename extension for CSS is .css
• Above all, CSS is a remarkable addition to web technology and took it to a whole new level

3. How Does CSS Work?

Now, the next part of this CSS introduction tutorial is to explore how CSS works and how it applies styling to the HTML markup. The following CSS style declarations select a div and h4 element to implement the desired styles. We use curly braces {..} to define CSS style declarations.

3.1. CSS Basic Example

div{
	background: #d3ffed;
	padding: 20px;
	box-shadow: 3px 3px 5px #999, 3px -3px 5px #999;
	border-radius: 10px;
	border-left: 10px solid #333;
}
h4{
	color: #ffffff;
	text-shadow: 0 0 5px #f00;
}

3.2. CSS Advanced Example

Now we will comprehend the power of CSS with this advanced illustration. The below HTML iframe contains a CSS web page with 05 distinct CSS stylesheets. Just navigate through various tabs to discover the stylesheet variety. Also, these style declarations are accessible in the codelab editor to support the developers.

4. Benefits of CSS

In this section of the introduction tutorial, we will discuss the benefits and advantages of CSS language. HTML is a markup language and CSS is a stylesheet language. They both work together to define and style a web page. HTML defines the structure of the page and CSS adds style to it. Without CSS, the web page would lack attraction. Hence, CSS complements HTML and makes it more useful.

4.1. Problems Before CSS

In the early days, HTML markup was very simple and clean. Developers have no control over the content since they were unable to do any text formatting, color manipulation, or background styling. The web pages were just a stack of markup only like the below example.

<h2>Page Heading</h2>
<h2>Another Page Heading</h2>
<p>This is a paragraph and it does not have any styling.</p>

The above sample outlines a simple HTML markup and if this markup method is repeated over and over again, any web page will be in insignificant form. Just take a look at the very first web page on the internet. A little later, some semantic tags were added in HTML, like <fonts> along with certain attributes. Those HTML elements and attributes are known as presentational HTML elements and presentational attributes. Initially, this addition was a bit supportive for the developers but in large documents, text formatting was still a trouble. The developers were just repeating the formatting on every web page and even on every single element.

4.2. CSS Solved The Problems

Eventually, CSS solved the biggest pain for the developers and provided a unique way to style the web pages. It helped developers to add inline styles, on-page styles, or external style sheets. Also, a single style sheet now works for infinite documents, and that adds beauty to Cascading style sheets. Further, the appearance of CSS removed HTML text formatting elements. Hence, the addition of CSS is a remarkable milestone in the history of web development.