Introduction to CSS - Naukri Code 360

Introduction

CSS stands for (Cascading Style Sheets), is a simply designed language intended to simplify the process of making web pages presentable. It is used to design HTML tags and widely used language on the internet. We are here to provide you with all CSS and its Framework details. We will go through some CSS Tutorials.

As you might hear, the word CSS and CSS Framework in today's era. CSS stands for Cascading Style Sheets, while CSS Framework is the pre-written set of CSS rules. Almost all websites use CSS and CSS Frameworks to present their HTML content. In this article, we will learn about CSS and its Frameworks, the building blocks of CSS, available alternatives of CSS, use cases, and its importance in web development.

What is CSS?

Cascading Style Sheets, also termed CSS, is a style sheet programming language used for styling the presentation and layout of HTML (Hypertext Markup Language) and XML (Extensible Markup Language) documents.

CSS help to increase the readability of the audience for the content of a web page. Web pages are written in markup-based languages. With the help of CSS, we can control a webpage's font size, manage background, text colors, in-between spacing among lines and text, positioning of elements, and other visual aspects. CSS applies styles to HTML elements using selectors and declarations, which define the properties and values applied to the selected parts. CSS is a widely used technology of the World Wide Web, and nearly all modern websites use it to achieve visually appealing and responsive designs.

There are three ways to apply CSS -

External CSS:

In this type, we create a separate file for defining the style of elements used in an HTML document. We can select boxes having attributes using their tag, class, and id names.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Internal CSS:

Unlike External CSS, we define Internal CSS within the HTML document in the head section. For example,

<head>
<style>
    p {
      color: orange;
    }
</style>
</head>

Inline CSS:

In this method, we define the style of the HTML element within the code using the style attribute. For example,

<p style="color: orange;">Hello Ninjas</p>

CSS versions History

CSS was discovered in 1994 by Hakon Wium Lie. He is also considered the father of CSS. Initially, websites were medium for researchers to showcase their work using HTML. However, the need to make websites look nice grew when they became widespread. CSS was used as the web styling language to make it fascinating. And it was the way most HTML developers were looking for. When it was introduced, developers could use HTML and CSS to make their web content more attractive. Lie introduced the first version of CSS in late 1996.

The history of versions of CSS are as follows:

CSS1

It was the first version of CSS, discovered in 1996. It has basic styling options like font size, background color, positioning of elements, and layout properties. CSS1 also introduced the cascading concept, enabling developers to define multiple styles for the same part. Also, make browsers determine which style should apply based on priority and inheritance rules.

CSS2

CSS2 was the second version of CSS, released in 1998, and significantly improved over CSS1. CSS2 has many new features, such as support for media types like print and screen, with more advanced layout and positioning options. Developers get introduced to the concept of absolute and relative positioning in CSS2. It had compatibility issues with browsers and incomplete implementation. CSS2.1 version resolved the problem of CSS2.

CSS3:

CSS3 is the latest and third version of CSS, released in 1999. CSS3 has a collection of separate modules, each with its features, instead of a single monolithic specification. CSS3 has significantly improved over CSS2, allowing developers to create more complex and visually appealing websites. Also, this version is separated into many modules, making it easy to handle and saving time formatting web pages. Most tech companies and organizations use CSS3 and HTML5 for designing tasks and web development.

A few more descriptions about CSS3 -

CSS3 comes with new features and has a separate module for each set. Some of the significant modules are as follows -

CSS Box Model: CSS3 introduced new properties in Box Model, such as box-sizing, which helps developers control element width and height.
Media Query: It is one of the essential tools that help developers apply different styling based on the screen size used to view a website.
Flexbox and Grid: In CSS3, Flexbox and Grid provide a layout allowing developers to create a responsive design easily.
Colour Format: In CSS3, developers can use alpha channels and hue, saturation, and lightness value to specify a color. rgba() and hsla() properties are used.
Selectors: In CSS3, a few more selectors included, such are attribute selectors, structural pseudo-classes, and the:nth-child() pseudo-class.
Web Fonts: CSS3 introduced the @font-face rule, which allows using any open-source fonts on our website.

