CSS1

CSS
CSS Rules, Types, Font Properties, Text Formatting Properties, Border Properties, Margin
Properties, Color Properties, Link Properties, Position Properties, Padding Properties, List
Properties, span & div tags etc.
Learning with this CSS tutorial will give you a very confident start with its implementaion. So,
let's start!
Introduction
 CSS stands for Cascading Style Sheet.

 It is a Style sheet language.
 It describes the presentation of an HTML or XML document.
 CSS is used to control the web document in a simple and easy way.
 CSS was developed by Hakon Winm Lie of MIT in 1994.
Concept of Style Sheets
 Style sheet describes how documents are presented on screen.

 It is a collection of formatting rules that affect the appearance of one or more document.
The two most common style sheets are:
1) XSLT
 eXtensible Style sheet Language Transformation.
 It is applicable only for XML document.
2) CSS
 Cascading Style Sheets.
 It is applicable for HTML and XML or any web language.
HTML v/s CSS
HTML CSS
HTML stands for hyper text mark CSS stands for Cascading Style Sheet.
up language.
It specifies web page elements like CSS determines an element size, color etc.
table, paragraph etc.
It is used to identify the content of It is used to specify the presentation of that
the web page. content.
It is used for defining the web page CSS is used for styling and formatting the
structure. structured content of the web pages.
Advantages of CSS
Reusability: It means CSS file once created can be reused.
Easy maintenance: If any changes are required for any web page or document then changes can
be simply made in a CSS file where all elements in the web pages or document will be updated
automatically.
Download content faster: CSS requires less code and controls the order of element so that
content can be downloaded before images.
Platform Independent: The scripts are platform independent and support all the latest
browsers.
Data Integrity: CSS allows to maintain the integrity of data.
Limitations of CSS
 CSS cannot create layout effect.
 It does not give absolute control over a page's appearance.
 It does not guarantee any kind of absolute pixel control
Style Sheet Rules

 A CSS consists of selector and declaration block.
 Rule = selector + declaration.
Property
 It is assigned to selector for manipulating its style.

 Example of Property- background, border, text-align.
Value
 It is assigned to set a property.

 In the diagram above, the property color value is set to yellow.
Declaration
 It defines property and value for selector.

 For example - color : yellow.
Selector
 It is the name of an HTML element.

 It is applicable to a declaration.
Types of Selectors
1. The Element / Tag selector
It is used to define tags associated with HTML.
Syntax:
TagSelector {Property : Value; }
Examples:
 H1 {color : pink;}
 H1, p {font-family : times roman;}
2. Class selectors
It is used to define styles without redefining plain HTML tags.
Syntax:
.ClassSelector {Property : Value;}
Example: Demonstration of class selector

<!DOCTYPE html>
<html>
<head>
<style>
.greet
{
color:red;
text-align: left;
}
</style>
</head>
<body>
<H1 class= "greet"> WELCOME!!!</h1>
</body>
</html>
Output:
3. ID selectors
ID selector is used to define styles relating to objects with a unique ID.
Syntax:
#IDSelector {Property : value;}
Example: Illustration of id-selector

<!DOCTYPE html>
<html>
<head>
<style>
#greet {
color:purple;
font-family : arial;
}
</style>
</head>
<body>
<div id= "greet"> WELCOME!!!</div>
<p> Welcome Students!</p>
<div id="greet"> <p> We will learn CSS</p></div>
</body>
</html>
Output:
4. Grouped Selectors
 If there are elements with the same style definitions, then it is easy for the group selector to
minimize the code.
 Group selectors are specified with comma (,) in between their names.
Syntax:
Selector1, selector 2, ….{property : value;}
Example: Illustration of grouped selector
<!DOCTYPE html>
<html>
<head>
<style>
h1, p {color : red;}
</style>
</head>
<body>
<h1> Welcome </h1>
<p> welcome Students </p>
</body>
</html>
Output:
Note: In the above program, same declaration is applied for both <h1> and <p> tags.
5. Context Selectors
Example: Demonstration of context selector

<!DOCTYPE html>
<html>
<head>
<style>
b i {color : red;}
</style>
</head>
<body>
<b><i> Welcome </i></b>
<b> welcome Students </b>
</body>
</html>
Output:
6. CSS comments
 Comments are denoted within a style sheet like in C programming.

 They do not work in the HTML code.
Example: Demonstration of comments
<!DOCTYPE html>
<html>
<head>
<style>
b i {color : red;}// This will work for line 1 not for line 2
</style>
</head>
<body>
<b><i> Welcome </i></b> //line 1
<b> welcome Students </b> // line 2
</body>
</html>
Output:
Note: Comments work only in the CSS code whereas in HTML code they do not work.
Types of Style Sheets
There are three different types of style sheets:

1. Inline
2. Embedded or internal
3. External
1. Inline Style Sheet

 The style specifications are placed within the html elements.
 It uses the style attribute of the html element.
Syntax: <h1 style> … </h1>
 While using the style sheet the language must be specified.

 Language is specified using the <META> tag in the <HEAD> section of the document.
Syntax: <head> <meta http-equiv=“Content-style-type” content=“text/css”> </head>
 It is the most common method of attaching a style sheet to an HTML document.

 The inline style sheet is used to apply declaration style to an individual element in a particular
