Cascading Style Sheets By Mukesh

CONTENTSCONTENTS
• What are CSS
• What can CSS do ?
• Structure of CSS
• CSS Rules
• Types of CSS
• Types of Selector
• CSS links
• CSS border
• CSS display
• CSS pasition
• CSS combinator

What Can CSS Do?
• Text formatting
• Element sizing
• Element positioning
• Change link attributes
• Cursor manipulation
• Element marging
• Element padding
• Floating

What Are CSS?What Are CSS?
• CSS is stands for the CASCADING STYLE SHEETS.
• Cascading Style Sheets (CSS) is a style sheet language that
is used to describe the presentation of a document written in a
markup language.
• CSS defines how HTML elements are to be displayed.
• Created by: W3C(world wide web consortium) in 1996.

CSS Page StructureCSS Page Structure
Document (HTML)
Head
Body
H1 Heading
Paragraph 1
Style
Title Text
<HTML>
<HEAD>
<TITLE>Title Text</TITLE>
<STYLE>……</STYLE>
</HEAD>
<BODY>
<H1>H1 Heading</H1>
<P>Paragraph 1</P>
</BODY>
</HTML>

Cascading Style RulesCascading Style Rules
• A Style Rule is composed into two parts: a selector and a
declaration.
h1 {color: red;}.
• CSS selectors are used to "find" (or select) HTML
elements based on their id, class, type, attribute, etc.
• The Declaration determines the property values of a
selector.
P {color: red;}
Selector
Declaration
ValueProperty

Types of CSSTypes of CSS
There are three types of implementations in CSS
 Inline
• Affects only the element where applied.
 Embedded (internal)
• Affects only the elements in a single file
 External
• Linked to an unlimited number of files

Inline CSSInline CSS
• An inline style may be used to apply a unique style for
a single element.
• Use it when you need to format just a single section in a
web page
• Syntax:
<h1 style="color:blue; margin-left:30px;">This is a
heading.</h1>

Embedded or internal stylesEmbedded or internal styles
•An internal style sheet may be used if one single page
has a unique style.
•Use it when you need to modify all instances of
particular element (e.g., h1) in a wb page
•Syntax:
<head>
<style>
body {
background-color:black;
}
</style>
</head>

External style sheetsExternal style sheets
•An external style sheet is a text file containing the style
definition (declaration)
•Use it when you need to control the style for an entire
web site
•Syntax:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"
>
</head>

Types of Selectors
There are four types of selectors:-
• Element selectors
• Class Selectors
• ID Selectors
• Grouping Selectors

Element Selecter
• The element selector select the elements
based on the element name.
• Syntax:
p {
text-align: center;
color: red;
}
12

The Class Selectors :-
• Class selecter defined by . (dot).
• The class selector selects elements with a specific class
attribute.
• Syntax:
.center {
text-align: center;
color: red;
}

The ID Selectors :-
• ID selecter defined by #
• The id selector uses the id attribute of an HTML element to
select a specific element.
• Syntax:
#demo {
text-align: center;
color: red;
}

Grouping Selectors:-
• There we select more than one element at a time and all are
seprated by comma(,).
• Syntax:
h1, h2, p
{
text-align: center;
color: red;
}
-

Set the space between characters:-Set the space between characters:-
• We can adjust the space between letters in the following
manner:-
letter-spacing: value;
•Syntax: <p style="letter-spacing:5px;">
This text is having space between letters.
</p>
•This will produce following result: -
T h i s t e x t i s h a v i n g s p a c e b e t w e e n l
e t t e r s.

Set the space between words:-Set the space between words:-
• We can adjust the space between words in the following
manner :-
word-spacing: value;
• Syntax: <p style="word-spacing:5px;">
This text is having space between words.
</p>
• This will produce following result:-
This text is having space between words.

Set the text indent:-Set the text indent:-
• We can indent the first line of text in HTML element with
the following:-
text-indent: value;
• Possible values are:-
- length
- percentage
OUTPUT:
In my younger and more vulnerable years my father gave me some advice that
I've been turning over in my mind ever since.

Set the text alignment:-Set the text alignment:-
• We can align text with the following:-
text-align: value;
- left
- right
- center
- justify