Features of CSS

CSS has a wide range of Features. Some of the essential features and their CSS tutorials are as follows -

Selectors and Properties: It selects the target HTML elements and applies styles to them.

Syntax

HTML Code

<div class="NinjaBox">
         <p>Hello Ninjas</p>
</div>

CSS Code

/* Selector */
.NinjaBox {
         /* Properties */
         text-align: center;
         color: red;
}

Description: We define the "NinjaBox" class for the "div" container in HTML code. In CSS code, we make the text "Hello Ninjas" in the center and assign the color red.

Inheritance: CSS also supports Inheritance. In this property of Parent Element get automatically assigned to its Child Element.

Syntax

HTML Code

<body> 
        <h1 class="NinjaHeading">Child of body<i>Child of h1</i></h1> 
        <p>Child of body</p>
</body>

CSS Code

body { 
         color: yellow; 
 }

Description: In the above code, all the Child Elements are red, as we defined in its Parent Element "body". Here Child Element of "body" is "h1" and "p". Child Element of "h1" is "i".

Units: In CSS, there are multiple varieties of measuring units such as pixels, ems, rems, percentages, etc. These units define the length of the contents.

Syntax

CSS Code

p {
 font-size: 3rem;
 line-height: 2em;
}

Description: In the above code, em is font size relative to Parent Element. rem is font size relative to HTML Element.

Box Model: In CSS, Box Model is the building block of any Web Page. With the help of the Box Model, we can determine the Size and Position of Elements on the Web Page. It consists of four parts.

Content - This box contains text and images.
Padding - It clears the area around the content.
Border - It surrounds the padding and content.
Margin - It clears the area outside the border.

Syntax

HTML Code

<div class="NinjaBox">
         <p>Hello Ninjas</p>
</div>

CSS Code

.NinjaBox {
       width: 800px;
       border: 10px solid red;
       padding: 40px;
       margin: 10px;
}

Flexbox: In CSS, Flexbox helps to create flexible and responsive layouts. First, we must define a "display" property of a block as a "flex" for using Flexbox. Flexbox has many specific properties used to design responsive layouts. Some of them are as follows -

align-content: It aligns flex lines.
align-items: It vertically aligns the flex items.
display: It specifies the type of box.
flex-direction: In a flex container, flex-direction sets the direction of a flexible item.
justify-content: It aligns the flex item horizontally.
flex-wrap: It specifies whether to wrap up a flex item or not.

Syntax

HTML Code

<div class="NinjaContainer">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</div>

CSS Code

.NinjaContainer {
     display: flex;
     height: 800px;
      justify-content: center;
     align-items: center;
}

Grid: In CSS, the Grid also provides a layout module. Using Grid, we can easily create even more complex, multi-column layouts. First, we must define a "display" property of a block as a "grid" for using Grid. The Grid has many specific properties used to design responsive layouts. Some of them are as follows -

grid-column-start: It specifies the start position of grid items.
grid-column-end: It defines the end position of grid items.
column-gap: It defines the space between the columns.
grid-template-rows: It defines the size of rows in the grid layout.
grid-template-columns: It defines the size and number of columns in the grid layout.

Syntax

HTML Code

<div class="NinjaContainer">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</div>

CSS Code

.NinjaContainer {
      display: Grid;
      column-gap: 30px;
}

Media queries: It allows developers to apply different styles on devices with various screen sizes.

Syntax

CSS Code

/* For Desktop */
@media only screen and (min-width: 768px) {
 body {
     background-color: blue;
  }
}


/* For Tablets */
@media only screen and (min-width: 600px) {
 body {
     background-color: blue;
  }
}


/* For Mobile */
@media only screen and (max-width: 768px) {
 body {
     background-color: blue;
  }
}

Description: In all the above three cases, we apply the background color of our HTML page as Blue. The color will apply based on the defined breakdown points.

