Cascading Style Sheets (CSS)

CONTENT
1 INTRODUCTION
2 SYNTAX
3 TYPES OF CSS 3.2 INLINE STYLE SHEETS
3.3 EXTERNAL STYLE SHEETS
3.1 INTERNAL STYLE SHEETS
4 USE OF CSS
5 LIMITATIONS OF CSS
6 ADVANTAGES OF CSS

1. INTRODUCTION
Cascading Style Sheets (css) is a style sheet language used for describing the presentation of a
document written in a markup language.
Although most often used to set the visual style of web pages and user interfaces written
in HTML and XHTML, the language can be applied to any XML document, including plain
XML, SVG and XUL, and is applicable to rendering in speech, or on other media.
Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create
visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile
applications.
CSS is designed primarily to enable the separation of document content from document presentation,
including aspects such as the layout, colors, and fonts.
This separation can improve content accessibility, provide more flexibility and control in the specification
of presentation characteristics, enable multiple HTML pages to share formatting by specifying the
relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.

2. SYNTAX
CSS has a simple syntax and uses a number of English keywords to specify the names of various style
properties.
A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and
a declaration block.
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.
Selector may apply to:
1. Id: an identifier unique within the document
2. Class: an identifier that can annotate multiple elements in a document
Declaration Box: A declaration box consists of a list of declarations in braces. Each declaration itself
consists of a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon
(;) must be inserted to separate each declaration.

3. TYPES OF CSS
When we create CSS style declarations, we will need to decide where to place our styles. The type of
style we create is characterized by the location we choose to place CSS styles.
Ideally we will place most of the CSS styles on an external style sheet, however there are situations
where internal and inline styles may be more appropriate than an external CSS styles.
Based on where the CSS styles are placed, CSS in defined in three types:
1. Internal Style Sheets
2. Inline Style Sheets
3. External Style Sheets
We have explained this three types in following slides.

3.1 INTERNAL STYLE SHEETS
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>

3.2 INLINE STYLE SHEETS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any
CSS property.
The example below shows how to change the color and the left margin of a <h1> element:
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
An inline style loses many of the advantages of a style sheet (by mixing content with presentation).

3.2 EXTERNAL STYLE SHEETS
With an external style sheet, you can change the look of an entire website by changing just one file!
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" href="mystyle.css">
</head>
Here is how the "myStyle.css" looks:
body {
background-color:lightblue;
}
h1 {
color:navy;
}

4. USE OF CSS
Before CSS, nearly all of the presentational attributes of HTML documents were contained within the
HTML markup; all font colors, background styles, element alignments, borders and sizes had to be
explicitly described, often repeatedly, within the HTML.
CSS allows authors to move much of that information to another file, the style sheet, resulting in
considerably simpler HTML.
For example, under pre-CSS HTML, a heading element defined with red text would be written as:
<h1><font color=“red”>Chapter 1</font></h1>
Using CSS, the same element can be coded using style properties instead of HTML presentational
attributes:
<h1 style=“color:red;”>Chapter 1</h1>

5. LIMITATIONS OF CSS
Some noted limitations of the current capabilities of CSS include:
• electors are unable to ascend
• Cannot explicitly declare new scope independently of position
• Pseudo-class dynamic behavior not controllable
• Cannot name rules
• Cannot include styles from a rule into another rule
• Cannot target specific text without altering markup

6. ADVANTAGES OF CSS
Some noted advantages of CSS include:
• Separation of content from presentation
• Site-wide consistency
• bandwidth
• Page reformatting
• accessibility

Cascading Style Sheets (CSS)

More Related Content

What's hot (20)

Similar to Cascading Style Sheets (CSS) (20)

Recently uploaded (20)

Cascading Style Sheets (CSS)