Introduction to CSS and Why CSS is used?

By  ShC    19 - 07 January, 23
Introduction to CSS and why css is used

Share article on social media


CSS ( Full form of CSS is Cascading Style Sheets) is a stylesheet language used for describing the look and formatting of a document written in HTML. CSS is used to control the style of a web page, including things like font, color, and layout.

One of the main benefits of using CSS is that it separates the content of a webpage (written in HTML) from its presentation, making it easier to maintain and update the look of a site. Instead of specifying styling information in the HTML of each page, you can use a single CSS file that can be shared across multiple pages, reducing the amount of code duplication and making it easier to make global style changes.

CSS is also a key component of responsive web design, which is the practice of designing websites that look good on a variety of devices and screen sizes. By using media queries and other techniques, you can use CSS to apply different styles depending on the characteristics of the device being used to view the page.

CSS is a fundamental tool for building and styling modern websites, and is an important skill for web developers and designers to master.

Why CSS is used?

Some of the main reasons why CSS is used include:

  • Separation of content and presentation : CSS allows you to separate the content of a webpage (written in HTML) from its presentation, making it easier to maintain and update the look of a site.

  • Improved accessibility : By using CSS, you can specify the styling for a webpage in a separate file, which can be easily accessed by users with disabilities or using assistive technologies.

  • Reusability : CSS styles can be reused across multiple pages, reducing the amount of code duplication and making it easier to make global style changes.

  • Maintainability : Because CSS separates the content and presentation of a webpage, it is easier to maintain and update the site over time.

  • Responsive design : CSS is a key component of responsive web design, which is the practice of designing websites that look good on a variety of devices and screen sizes. By using media queries and other techniques, you can use CSS to apply different styles depending on the characteristics of the device being used to view the page.

How CSS work with HTML

CSS (Cascading Style Sheets) is a stylesheet language used to control the style and layout of web pages. HTML (HyperText Markup Language) is a markup language used to structure and organize content on the web.

CSS and HTML work together to create the structure and design of a webpage. HTML is used to define the content of a webpage, including headings, paragraphs, and other elements. CSS is used to specify the styling for these elements, such as the font, color, and layout.

To use CSS with HTML, you can link to a separate CSS file in the head of your HTML document, or you can include the CSS styles directly in the HTML file using a style element. Once the CSS is linked or embedded in the HTML file, you can use CSS selectors to target specific elements on the page and apply styles to them.

Here's an example of how CSS and HTML might work together:

<!-- This is an HTML file -->
<html>
  <head>
    <!-- Link to a separate CSS file -->
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- This is a heading element -->
    <h1>Welcome to my website</h1>

    <!-- This is a paragraph element -->
    <p>Hello, my name is Jane and this is my website.</p>
  </body>
</html>
/* This is a CSS file */
h1 {
/* Style for the h1 element */
font-size: 24px;
color: blue;
}

p {
/* Style for the p element */
font-size: 16px;
color: black;
}

In this example, the HTML file defines the content of the webpage, and the CSS file defines the styles for the h1 and p elements. The CSS file is linked to the HTML file using the link element in the head of the HTML document. The styles in the CSS file are then applied to the corresponding elements in the HTML file.