Introduction to CSS

Back to: CSS Tutorials for Beginners and Professionals

Introduction to CSS

In this article, I am going to give a brief introduction to CSS. At the end of this article, you will understand the following basic pointers of CSS.

1. What is CSS?
2. Advantages of CSS
3. Disadvantages of CSS
4. What does CSS do for us?
5. Who Creates and Maintains CSS?
6. CSS History
7. CSS Versions and Editors
8. How Does CSS Work with HTML?
9. Why do we need CSS?

What is CSS?

CSS stands for Cascading Style Sheets and is a simple design language intended to simplify the process of making web pages presentable. CSS saves a lot of work. It can control the layout of multiple web pages all at once

CSS describes how HTML elements are to be displayed on the screen, paper, or in other media. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, and variations in display for different devices and screen sizes as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

CSS Solved a Big Problem

Before CSS, tags like font, color, background style, element alignments, border, and size had to be repeated on every web page. This was a very long process. For example: If you are developing a large website where fonts and color information are added on every single page, it will become a long and expensive process. CSS was created to solve this problem. It was a W3C recommendation.

HTML was NEVER intended to contain tags for formatting a web page. HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. The development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS removed the style formatting from the HTML page.

Advantages of CSS

1. CSS Saves Time: The style definitions are normally saved in external .css files. With an external stylesheet file, you can change the look of an entire website by changing just one file.
2. Pages Load Faster: If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
3. Easy Maintenance: To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
4. Superior Styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
5. Multiple Device Compatibility: Responsive web design matters. In today’s day and age, web pages must be fully visible and easily navigable on all devices. Whether mobile or tablet, desktop, or even smart TV, CSS combines with HTML to make responsive design possible.
6. Global Web Standards: Now HTML attributes are being deprecated and it is being recommended to use CSS. So, it is a good idea to start using CSS in all the HTML pages to make them compatible with future browsers.
7. Provide More Attributes: CSS provides more detailed attributes than plain HTML to define the look and feel of the website.
8. Better User Experience: CSS not only makes web pages easy on the eye, but it also allows for user-friendly formatting. When buttons and text are in logical places and well organized, the user experience improves.
9. Quicker Development Time: With CSS, you can apply specific formatting rules and styles to multiple pages with one string of code. One cascading style sheet can be replicated across several website pages. If, for instance, you have product pages that should all have the same formatting, look, and feel, writing CSS rules for one page will suffice for all pages of that same type.
10. Easy Formatting Changes: If you need to change the format of a specific set of pages, it’s easy to do so with CSS. There’s no need to fix every individual page. Just edit the corresponding CSS stylesheet and you’ll see changes applied to all the pages that are using that style sheet.
11. Search Engines: CSS is considered a clean coding technique, which means search engines won’t have to struggle to “read” its content.
12. Offline Browsing: CSS can store web applications locally with the help of an offline cache. Using this we can view offline websites.
13. Efficient Cache Storing: CSS can be used to store the web applications locally with the help of an offline cache mechanism that can be used to view offline websites.

Disadvantages of CSS

1. Below are the disadvantages:
2. Cross-browser related issues
3. Vulnerable
4. Issues due to multiple levels
5. Lack of security
6. Fragmentation

What does CSS do for us?

1. You can add new looks to your old HTML documents.
2. You can completely change the look of your website with only a few changes in CSS code.

Who Creates and Maintains CSS?

CSS is created and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by the W3C members, it becomes a recommendation.

These ratified specifications are called recommendations because the W3C has no control over the actual implementation of the language. Independent companies and organizations create that software.

Note: The World Wide Web Consortium or W3C is a group that makes recommendations about how the Internet works and how it should evolve.

CSS History

1. 1994: First Proposed by Hakon Wium Lie on 10th October
2. 1996: CSS was published on 17th November with influencer Bert Bos

Later he became co-author of CSS

1. 1996: CSS became official with CSS was published in December
2. 1997: Created CSS level 2 on 4th November
3. 1998: Published on 12th May

CSS Versions

Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags.

CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning, and tables.

CSS Editors

Some of the popular editors that are best suited to wire CSS code are as follows:

1. Atom
2. Visual Studio Code
3. Brackets
4. Espresso (For Mac OS User)
5. Notepad++ (Great for HTML & CSS)
6. Komodo Edit (Simple)
7. Sublime Text (Best Editor)

CSS Syntax:

For Example:

1. Selector: selects the element you want to target
2. Always remains the same whether we apply internal or external styling
3. There are a few basic selectors like tags, id’s, and classes
4. All forms of this key-value pair
5. Keys: properties(attributes) like color, font-size, background, width, height, etc
6. Value: values associated with these properties

How Does CSS Work with HTML?

If HTML were the engine components of a car, CSS would be the body style and the paint job. A website can run without CSS, but it certainly isn’t pretty. CSS makes the front-end of a website shine and it creates a great user experience. Without CSS, websites would be less pleasing to the eye and likely much harder to navigate. In addition to layout and format, CSS is responsible for font color and more.

Why do we need CSS?

CSS is used to define styles for your web pages, including the design, layout, and variations in display for different devices and screen sizes.

Example without using CSS:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>Example without CSS</h1>
<p>This is a paragraph.</p>

</body>
</html>

Output:

Example using CSS:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

Output:

Want to learn CSS?

As you can see, CSS is critical when it comes to the overall presentation of a web page. And not only that, it makes developers’ life a whole lot easier when it comes to formatting. Mastering CSS is a vital part of becoming a valuable asset and a solid programmer.

Summary:

Cascading Style Sheets generally referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document.

In the next article, I am going to discuss How to add CSS to HTML Pages with Examples. Here, in this article, I give a brief Introduction to CSS. I hope this Introduction to CSS article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.