Back to Index

unit-3

What is CSS?

CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once External stylesheets are stored in CSS file.

History of CSS

CSS is one of three cornerstone technologies used on the web (the other two are HTML and JavaScript). CSS stands for Cascading Style
Sheets – the clues are really in the words 'cascading' and 'style' with cascading describing the way that one style can cascade from one to another
.

Versions of CSS

  • CSS Level 1 (CSS1): This was the first version of CSS, introduced in 1996 by the World Wide Web Consortium (W3C). CSS1 provided basic styling capabilities such as font properties, colors, and text formatting.
  • CSS Level 2 (CSS2): CSS2 was introduced in 1998 and expanded upon the capabilities of CSS1. It introduced features like positioning, floating elements, z-index, and more advanced selectors.
  • CSS Level 2.1: This version of CSS was a revision of CSS2 and aimed to clarify certain aspects of the specification and fix inconsistencies. CSS 2.1 became a W3C Recommendation in 2011.
  • CSS Level 3 (CSS3): CSS3 is not a single monolithic specification but rather a collection of modules, each adding new features and capabilities to CSS. CSS3 includes modules for things like selectors, backgrounds and borders, text effects, 2D/3D transformations, animations, and more.
  • CSS4: While there isn't an official CSS4 specification, the term "CSS4" is sometimes used colloquially to refer to the ongoing development of CSS beyond CSS3. However, the modular approach of CSS3 means that new features are added to the CSS specifications through individual modules rather than a complete overhaul.

    Browser Support

    CSS was Supported by the following Browser:

    What's New in CSS 3

    CSS vs CSS 3

  • Compatibility. CSS3 is CSS; its just a more advanced version. Therefore, any code you have written in CSS is valid in CSS3. Unfortunately, the reverse isnot true.
  • Lists in CSS vs. CSS3. Developers using CSS can create a different ordered or unordered list. In addition, web developers can set background colors or introduce custom images for a list-item marker. CSS can also tweak list types like circle, square, and disc.
    Text Effects and Animations. CSS animations use JavaScript and jQuery. It has no feature of layer design, nor are there any special effects such as text shadows, text selections, etc.
  • Fonts. CSS ensures that all machines and browsers should display and use the same fonts so that the design doesnot create an anomaly
  • Pseudo-classes. CSS supports pseudo-classes that let developers define a particular state of an HTML element. For example, developers can use the pseudo-class to highlight the links on a web page that a user has already clicked on or style an HTML element when the user's mouse hovers over it.

    Types of CSS

    The three types of CSS are external, internal, and internal.


    Inline CSS is a method of applying CSS styling directly within HTML elements using the “style” attribute. It allows developers to define individual element styles, It is used to apply a unique style to a single HTML element


    External CSS is used to style multiple HTML pages with a single style sheet. External CSS contains a separate CSS file with a .css extension. The CSS file contains style properties added on selectors (For example class, id, heading, … etc.).

    Internal CSS is a method for defining CSS styles within an HTML document's style element, it is used to provide a unique style for a single HTML document in the head section. This means that the CSS is embedded within the style tag inside the head section of the HTML file

    CSS selectors and Their types:

    We can divide CSS selectors into five categories:

  • Simple selectors (select elements based on name, id, class)
  • Combinator selectors (select elements based on a specific relationship between them)
  • Pseudo-class selectors (select elements based on a certain state)
  • Pseudo-elements selectors (select and style a part of an element)
  • Attribute selectors (select elements based on an attribute or attribute value)