Decorating the text:-Decorating the text:-
• You can decorate text with the following:-
text-decoration: value;
• Possible values are :-
- none
- underline
- overline
- line through
- blink

Set the text cases:-Set the text cases:-
• We can control the size of letters in an HTML element with
the following:-
text-transform: value;
• Possible values are
- none (Value)
- capitalize (Text Transform)
- lowercase (lowercase)
- uppercase (UPPERCASE)

Set the text shadow:-Set the text shadow:-
• Following is the example shows how to set the shadow
around a text and boxes.
• Syntax:
<p style="text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow
property, this text will have a blue shadow.</p>
• This may not be supported by all the browsers.

Set the font style:-Set the font style:-
• We can set the style of text in a element with the font-style
property
font-style: value;
- normal - The text is shown normally
- italic - The text is shown in italics
- oblique - The text is "leaning" (oblique is very similar
to italic, but less supported)
• Example:-
p.normal {font-style:normal;}

CSS – LinksCSS – Links
• Usually these all properties are kept in the header part of
HTML document.
• All links properties come with sequencially to be more
effective
• Syntax:
<style>
a:link {color: #000000, Text-decoration:none}
a:visited {color: #006600;}
a:hover {color: #FFCC00;}
a:active {color: #FF00CC;}
</style>

CSS-Border
• The border-style property specifies what kind of
border to display.
• Syntax:
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
27

CSS-Display
• The display property specifies how an element is
displayed it may be hidden or visual.
• Syntax:
h1.hidden {
visibility: hidden;
}
li {
display: inline;
}
28

CSS-Position
• The CSS positioning properties allow you to
position an element.
• There are four types of positions
- Fixed Position
- Relative Position
- Absolute Position
- Overlapping
29

Fixed Position
• An element with a fixed position is positioned
relative to the browser window.
• Syntax:
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
30

Relative Position
• A relative positioned element is positioned
relative to its normal position.
• Syntax:
h2.pos_left {
position: relative;
left: -20px;
}
31

Absolute Position
• In absolute position, element positioned
anywhere on the page.
• Syntax:
h2 {
position: absolute;
left: 100px;
top: 150px;
}
33

Overlapping Elements
• When elements are positioned outside the normal
flow, then they can overlap on other elements.
• Syntax:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
OUTPUT:
35

CSS-Combinators
• There are more than one selecters and it relate
b/w each other.
• There are four different Combinator
- Descendant selector
- Child selector
- Adjacent sibling selector
- General sibling selector
36

Descendant selector
• The descendant selector matches all elements that
are descendants of a specified element.
• It selects all <p> elements inside <div> elements:
• Syntax:
div p {
background-color: yellow;
}
37

Example
• <body>
• <div>
• <p>Paragraph 1 in the div.</p>
• <span><p>Paragraph 3 in the div.</p></span>
• </div>
• <p>Paragraph 4. Not in a div.</p>
• </body>
• OUTPUT
38

Child selector
• The child selector selects all elements that are the
immediate children of a specified element.
• It selects all <p> elements that are immediate
children of a <div> element:
• Syntax:
div > p {
}
39

Example
• <body>
• <div>
• <span><p>Paragraph 3 in the div.</p></span> 
• </div>
• </body>
• OUTPUT
40

Adjacent sibling selector
• The adjacent sibling selector selects all elements
that are the adjacent siblings of a specified
element.
• It selects all <p> elements that are placed
immediately after <div> elements:
• Syntax:
div + p {
}
41

42
Example
• <body>
• <div>
• </div>
• </body>
• OUTPUT

General sibling selector
• The general sibling selector selects all elements
that are siblings of a specified element.
• selects all <p> elements that are siblings of <div>
elements:
• Syntax:
div ~ p {
}
43

Example
• <body>
• <div>
• </div>
• OUTPUT
44

CSS-image opacity
• property for image transparency is called opacity.
• Opacity value contain b/w 0 to 1.
• Syntax:
img {
opacity:0.4;
}
45

Cascading Style Sheets By Mukesh

Cascading Style Sheets By Mukesh

More Related Content

What's hot

Viewers also liked

Similar to Cascading Style Sheets By Mukesh

More from Mukesh Kumar

Recently uploaded

Cascading Style Sheets By Mukesh