Why learn CSS?

Various aspects show the importance of knowing CSS. In current scenarios, CSS has high demand in web development. Now people are making their Web Pages to showcase their projects. They can customize their Web Pages and makes them look pretty. CSS can help to boost our Careers. Many Tech organizations require developers to have skills in Javascript, CSS, and other languages. It will lead to an excellent opportunity to gain money. Also, we will get the initiative to learn other languages after learning CSS, as CSS is considered more straightforward than other languages. CSS helps to make more diverse websites.

Applications of CSS

The Main Applications of CSS are as follows -

Making Animations:

With the help of CSS or CSS Frameworks, we can create Animations and Transitions on Web Pages, such as hover effects, Scrolling Animations, and other such elements.

Designing Responsive Sites:

CSS and CSS Frameworks help to make responsive layouts that adapt to the screen of any type, such as Mobile, Laptop, Tablet, etc.

Styling Contents:

We can use CSS or CSS Frameworks to style the contents of the HTML document without having to worry about formatting issues.

Improve Accessibility:

CSS can adjust font sizes, color contrasts, and other visual elements, which helps people having visual impairments to access more.

Provide Customization:

CSS or CSS Frameworks allows developers to customize their web pages according to their preferences.

Enhanced Layout:

Using CSS and CSS Frameworks, we can create complex layouts and grids for web pages to organize content and improve visual hierarchy.

Reusability:

CSS Frameworks, pre-define rules based on CSS, are widely used in developing and designing big platforms, such as e-Commerce Platforms, Social Media Platforms, Blogging Platforms, Streaming Platforms, etc.

Three essential components in CSS define various styles for our web pages. Those are as follows -

Selector:

In CSS styling, Selector selects the HTML element to which the rule applies. We can choose an HTML element using an Element Tag, Class Name, ID Name, and other Attributes.

Property:

This part of CSS styling defines the visual style or layout of the selected element. Properties can include font size, color, margin, padding, font weight, border, background color, etc.

Value:

This part in CSS styling specifies the value of the Property. For Example, the font-size Property could be 10px or 2rem.

Some alternatives to CSS

There are some alternatives to CSS, but they have yet to be widely adopted. Some of them are as follows -

Bootstrap:

It is a CSS Framework built on top of CSS. Bootstrap provides pre-defined components and templates using which we can create responsive and mobile-first websites more quickly and easily. It saves the developer time and effort. To avail the utility of Bootstrap on our web pages, we first need to declare Bootstrap CDN or install Bootstrap packages.

JavaScript:

It is a programming language used to create dynamic and interactive web pages. Similarly, it allocates dynamic styling to the contents of our HTML documents. JavaScript mainly uses DOM(Document Object Model) to manipulate HTML content using Event Listeners and define style attributes. DOM uses document objects to call their methods and properties. Some known techniques are getElementById, getElementsByTagName, createElement, appendChild, and many others.

PHP:

PHP stands for Hypertext Preprocessor, a server-side scripting language. We can use PHP for building dynamic web applications. PHP can also define dynamic styling for the Elements of HTML Documents like JavaScript. Unlike JavaScript, PHP declares some variables to perform inline styling.

Difference between CSS2 and CSS3

The difference between CSS2 and CSS3 are as follows:

Key Points	CSS2	CSS3
Launched In	1998	1999
Compatibility	Compatible with only older browsers.	Compatible with all types of browsers and can support old CSS2 styles.
Layout	Limited options for creating a responsive layout.	Flexbox and Grid allow the creation of complex responsive layouts.
Transitions and Animations	Lack of transition and animation properties.	Transition and Animation properties are present.
Web Fonts	Only support Web-safe fonts.	Along with Web-safe fonts, it also supports any custom fonts like Google Fonts.
Feature Specification	Consists of a Single Document.	Divided into individual modules of feature set.
Selectors	Consist of Simple Selectors.	Consist of a Sequence of Simple Selectors such as structural pseudo-classes.
Rounded Borders	Not Present.	Present.
Split Text Feature	Not Available.	Available.
Media-Query	Not Present.	Supports Media Query Functionality.

