CSS stands for Cascading Style Sheets, Cascading style sheets is a specification created by the W3C which allows web developers to create style documents to control textual features and the positioning of objects on the page. Style sheets represent a major breakthrough for Web page designers.
A style defines the appearance of a document element. The collection of styles for a Web page or Website is known as a style sheet.
Version:
● CSS1 was released in December 1996. Around 50 properties for simple formatting, fonts and colors.
● CSS2 was released in May 1998. Additional 70 properties for more advanced features like numbering, cursors, and page breaks.
● CSS3, the latest standard version.
Advantages:
Simplicity
● A way to layout web pages without the use of complex tables and tricks.
Flexibility
● A way for users to take control of how web pages are displayed.
Style Type:
There are three ways of employing CSS in Web pages:
Inline styles (in the tag)
Embedded or global styles ( in the head)
Linked or external style sheets
1. Inline Style in CSS
The Inline style is specific to the tag itself. Added to each tag; the style affects only that tag and has no effect in the rest of the document.
When and How?
● To format a single section in a page
● Problems arise when need to change styles frequently!
Add the style attribute to the HTML tag. Style declaration must be enclosed within double quotation marks.
<h1 style="color: blue"> Hello world! </h1>
<tag style="style declarations"> <p style="font-family: Arial,sans-serif; font size: 28pt;"> A paragraph with 28pt font size. </p>
2. Embedded Style
● An embedded style is applied throughout a page. Uses a <style>
tag within the head section.
● Within the <style>
tag, enclose the style declarations needed for the entire Web page.
● Controls style on a page basis
Syntax is:
<style type="style sheet language"> style declarations; </style>
Example:
<!DOCTYPE html> <html> <head> <style> h1{font-type:Aril,Sans Serif;font-size:40pt;font-weight:bold} </style> </head> <body> <h1>Hello world!</h1> </body> </html>
A Style Declaration
● A style declaration consists of attribute names that specify such features as:
font size
color
font type
● Attributes followed by colon and value
selector {property: value}
● Multiple attributes allowed (separate with ;)
● The general syntax for the style declaration is:
selector { property1: value1; property2: value2 }
A Style Anatomy

● Style declaration within the <style> tags obey the following syntax:
selector {attribute1:value1;attribute2;value2; ...}
● selector identifies an element in document, such as a heading or paragraph, and the attributes and values within the curly braces indicate the styles applied to all the occurrences of that element
● This collection of attributes and values is also referred to as the declaration of the selector.
Example
<style> h1{font-type:Aril,Sans Serif;font-size:40pt;font-weight:bold} </style>
Problems with Embedded Styles
● Each instance of a style must be hand coded, meaning that any document with lots of style changes becomes labor intensive.
● Maintaining a consistent look and feel across pages is tough on a large site.
● Making style changes to multiple pages is difficult and very time consuming.
Example
<!DOCTYPE html> <html> <head> <style> h1{font-type:Aril,Sans Serif;font-size:40pt;font-weight:bold;color:blue} p { font-family: georgia, serif; font-size: x-large; color:#ff9900; } </style> </head> <body> <h1>Tutorials for RK EDU(tutorials.abssorganisation.com)</h1> <p>This is embedded style example</p> </body> </html>
0 Comments