Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

Introduction To CSS

Uploaded by

sushree007
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Introduction To CSS

Uploaded by

sushree007
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Lesson:

Introduction to CSS

</>
Topics Covered
What is CS
Brief History of CS
CSS versio
Anatomy Structure of CS
Comments in CSS

What is CSS
CSS, which stands for Cascading Style Sheets, is the language used to style an HTML file and tell the browser
how it should render the elements on the page.

Style sheet - A set of rules that specify the presentation of a document. Style sheets are written by an Author,
and interpreted by User Agent, to present the document to the User.

Source document - The document to which one or more style sheets apply. A source document’s structure
and semantics are encoded using a document language(e.g, HTML, XHTML, or SVG)

Author - An author is a person who writes documents and associated style sheets, An authoring tool is a User
Agent that generates style sheets.

User - A user is a person who interacts with a user agent to view, hear or otherwise use the document.

User Agent (UA) - The User-agent basically refers to a browser. User-agent applies default styles as provided
by the browser vendor.

Examples include Chrome, Firefox, Safari etc.

Brief History of CSS


CSS grew out of the necessity of styling web pages. Before CSS was introduced, people wanted a way to style
their webpages which looked all very similar and “academic” back in the day. Not much was possible in
terms of personalization.

CSS lets us move everything presentation-related from the HTML to the CSS so that HTML could get back to
being the format that defines the structure of the document, rather than how things should look in the
browser.

CSS is continuously evolving, and CSS you used 5 years ago might just be outdated, as new CSS techniques
emerged and browsers changed. It’s hard to imagine the times when CSS was born and how different the
web was. At the time, there were several competing browsers, mainly Internet Explorer or Netscape Navigator.

Pages were styled by using HTML, with special presentational tags like `bold` and special attributes, most of
which are now deprecated. This meant you had a limited amount of customization opportunities. The bulk of
the styling decisions were left to the browser. Also, you built a site for one of them, because each one
introduced different non-standard tags to give more power and opportunities.

Full Stack Web Development


Soon people realised the need for a way to style pages, in a way that would work across all browsers. After
the initial idea was proposed in 1994, CSS got its first release in 1996, when the CSS level 1 recommendation
was published, and CSS level 2 got published in 1998, Since then, work began on CSS level 3. The CSS working
Group decided to split every feature and work on it separately. The first CSS level 3 module was released in
the year 1999

CSS version
Cascading Style Sheets is a fairly old technology as far as the Web is concerned. CSS has evolved over time
through different versions, with each version introducing new features, improvements, and capabilities for
web designers and developers.

Here is a brief overview of some of the major versions of CSS

CSS 1

Classic CSS implementation that introduced the text, list, box, margin, border, colour, and background
properties. Initially defined in 1996, almost every feature of CSS1 is supported in Web browsers, but small
quirks do exist around some lesser-used features like `white space`, `letter-spacing`, `display`, and others.
Some problems with CSS1 support are more significant in older, pre-internet Explorer 7 browsers.

CSS 2

The specification is primarily known for positioning and media, particularly print-style sheet features. Many
aspects of CSS2, such as aural style sheets, were never widely implemented and were removed in a later
iteration of the CSS specification

CSS 2.1

This was a revision of CSS2 and was released in 2004. It clarified and improved the CSS2 specification, fixing
inconsistencies and adding new features, but it did not introduce any major changes.

CSS3

This version of CSS is not a single release but rather a collection of modules that are developed and
released independently. CSS3 introduces a wide range of new features and capabilities, including
advanced selectors, gradients, shadows, animations, transitions, and more. Some of the modules in CSS3
include Selectors, Box Model, Backgrounds and Borders, Text Effects, and Transforms.

Anatomy Structure of CSS


The anatomy of Cascading Style Sheets (CSS) refers to the different components or parts that make up CSS
and how they work together to style web pages.

Full Stack Web Development


Selector - 

CSS selectors define the pattern to select elements to which a set of CSS rules are then applied. CSS
selectors can be grouped into the following categories based on the type of elements they can select. The
categories can be Basic selectors, Group selectors, Combinators, Pseudo-classes, and pseudo-elements.

Properties - 

A property is a CSS attribute that defines the aspect of an HTML element to be styled. It could be the font
size, colour, margin, padding, or background

Value - 

value is the setting for a CSS property. It can be a specific color, size, or other values that determine the
appearance of the element

Declaration -

A declaration is a combination of a property and its corresponding value. It defines a specific style for an
HTML element

Rule - 

A CSS rule consists of a selector and its associated declaration block. It defines the styles to be applied to
the selected element(s).

Comments in CSS
CSS gives you the ability to write comments in a CSS file or in the style sheets. Style sheets use the comment
syntax used in C programming language i.e ` /* comments */ `

Comments can be of two types -

Single line comment

Multiple lines comment

Full Stack Web Development

You might also like