What is CSS?

what is css

CSS (Cascading Style Sheets) is a powerful language used to design the website’s elements structured through HTML. The website’s elements include layouts, colors, fonts, and other visual elements. Without styling web pages would look plain and unbearable. HTML decides what content appears on a page; CSS determines how that content will turn out to be visually. It allows developers to create beautiful and functional designs aimed at improving user experience.

CSS Examples

This is the first paragraph with Arial font and custom styling.

// Uses Arial font, with a light blue background, dark text color, and padding.

.first-paragraph {
font-family: 'Arial', sans-serif;
font-size: 18px;
color: #2c3e50;
background-color: #f0f8ff;
padding: 10px;
}

This is the second paragraph with Times New Roman font and a different style.

// Uses Times New Roman font, with a parrot background color, purple text color, and padding.

.second-paragraph {
font-family: 'Times New Roman', serif;
font-size: 20px;
color: #8e44ad;
background-color: #52CE52;
padding: 15px;
color: white;
}

Core Concepts of CSS

Cascading

Cascading means when there are multiple rules effecting the same element, the browser decides which one to apply. Rules with higher importance is preferred. For example, inline styles override external styles because they are more specific.

Adding the !important tag at the end of rule can override all of the other style rules in CSS. Here’s a cascading CSS importance table showing priority of each type:

Priority Description
Inline CSS Applied through style attribute override all other styles.
!important Rule Overrides all other styles within the same scope.
Specificity Styles with higher specificity (e.g., ID selectors).
Order of Appearance In cases of equal specificity, the later rule in the stylesheet will be applied.
Internal CSS Applied within a <style> tag in the HTML document's <head>.
External CSS External stylesheets linked via <link> and affect the whole document unless overridden.
Browser Default Browsers default styles for HTML elements.

Specificity

As Mentioned above in table Specificity means the priority of CSS rules to be applied. For instance, an ID selector like #header has more weight than a class selector like .title. Specificity of an element helps developers avoid conflicts in code.

Inheritance

Inheritance means that certain styles, like text color or font, are passed down from parent elements to child elements. This reduces repetition and keeps the code cleaner. However, not all properties are inherited; for instance, margins and paddings are not.

Different Types of CSS

There are three main ways CSS can be applied to web pages.

Inline

Inline CSS applies styles directly to an HTML element.

<p style="color: red;">This text is red.</p>

This text is red.

It is useful for quick changes but isn’t recommended for larger projects. This can make the code messy and difficult to maintain. It also makes your webpage slower, as the styles load every time the page is refreshed.

Internal

Internal CSS is written inside a <style> block in the HTML <head> section. It applies styles to that specific page.

<html>
  <head>
    <style>
      #myParagraph {
          color: blue;
      }
      </style>
    </head>
  <body>
    <p id="myParagraph">
      This paragraph text will appear in blue due to internal styles using an ID.
    </p>
  </body>
</html>

This paragraph text will appear in blue due to internal styles using an ID.

While it offers better organization than inline, it is not ideal for websites with multiple pages.

External

External CSS uses a separate .css file linked to the HTML. The <link> element is used in the head section of a webpage. The href attribute includes the path of the stylesheet where the file is stored. This is the most efficient way of managing stylesheets for a website and is used most often professionally.

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

Features and Benefits of CSS

Separation of Design and Content

CSS separates design rules from the structure. This makes it easier to update the appearance without touching the content.

Consistency Across Pages

With a single CSS file, you can apply consistent styles across multiple pages. The same class name can be used for various sections, ensuring uniform placement, style, functionality, fonts, sizes, and more—covering everything from headings to body text. It also helps maintain a cohesive color scheme and design language throughout the website.

Responsive Design

CSS allows websites to adapt to various screen sizes, ensuring a responsive design across all devices. With the growing range of devices, CSS media queries enable developers to apply different styles based on screen size, resolution, and orientation. This ensures a consistent, user-friendly experience, whether on a smartphone, tablet, or desktop.

Check out our PX to REM Converter for easy responsive design adjustments!

Improved Website Performance

Style sheet helps reduce HTML code clutter, leading to faster page load times. By streamlining the code, it will not only enhances user experience but also boosts SEO rankings, making your website more efficient and search-engine friendly.

Creativity in Design

CSS empowers designers to create engaging animations, transitions, and dynamic effects, bringing websites to life. Unlike JavaScript-based animations, animations developed using CSS are lightweight, improving loading speed while adding interactive elements to the user experience.