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

Cascading Style Sheets By Mukesh