Syntax of CSS

Below is the syntax for defining CSS on a web page -

/* Selector */
h1 {
      /* Property and Value */
      color: blue;
}

/* Selector */
.NinjaClass {
      /* Property and Value */
      font-size: 16px;
}

/* Selector */
#NinjaId {
      /* Property and Value */
      text-decoration: none;
}

Syntax Description
In the above syntax, "h1" denotes selecting an element by its Tag Name. In contrast, ".NinjaClass" indicates selecting an item by its Class Name. "#NinjaId" denotes selecting an element by its Id Name.

Also, "font-size", "colour", and "text-decoration" indicates Properties while "16px", "blue", and "none" indicates their Values, respectively.

Top 5 CSS Frameworks for Developers

Below are the Top 5 CSS Framework that is currently in use -

Bootstrap:

Bootstrap is a widely used CSS Framework developed by Twitter. Bootstrap provides a range of built-in CSS Components such as forms, buttons, navigation menus, and typography. We can customize the Bootstrap CSS Framework to fit the design of our application.

Bootstrap provides CSS styles and JavaScript functionality to create responsive, mobile-first websites and web applications, such as Dropdowns, Courasel, and many more. Bootstrap has a strong Responsive Grid System Functionality, which enables our websites to fit in any screen width.

Also, Bootstrap has a large community of developers contributing to its development.

Tailwind CSS:

Tailwind CSS is a widely used utility-first CSS framework. Tailwind CSS provides a set of pre-designed, reusable CSS classes which we can use to style our HTML elements quickly. It is built with PostCSS and is highly customizable and modular.

Like Bootstrap, Tailwind CSS also offers a wide range of predefined classes for styling, such as typography, spacing, color, layout, and more, which makes creating complex, responsive designs easy without writing custom CSS code. Tailwind CSS is flexibile to use. It requires less code and makes it easier to maintain our stylesheets over time. We can use the Tailwind CLI to generate a custom configuration file with our design tokens or use Tailwind UI.

Foundation:

The foundation widely used front-end CSS Framework developed by ZURB. The framework provides various CSS and JavaScript components, including a grid system, navigation menus, forms, buttons, typography, and more. Foundation uses a 12-column grid system that is flexible and easy to use. The grid system in Foundation allows developers to create responsive complex layouts for different screen sizes.

Foundation Framework is biased towards mobile-first design. The framework is optimized for smaller screens and touch-based devices, which makes it an excellent choice for building responsive websites and applications. Foundation has several performance optimizations, such as minimized CSS and JavaScript files, to ensure that sites built with the framework load quickly and efficiently.

Bulma:

Bulma is a Flexbox-based CSS framework that is open-source and completely free. Bulma is responsive, modular, and customizable. Bulma provides Developers with a wide range of pre-built CSS classes that gives style and layout to HTML elements, such as forms, buttons, tables, and navigation menus.

It also contains built-in functionality for commonly used web components, such as modals, tabs, and sliders.
Instead of including all CSS styles in a single file, Bulma comprises multiple smaller files that can be imported and customized. CSS codes are small in size in Bulma.

Skeleton:

Skeleton CSS is a widely used lightweight front-end framework. Skeleton also supports a responsive grid system, typography, and basic styling for websites and web applications. It is easy to use and focuses on mobile-first development. Skeleton Framework comprises a 12-column grid system that can fit different screen sizes and layouts. It includes basic styles for buttons, forms, tables, and other common UI elements and a set of default typography styles.

Skeleton CSS is simple and easy to use. Developers can quickly create responsive layouts by simply adding classes to HTML elements without the need for complex CSS code. The framework is also highly customizable, with various options for adjusting the grid system, typography, and other styles. Skeleton CSS is open source. The modern web browser supports Skeleton CSS. It has a decent community of developers contributing to development.

