Scribd
Upload
54 views

WT Chap 2 CSS

Cascading Style Sheets (CSS) is a language for styling web pages that allows control over color, layout, fonts and more. CSS reduces development time and makes web pages more dynamic and interactive. There are three levels of style sheets - inline, internal/document, and external - with external being the highest level as it can apply styles across multiple web pages. CSS rules contain selectors, properties, and values to style specific elements or groups of elements on a page.

Uploaded by

muskan shaikh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
54 views

WT Chap 2 CSS

Cascading Style Sheets (CSS) is a language for styling web pages that allows control over color, layout, fonts and more. CSS reduces development time and makes web pages more dynamic and interactive. There are three levels of style sheets - inline, internal/document, and external - with external being the highest level as it can apply styles across multiple web pages. CSS rules contain selectors, properties, and values to style specific elements or groups of elements on a page.

Uploaded by

muskan shaikh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 37

Chapter 2

Cascading Style Sheets


CSS
 Cascading Style Sheets (CSS) is a simple
design language intended to simplify the process
of making web pages more presentable.

 Using CSS you can control the color of the text,


the style of the font, spacing between the
paragraphs, background images and colors,
layout designs etc..
Differences b/w HTML & CSS
HTML CSS
• Creates only static web pages • Creates dynamic web pages
• Consists of simple HTML Tags • Consists of a combination of
• HTML does not allow to alter HTML and CSS
the text and graphics on the • CSS can alter the text and
web page unless the web graphics without changing
page is changed. the web page
• Creating web page is vary • Creating web page is
simple complex
• Less interactive web pages • More interactive pages
Advantages of CSS
 CSS reduces the time speed in developing
and maintaining HTML documents.

 Rather than formatting the text, you can


simply change the style definition in one
place and the same will be applied to the
HTML document.

 As the code gets reduced, the web page also


get loaded fast

 CSS provides more formatting options than


the standard HTML document.
Levels Of Style Sheets
There are 3 levels of style sheets
1. Inline
Level

2. Document 3. External
Level Level
Inline Level Style sheet
• This is the lowest level.
• Inline style sheet apply to the single
element and that’s why they are not
preferred more
• Inline style sheets are declared
within individual tags and affect
those tags only
• Inline sheets are declared within
the style attribute.
Inline Level Style sheet
• The general form for inline level is
given below
• style=“property_1:value_1;
property_2:value_2;
……..property_n:value_n;”
Sample program for Inline style sheet

<!--Inline CSS Example -->


<html>
<body>
<h1 style="color:red;margin-
left:30px">Text in red color with
30pixel margin on left</h1>
<p style="color:blue;">This is a
paragraph tag with color blue</p>
</body>
</html>
OUTPUT
Document/Internal Level Style Sheet
• This is a second level style sheet.
• Document level style sheet applies
to the whole body of the document.
• It is specified within a pair of
<style>….</style>
• This tag must be placed between
the <head>….</head> section taf of
the document.
Syntax
Syntax for document level style sheet is
given below
Element_name
{
property_1:value_n;
property_2:value_2; property_3:value_3;
.
.
property_n:value_n;
}
Sample Program
<html>
<head>
<style>
h1{color:blue;font-family:"Times New Roman";font-
style:italic;font-size:18pt;}
b{color:yellow;font-family:"Viner Hand ITC";font-
style:normal;font-size:25pt;margin-left:100pt}
</style>
</head>
<body>
<h1>Hello…How are you?</h1>
<b>This is a bold tag</b>
<h1>Good Morning</h1>
<b>Welcome to KLE BCA Hubballi</b>
</body>
</html>
Output
External Level Style Sheet
• This is the highest level.

• External style sheet can apply to


any number of web pages at a time.

• If u make one change in an external


style sheet, the change is universal
on all the pages where the style is
used.
External Level Style Sheet
• An external style sheet is declared
in an external file with a .cc
extension.
Linked

Example.html Example.css
External Level Style Sheet
• External style sheets are called
using the <link> tag which is placed
inside the <head> tag of the HTML
document.
• The <link> tag takes three
attributes
• rel: rel stands for relation.
This attribute defines the relation
between a linked resource and the
current document.
Example: rel=“stylesheet”
External Level Style Sheet
• type- this attribute defines what type
of document it is.
Example: value=“text/css”
• href- it denotes the name and the
location of the document where where
CSS code is been writtenExample:
href=“c\BCA\example.html”
Example
Output
CSS Syntax

Decleration
Selector

h1{color:red; background:green}
Seperator
Property Value

Colon
Parts of style rule
The style rule is made up of three
parts
1. Selector: It indicates the name of
the tag at which the style will be
applied.
2. Property: the attributes of html are
converted to CSS properties.
3. Value: Values are assigned to
properties.
Types of Selectors
SELECTORS

Simple Selector Class Selector

Universal Selector

Generic Selector Id Selector


Simple Selector
Simple selector apply to the named
element in the HTML document.
The selector could be a list of
element separated by commas.

Example:
h1{font-size;20pt}
h2,h3{font-size:12pt}
Simple Selector
Simple Selector
Class Selector
This selector allows different
occurrences of the same tag to use
different style specification.
Example
<head><style>
p.cs1{color:red;font-size:12pt}
</style></head>
<body>
<p class=“cs1”>This used class selector
</body>
Generic Selector
Generic selector applies to more than
one element/tag.
This is implemented without using the
tag name.
Example:
.mine{color:red;font-size:30pt;}
Generic Selector
Generic Selector
Id Selector
Id selector allows the application of a
style to one specific element.
Example:
#select1{color:green;font-
size:10pt;}
#select2{color:red;font-size:20pt;}
Id Selector
Id Selector
Universal Selector
Universal selector applied the style to
the all the tags present in the html
document.
Universal selector is represented with
* symbol

Example:
*{font-size:30pt}
Universal Selector
Universal Selector

You might also like