document.
Inline style sheet should be avoided in two cases:
 If we want to apply the same style declaration to different elements every time.
 Inline style sheet mixes the content with the presentation. So, if you want to avoid this mixing
up, don't use Inline style sheet.
Example: Demonstration of inline style sheet
<html>
<head>
<title> Inline CSS</title>
<meta http-equiv="content-style-type" content="text/css">
</head>
<body style="background:orange">
<h1 style="color:White; font-family:arial; font-size:14pt; text-transform:uppercase; text-
align:left;"> This is an example of inline css</h1>
</body>
</html>
Output:
2. Embedded or internal style sheet
 The style specifications are defined within the head section of the web page or HTML page.
 In this style sheet type, the alternate method of attaching a style sheet to HTML document is
<STYLE> tag.
 While using <STYLE> tag it must include TYPE attribute.
 TYPE attribute specifies what type of style is included in the document.
The attributes of <STYLE> element tag are:
1. type
 It specifies the internal type of the style language.

 In CSS, the value of type is “text/CSS”.
2. media
 Media specifies the medium on which style sheet is applied.

 Its default value is screen.
 Its value can be screen/print/projection.
Example 1: Demonstration of embedded style sheet
<!DOCTYPE html>
<html>
<head>
<title> Embedded CSS</title>
<style type="text/CSS">
body {
background-color:#ccffff;
}
h1 { color: purple; font-family: arial; font-size: 30 px; text-transform: uppercase; text-
align: left;}
</style>
</head>
<body>
<h1> This is an example of embedded CSS</h1>
<h1> B E </h1>
</body>
</html>
Output:
Example 2: Demonstration of embedded style sheet
<!DOCTYPE html>
<html>
<head>
<title> Embedded CSS</title>
<style type="text/CSS">
body {
background-color:#ccffff;
}
h1 { color: purple; font-family: arial; font-size: 30 px; text-transform: uppercase; text-
align: left;}
</style>
</head>
<body>
<h1>Computer programming languages</h1>
<table border="1">
<tr>
<th>Web-tech</th>
<th>Object-Oriented</th>
</tr>
<tr>
<td>CSS</td>
<td>java</td>
</tr>
</table>
<p>Embedded CSS is better than Inline CSS</p>
</body>
</html>
Output:
3. External style sheet
 In external style sheets, the CSS files are kept separately from an HTML document.
 External CSS file contains only CSS code and it is saved with a “.css” extension.
 The CSS file is used as an external style sheet file in HTML document by using a <LINK> tag
instead of <STYLE> tag.
 The <LINK> tag is placed in the <HEAD> section of the HTML document.
 The main advantage of External style sheet is that external CSS is a “true separation” of style
and content.
 It is easier to reuse CSS code in any separate file.
Syntax:
<HEAD> <LINK REL=“stylesheet” TYPE=“text/css” HREF=“mystyle.css”>
</HEAD>
Attributes of <LINK> tag
1. rel
 It is used to specify a relationship of CSS with HTML document.
 Its default relationship value is “style sheet”.
 Possible relationship values are stylesheet/alternate stylesheet.
2. type
 Type attribute is not used in META tag.
 It specifies which type of style language is used.
 The value of the type attribute is “text/CSS”.
3. href
 It points to the external style sheet file's URL.
 It specifies the path of the style sheet file which is linked with the HTML document.
4. title
 It is optional.
 It indicates the name of the style sheet.
Example: Demonstration of external style sheet
NOTE: Save following program as external.css
body { background:#ccffff;}
h2,p {
color: green;
font-family:arial;
text-align:center;
}
p i{
color: orange;
border-style: solid;
font-weight: lighter;
}
.ex{color:purple}
NOTE: Save following program as external.html and link above CSS file in it.
<html>
<head><title>Extenal style sheet</title>
<link rel= "stylesheet" type= "text/CSS" href="external.css">
</head>
<body>
<h2> It is an example of External style sheet</h2>
<p class="ex"> This is a "true separation" of style and content</p>
<p><i> External CSS </i> </p>
</body>
</html>
Output:
NOTE: To run the program, save the above .css and .html files on the same location or folder.

CSS1

Uploaded by

Copyright:

Available Formats

CSS1

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS1

Uploaded by

Copyright:

Available Formats

CSS

 CSS stands for Cascading Style Sheet.

Concept of Style Sheets

 Style sheet describes how documents are presented on screen.

HTML v/s CSS

Data Integrity: CSS allows to maintain the integrity of data.

Style Sheet Rules

 It is assigned to selector for manipulating its style.

 It is assigned to set a property.

 It defines property and value for selector.

 It is the name of an HTML element.

Example: Demonstration of class selector

Example: Illustration of id-selector

Example: Demonstration of context selector

 Comments are denoted within a style sheet like in C programming.

There are three different types of style sheets:

1. Inline Style Sheet

 While using the style sheet the language must be specified.

 It is the most common method of attaching a style sheet to an HTML document.

 It specifies the internal type of the style language.

 Media specifies the medium on which style sheet is applied.

Attributes of <LINK> tag

You might also like