Advantages of CSS

Below are the Advantages of CSS -

Maintenance: CSS separates the content and presentation of the website. We can maintain CSS styling without affecting the underlying code.
Efficiency: CSS creates lightweight and efficient websites that reduce load time and improve user experience.
Search Engine Optimization: Using CSS styling, one can optimize a website for search engines. It facilitates the crawling and indexing process of a website's content.
Browser Compatibility: CSS is widely supported by nearly all modern Web Browsers. Hence CSS is a reliable and consistent way to style Web Pages.
Faster Development: CSS provides a bunch of pre-defined rules, which we also call Frameworks. Developers can use these CSS Frameworks and libraries to speed up the development process.
Debugging: CSS provides tools for debugging styles and identifying issues. Tools make it easier to troubleshoot and fix problems.
Customization: Using CSS, developers can customize the appearance and layout of the web page according to their needs. Customization improves the user experience and increases engagement.
Accessibility: CSS helps to improve the accessibility of a website by providing semantic markup and enhancing the readability and usability of the content.

Disadvantages of CSS

Below are some Disadvantages of CSS -

Challenging to Learn: In the initial learning phase, CSS might be a little tough for beginners.
Cross-Browser Inconsistencies: Even though modern web browsers widely support CSS. There can still be inconsistencies in how CSS is interpreted and displayed across different browsers and devices.
Performance Issues: Complex CSS styles and animations sometimes impact a website's performance more on older or slower devices.
Security risks: Using CSS, Attackers can execute malicious code to steal sensitive information. So it is essential to be cautious when using external CSS resources or accepting user input.
Multi-Version Problem: Since CSS has multiple versions. There may be confusion in choosing the correct version.
Multi-Selector Problem: Sometimes, hierarchical Selectors in CSS create the problem.
Lack of Dynamic Update: One cannot dynamically change styling during a website's running. We define static CSS before the deployment of web pages.

Limitations of CSS

Below are some Limitations of CSS -

CSS does not interact with Database.
CSS does not create a Backend.
CSS does not read any files—lack of control over multimedia.
CSS does not perform a logical operation. Javascript or PHP performs logical and arithmetic operations. Logical operations are if/else/while, and arithmetics operations are +, -, ++, --, etc.
CSS does not make any GET, POST, PUT, or PATCH requests to Web Server.
Lack of Dynamic support in CSS. Javascript or PHP performs dynamic functionality behind the web page.
Lack of Interaction in CSS. Eventlistensers of Javascript solve this issue.
Style Selectors of CSS are conditional. Every Browser does not support some of them.

Frequently Asked Questions

What is CSS Framework?

CSS Framework is the pre-defined set of rules based on CSS. We can directly use CSS Frameworks for designing and creating web pages. We do not need to write CSS code from scratch in the case of CSS Framework. It saves developers time and effort.

What are the 3 types of CSS?

Three types of CSS are External CSS, Internal CSS, and Inline CSS. External CSS defines in a separate file. Internal CSS defines within the HTML document. Inline CSS defines inside the underlying code of the HTML element. Among all three, External CSS is more Preferable.

Where is CSS used?

CSS is a critical component of Web Development used for styling and formatting Web Pages. Developers use CSS in many elements of Web Pages like Typography, Animations, Transitions, Responsive Design, Buttons, Forms and Applying Breakdowns points.

What are the features of CSS?

CSS (Cascading Style Sheets) features, which improve the presentation and visual impact of web content, include styling HTML elements, managing layout and positioning, responsive design for different screen sizes, support for animations and transitions, and the ability to apply styles across multiple pages using external stylesheets.

Conclusion

In this article, we discussed CSS and CSS Frameworks. We went through some CSS Tutorials. We also learned about the evolution of CSS from 1996 to 1999 and their versions. We also learned the Advantages and Disadvantages of CSS, the features associated with CSS, and their use cases. I hope you enjoyed this article.

Happy Learning, Ninjas!