CSS Introduction - Basics, Working, And Advantages

1. Introduction To CSS Language

Firstly, this CSS introduction tutorial is helpful for those who have learned HTML and thinking about the next step in web-designing. Secondly, this CSS tutorial will meet their need concerning What is CSS, CSS basics, how to write CSS declarations, and how web-pages become more appealing after CSS implementation. Thirdly, CSS is the basic building block of a web-page, therefore, learning some HTML beforehand is essentially recommended.

Basically, CSS stands for Cascading Style Sheets and it enhances the presentation of a web-page. Also, a web-page is nothing but a pile of markup without CSS. Further, the role of CSS is to select each element on the web-page and apply some style declarations to increase its aesthetics. In-fact, every pixel on the screen or the web-page can be designed using CSS. Besides, the ability of CSS made it so popular amongst the developers that it became the fundamental part of web-designing.

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 establishes the structure of a web-page. HTML contains different varieties of HTML elements that behave like the blocks in a building. Secondly, a web-designer combines these HTML elements systematically to develop the structure of a web-page. Yet, the web-page still wants something to make it classy and presentable. Eventually, CSS originates to help HTML in increasing the aesthetics of the web-page. Therefore, the presentation of a web-page is completed after implementing CSS styles.

1.3. What was the Need for CSS?

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

2. What are the Basics of CSS?

The next part of this CSS tutorial is to learn the basics of CSS. The list below comprehensively clarifies all the questions of the beginners about the basics of CSS. Moreover, these are the fundamentals or core features of CSS and hence, they are the must to remember for every web-designer.

2.1. Basics of CSS Language

Following are some basics that are to be kept in mind for new learners:

• First thing first, CSS is the key for styling web pages
• Secondly, CSS is a short form of Cascading Style Sheets
• Importantly, CSS declares 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 incorporates the feature of reusability
• Further, the same style declarations can serve multiple web pages, even multiple or millions of websites at once
• Almost 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 introductory tutorial is to discuss how CSS works and how it applies styling to the HTML elements. The below CSS style declarations are selecting a div and h4 element and implement the styles to them respectively. These declarations are written within the curly braces as below:

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 understand the power of CSS with this advanced example. The below HTML iframe contains a CSS web-page with 05 distinct CSS stylesheets. Just try navigating through various tabs to encounter the style diversity. Also, these style declarations are accessible in codelab for the developer's support.

4. Benefits of CSS

This section of the CSS introduction tutorial is to learn about the benefits and advantages of CSS. Since HTML is a markup language and it defines the structure of web pages and CSS is a stylesheet language. In other words, HTML and CSS both are partners in defining and styling a web page. One partner increases the value of others and a sole partner has little or no value.

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, any color manipulation, or any background styling. The web pages were just a pile of markup only like the below example.

<h2>This is CSS Introduction Tutorial</h2>
<h2>What is CSS in actual?</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 text formatting 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 supporting for the developers but in large documents, text formatting was still a problem. The developers were just like repeating the formatting on every web-page and even on every single element.

4.2. CSS Solved The Problems

Eventually, CSS solved the biggest problem for the developers and provided a way to style the web-pages. It helped developers by letting them add inline styles, on page styles, or external style sheets. Also, a single style sheet now works for infinite documents and that adds the 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.