CSS is used to style and lay out web pages. It allows control over text formatting, element sizing and positioning, and other design elements. There are different types of CSS including inline, embedded, and external stylesheets. CSS selectors are used to target specific HTML elements for styling. Common CSS properties control elements like text styling, links, borders, positioning, and more.
2. 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
3. What Can CSS Do?
• Text formatting
• Element sizing
• Element positioning
• Change link attributes
• Cursor manipulation
• Element marging
• Element padding
• Floating
4. 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.
5. 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>
6. 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
7. 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
8. 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>
9. 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>
10. 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>
11. Types of Selectors
There are four types of selectors:-
• Element selectors
• Class Selectors
• ID Selectors
• Grouping Selectors
12. Element Selecter
• The element selector select the elements
based on the element name.
• Syntax:
p {
text-align: center;
color: red;
}
12
14. 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;
}
16. 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;
}
17. 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;
}
-
18. 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.
19. 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.
20. 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.
21. Set the text alignment:-Set the text alignment:-
• We can align text with the following:-
text-align: value;
• Possible values are:-
- left
- right
- center
- justify
22. 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
23. 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)
24. 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.
25. 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;
• Possible values are:-
- 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;}
26. 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>
27. 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
28. 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
29. 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
30. 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
31. Relative Position
• A relative positioned element is positioned
relative to its normal position.
• Syntax:
h2.pos_left {
position: relative;
left: -20px;
}
31
33. Absolute Position
• In absolute position, element positioned
anywhere on the page.
• Syntax:
h2 {
position: absolute;
left: 100px;
top: 150px;
}
33
35. 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
36. 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
37. 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
38. Example
• <body>
• <div>
• <p>Paragraph 1 in the div.</p>
• <p>Paragraph 2 in the div.</p>
• <span><p>Paragraph 3 in the div.</p></span>
• </div>
• <p>Paragraph 4. Not in a div.</p>
• <p>Paragraph 5. Not in a div.</p>
• </body>
• OUTPUT
38
39. 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 {
background-color: yellow;
}
39
40. Example
• <body>
• <div>
• <p>Paragraph 1 in the div.</p>
• <p>Paragraph 2 in the div.</p>
• <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
• </div>
• <p>Paragraph 4. Not in a div.</p>
• <p>Paragraph 5. Not in a div.</p>
• </body>
• OUTPUT
40
41. 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 {
background-color: yellow;
}
41
42. 42
Example
• <body>
• <div>
• <p>Paragraph 1 in the div.</p>
• <p>Paragraph 2 in the div.</p>
• </div>
• <p>Paragraph 3. Not in a div.</p>
• <p>Paragraph 4. Not in a div.</p>
• </body>
• OUTPUT
43. 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 {
background-color: yellow;
}
43
44. Example
• <body>
• <div>
• <p>Paragraph 1 in the div.</p>
• <p>Paragraph 2 in the div.</p>
• </div>
• <p>Paragraph 3. Not in a div.</p>
• <p>Paragraph 4. Not in a div.</p>
• OUTPUT
44
45. CSS-image opacity
• property for image transparency is called opacity.
• Opacity value contain b/w 0 to 1.
• Syntax:
img {
opacity:0.4;
}
45