Introduction to CSS

Introduction to CSS

22 Dec 2023
Beginner
10.3K Views
2 min read

CSS stands for Cascading Style Sheets.CSS is a language that you can use to define styles against any HTML element. These styles are set using CSS properties.For example, you can set font properties (size, colors, style etc), background images, border styles, and much more.Using CSS, We can define all our common styles in an external Style Sheet. This way, if we want to change every occurence of a style throughout our site, we only need to update one place. Till now, there are css1, css2, css3 versions are used.

Benefits of CSS

There are following benefits :

  1. CSS saves time

    In html, we have to set the font face, size, colour, style etc for each and every element whenever it occurs on a page. With CSS, we only have to specify these details once for any element. CSS will automatically apply the specified styles whenever that element occurs.

  2. Faster Page loading

    Using css we have to do less code means page is loaded fastly.

  3. Easy maintenance

    To change the style of an element, we only have to make a change in one place.

  4. Superior styles to HTML

    CSS has a much wider array of attributes than HTML.

Limitations of CSS

The known issue is Browser compatibility issue. Browsers have varying levels of compliance with Style Sheets. This means that some Style Sheet features are supported and some aren't. To confuse things more, some browser manufacturers decide to come up with their own proprietary tags.

Fortunately, browser compatibility is becoming less of an issue as the latest browser versions are much more standards-compliant than their earlier counterparts.

CSS IDs

The id selector is used to specify a style for a single, unique element. It is defined with a "#".

Example : #para{ text-align:left; color:blue;}

CSS Classes

The class selector is used to specify a style for a group of elements. class selector is most often used on several elements. It is defined with a "."

Example :.para {text-align:left;color:blue;}

When to use Classes ?

We should use classes when our style needs to be applied multiple times on the same page.

For example : you might have many h1 elements that need the same style applied.

When to use IDs ?

We should use IDs if only one element on the page should have the style applied and/or we need a unique identifier for that element.

For example : we might assign an ID to a div tag which contains our left menu. The styles for this ID could contain the position, background-color, float properties, size etc. We probably wouldn't want any other element on the page to use this particular style.

Share Article
Live Training Batches Schedule
About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Self-paced Membership
  • 22+ Video Courses
  • 780+ Hands-On Labs
  • 360+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Accept cookies & close this