CSS

Last Updated : 21 Sep, 2022

CSS (Cascading Style Sheets)is used to apply styles to web pages. Cascading Style Sheets are fondly referred to as CSS. It is used to make web pages presentable. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independently of the HTML that makes up each web page.

CSS Tutorial

Why we learn CSS?

Styling is an essential property for any website. It increases the standards and overall look of the website that makes it easier for the user to interact with it. A website can be made without CSS, as styling is MUST since no user would want to interact with a dull and shabby website. So for knowing Web Development, learning CSS is mandatory.

Basic Format: It is the basic structure of CSS style of an webpage.

 body {
     background-color: lightgray;
}
 h1 {
     color: green;
     text-align: center;
}
 p {
     font-family: sans-serif;
     font-size: 16px;
}

There are three types of CSS which are given below:

  • Inline: Inline CSS contains the CSS property in the body section attached with the element known as inline CSS.
  • Internal or Embedded: The CSS ruleset should be within the HTML file in the head section i.e the CSS is embedded within the HTML file. 
  • External: External CSS contains a separate CSS file that contains only style property with the help of tag attributes.

Example 1: Let’s see a small example of HTML webpage with CSS styles. Here, we use styles to set the alignment and text color of a webpage.

<!DOCTYPE html>
<html>

<head>
    <title>
        Simple webpage
    </title>

    <!-- Stylesheet of web page -->
    <style>
        body {
            text-align: center;
        }
        
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>Welcome to GeeksforGeeks</h1>

    <p>A computer science portal for geeks</p>
</body>

</html>

Output:

Example 2: In this example, we will see how to apply styles using class and id.

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>CSS</title>
      <!-- Stylesheet of web page -->
      <style>
         /* To color the background */
         body {
         background-color: rgb(221, 177, 136);
         }
         /* Text alignment Center */
         .main {
         text-align: center;
         }
         /* Text color, font size & font weight */
         .GFG {
         color: #009900;
         font-size: 50px;
         font-weight: bold;
         }
         /* Font Size and style */
         #geeks {
         font-style: bold;
         font-size: 20px;
         }
      </style>
   </head>
   <body>
      <div class="main">
         <div class="GFG">GeeksforGeeks</div>
         <div id="geeks">
            A computer science portal for geeks
         </div>
      </div>
   </body>
</html>

Output:

CSS Tutorial

What does CSS mean?

Tags for formatting a web page were never intended in HTML. HTML was established to define a web page’s content. The addition of tags like <font> and color attributes to HTML created a big problem for web developers. The creation of large websites, where fonts and color information were added to each page, became a time-consuming and costly procedure. CSS was established to address this issue. CSS eliminated the HTML page’s style formatting.

How CSS is different from HTML?

  • HTML is used to define a structure of a web page whereas CSS is used to style the web pages by using different styling features.
  • HTML consists of tags inside which text is enclosed and CSS consists of selectors and declaration blocks.
  • CSS can be internal or external depending upon the requirement.
  • We cannot use HTML inside a CSS sheet but we can use CSS inside an HTML document.
  • CSS has comparatively higher backup and support than HTML.

Why is CSS used in HTML?

  • Solves a big problem: Font, color, background style, element alignments, border, and size tags had to be duplicated on each web page before CSS. This was a lengthy procedure.
  • Saves a lot of time: Because CSS style definitions are stored in external CSS files, updating only one file can modify the entire website.
  • Provide more attributes: CSS gives more specific features for defining the look and feel of a website than simple HTML.
  • Pages load faster: CSS doesn’t require you to write HTML tag attributes all of the time. A tag’s rule can be written once and applied to all instances of the tag. As a result, CSS uses less code, resulting in speedier download times.
  • Easier Website maintenance: CSS makes website maintenance much easier. If we need to make a global change to the file, we can simply alter the style, which will update all of the elements on the web page.
  • Multiple device compatibility: We can use CSS with older language versions because it is compatible with them. CSS makes it possible to optimize material for several devices.
  • Base for web development: HTML and CSS is the basic skill that every web developer should know. It is the basic skill that is required for building a website.
  • Makes your website look attractive: A website that’s dull and plain will not attract the user, so adding some style would surely make your website presentable to the user.
  • Makes the design come live: A web developer is responsible for making the design given to him as a live product. It is used for styling to develop the design of the website.
  • Increases user experience of the website: A website with a simple yet beautiful UI would help the users to go through the website easily. It is used to make the user interface better.
  • More career opportunities: Since CSS is a basic requirement while learning Web Development, therefor there are abundant career opportunities for it. As a freelancer, you can land up to many projects.

  

Examples: Please go through this link to see the wide collection of programming examples. The examples are categorized based on the topics including properties, selectors, functions, and many more.

Recent Articles

Please write comments if you find anything incorrect, or if you want to share more information about the topic discussed above.


My Personal Notes arrow_drop_up

Share your thoughts in the comments

Similar Reads

Primer CSS
Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns are steady and interoperable with every other. Its a
3 min read
Pure CSS
Pure CSS is a CSS framework. It is a set of free and open-source tools for building responsive websites and web applications. Yahoo developed this, which is used to make websites that are quicker, more elegant, and more responsive. It is a viable alternative to Bootstrap. Pure CSS is designed with keeping responsive design in mind. So we get prebui
3 min read
Materialize CSS
Materialize CSS is a design language that combines the classic principles of successful design along with innovation and technology. It is created and designed by Google. Google’s goal is to develop a system of design that allows for a unified user experience across all its products on any platform. [caption width="1000" align="aligncenter"]Materia
2 min read
Learn CSS - Free Course
CSS, or Cascading Style Sheets, is a language that simplifies web page presentation. It allows you to apply styles to web pages independently i.e. you can define colors, fonts, spacing, and more, to make your website look the way you desire.
3 min read
Difference between bootstrap.css and bootstrap-theme.css
Bootstrap is an HTML, CSS and JS front-end-framework used for developing responsive and mobile-first projects on the web. It is the framework that comes up with predefined terms, thus giving you the ability to use these codes instead of having to create the codes from scratch. It is a collection of HTML, CSS and JS code that is designed to help bui
5 min read
Difference between CSS Grid and CSS Flexbox
Grid:CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns, making it easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows. To get started you have to define a container element as a grid with display: grid, set the column an
4 min read
BeautifulSoup - Find tags by CSS class with CSS Selectors
Prerequisites: Beautifulsoup Beautifulsoup is a Python library used for web scraping. BeautifulSoup object is provided by Beautiful Soup which is a web scraping framework for Python. Web scraping is the process of extracting data from the website using automated tools to make the process faster. The BeautifulSoup object represents the parsed docume
2 min read
Which CSS framework is better Tailwind CSS or Bootstrap ?
In this article, we will see which CSS framework is better tailwind CSS or bootstrap. Both are widely used CSS frameworks for styling the front end. We will understand each one of them in detail. Both frameworks have their own pros and cons so it depends upon the type of application you are going to build and accordingly you can choose the best fra
5 min read
CSS Cheat Sheet - A Basic Guide to CSS
What is CSS? CSS i.e. Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in a markup language such as HTML, XML, etc. CSS enhances the look and feel of the webpage by describing how elements should be rendered on screen or in other media. What is a CSS Cheat Sheet? CSS Cheat Sheet provides you wi
13 min read
How to identify unused CSS definitions from multiple CSS files in a project ?
In this article, we will learn how to identify unused CSS definitions from multiple CSS files in a project. What are unused CSS definitions? Unused CSS definitions are the stylesheets that are completely useless for rendering and loading the page. If you remove these unused CSS definitions then nothing will happen to your webpage. Why you should re
2 min read