Css

CONTENT
• Introduction
• History Of Css
• Types Of Css Styling
• Css Syntax
• Css Selector
• Css Variations Or Css Versions

INTRODUCTION
• 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 files

HISTORY OF CSS
CSS, developed in 1997, defines the presentation semantics to display HTML elements. CSS
is designed primarily to enable the separation of document content from presentation
elements such as the layout, fonts and colors. Style sheets are simply text files with ".css"
extension.
CSS is supported by all browsers today and has become a powerful tool for Web designer
to change the mood and tone of a Web site. The term cascading derives from the fact that
multiple style sheets can be applied to the same Web page.

TYPES OF CSS STYLING
There are three types of css we use in web designing which are as follows
• Inline css
• Internal css
• External css

INLINE STYLING
An inline style may be used to apply a unique style for a single element.
An inline style loses many of the advantages of a style sheet (by mixing content
with presentation). Use this method sparingly!
To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.
Example:
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

INTERNAL STYLE SHEET
• An internal style sheet may be used
if one single page has a unique
style.
• Internal styles are defined within the
<style> element, inside the head
section of an HTML page.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

EXTERNAL STYLE SHEET
An external style sheet can be written in
any text editor. The file should not
contain any html tags. The style sheet file
must be saved with a .css extension.
Each page must include a reference to
the external style sheet file inside the
<link> element. The <link> element
goes inside the <head> section:
<head>
<link rel="stylesheet" type="text/css" hre
f="mystyle.css">
</head>
An example of a style sheet file
called "myStyle.css", is shown below:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

CSS SYNTAX
A CSS rule set consists of a selector and
a declaration block:
p {color:red;text-align:center;}
• The selector points to the HTML
element you want to style.
• The declaration block contains one or
more declarations separated by
semicolons.
• Each declaration includes a property
name and a value, separated by a
colon.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#xyz{
color: red;
}
</style>
</head>
<body>
<p id="xyz" style="color: blue">
To demonstrate specificity </p>
</body>
</html>

CSS SELECTOR
In CSS, selectors are used to declare which part of the markup a style applies to
by matching tags and attributes in the markup itself. Selectors may apply to:
• all elements of a specific type, e.g. the second-level headers h2
• elements specified by attribute, in particular:
• id: an identifier unique to the document
• class: an identifier that groups multiple elements in a document
• elements depending on how they are placed relative to others in
the document tree.
Classes and IDs are case-sensitive, start with letters, and can include alphanumeric
characters and underscores. Any number of instances of any number of elements
may have the same class. Conventionally, IDs only apply to one instance of one
element.

CSS VERSIONS
CSS 1
The first CSS specification to become an official W3C Recommendation is CSS level 1,
published on December 17, 1996. Håkon Wium Lie and Bert Bos are credited as the
original developers. Among its capabilities are support for
• Font properties such as typeface and emphasis
• Color of text, backgrounds, and other elements
• Text attributes such as spacing between words, letters, and lines of text
• Alignment of text, images, tables and other elements
• Margin, border, padding, and positioning for most elements
• Unique identification and generic classification of groups of attributes
• The W3C no longer maintains the CSS 1 Recommendation.

CSS 2
CSS level 2 specification was developed by the W3C and published as a
recommendation in May 1998. A superset of CSS 1, CSS 2 includes a number of
new capabilities like absolute, relative, and fixed positioning of elements and z-
index, the concept of media types, support for aural style sheets (which were
later replaced by the CSS 3 speech modules) and bidirectional text, and new font
properties such as shadows.
The W3C no longer maintains the CSS 2 recommendation.
CSS VERSIONS

CSS VERSIONS
CSS 3
CSS 3 is divided into several separate documents called "modules". Each module
adds new capabilities or extends features defined in CSS 2, preserving backward
compatibility. Work on CSS level 3 started around the time of publication of the
original CSS 2 recommendation. The earliest CSS 3 drafts were published in June
1999

CSS VERSIONS
CSS 4
There is no single, integrated CSS4 specification, because it is split into separate
modules. However, there are "level 4" modules.
Because CSS3 split the CSS language's definition into modules, the modules have
been allowed to level independently. Most modules are level 3—they build on
things from CSS 2.1. A few level-4 modules exist (such as Image Values,
Backgrounds & Borders, or Selectors), which build on the functionality of a
preceding level-3 module. Other modules defining entirely new functionality, such
as Flexbox, have been designated as "level 1".
So, although no monolithic CSS4 will be worked on after CSS3 is finished
completely, the level 4 modules can collectively be referred to as CSS4.

THANKS FOR VIEWING THIS PRESENTATION

Css

Related slideshows

More Related Content

Css