CSS (Cascading Style Sheet)

CSS(Cascading Style Sheet)
What is CSS?
CSS stands for Cascading Style
Sheets,
Design language intended to simplify
the process of making web pages
presentable
handles the look and feel part of a
web page
Advantages of CSS
CSS saves time
Pages load faster
Easy maintenance
Superior styles to HTML
Multiple Device Compatibility
Global web standards
SYNTAX
Selector: A selector is an HTML tag at which a style
will be applied. This could be any tag like <h1> or
<table> etc.
Property: A property is a type of attribute of HTML
tag. Put simply, all the HTML attributes are
converted into CSS properties. They could be color,
border, etc.
Value: Values are assigned to properties. For
example, color property can have the value either
red or #F1F1F1 etc.
selector { property: value }

Way of using CSS
Inline Style Sheet
Internal Style Sheet
External Style Sheet
Inline Style Sheet
Style attribute is used inside an HTML tag for
inline style sheet,
<element style="...style
rules....">
Example:
<h1 style ="color:black;"> This is inline CSS
</h1>
Output:
This is inline CSS
Internal Style Sheet
<head>
<style type="text/css">
Style Rules
............
</style>
</head>
External Style Sheet(Cont…)
Example:
<head>
h1{
color: balck;
}
</style>
</head>
Output:
This is inline CSS
External Style Sheet
Example :
Consider a simple style sheet file with a name
mystyle.css having the following rules:
h1, h2, h3 {
color: black;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
External Style
Sheet(Cont…)
Now you can include this file mystyle.css in
any HTML document as follows:
<head>
<link href="mystyle.css“ rel="stylesheet"/>
</head>
Priorities of Style Sheet
Inline
Internal
External
CSS Comments
/* This is an external style sheet file */
h1, h2, h3 {
color: #36C;
margin-bottom: 1em;
text-transform: lowercase;
}
/* end of style rules. */
Selectors
Class selector
Id selector
Descendant Selector
Child Selectors
Attribute Selectors
Grouping Selectors
Class selector
.black
{
color: red;
}
<h1 class=“black”> Black heading</h1>

Id selector
#black
{
color: red;
}
<h1 id=“black”> Black heading</h1>

Descendant Selector
Suppose you want to apply a style rule to a
particular element only when it lies inside a
particular element. As given in the
following example, the style rule will apply
to <li> element only when it lies inside the
<ul> tag.
ul li
{
color: red;
}
Child Selectors
body > p
{
color: #000000;
}
This rule will render all the paragraphs in

black if they are a direct child of the
<body> element. Other paragraphs put
inside other elements like <div> or <td>
would not have any effect of this rule.
Attribute Selectors
input[type="text"]
{
color: #000000;
}
p[lang] - Selects all paragraph elements with a lang

attribute.
p[lang="fr"] - Selects all paragraph elements whose lang
attribute has a value of exactly "fr".
p[lang~="fr"] - Selects all paragraph elements whose
lang attribute contains the word "fr".
p[lang|="en"] - Selects all paragraph elements whose
lang attribute contains values that are exactly "en", or
begin with "en-".
Grouping Selectors
h1, h2, h3 {
color: #36C;
margin-bottom: 1em;
}
Grouping Selector(Cont…)
#content, #footer, #supplement
{
Float-left: 510px;
width: 200px;
}
CSS colors
CSS Background Properties
background-color
background-image
background-repeat
background-position
background-attachment
background property
Set the Background Color
<p style="background-color:yellow;">
This text has a yellow background color.
</p>
Set the Background Image
<table style="background-
image:url(/images/pattern1.gif);">
<tr><td>
This table has background image set.
</td></tr>
</table>
Repeat the Background Image
image:url(/images/pattern1.gif);
background-repeat: repeat;">
<tr><td>
This table has background image which
repeats multiple times.
</td></tr>
</table>
Repeat the Background
Image(Cont…)
Horizontally:
background-repeat: repeat-x;">
<tr><td>
This table has background image set which will repeat
horizontally.
</td></tr>
</table>
Repeat the Background
Image(Cont…)
Vertically:
background-repeat: repeat-y;">
<tr><td>
This table has background image set which
will repeat vertically.
</td></tr>
</table>
background-position
background-position:100px 200px;">
<tr><td>
This table has background image positioned
100
pixels away from the left and 200 pixels from
the top.
</td></tr>
</table>
Set the Background
Attachment
<p style="background-
background-attachment:fixed;">
This parapgraph has fixed background image.
</p>
<p style="background-
background-attachment:scroll;">
This parapgraph has scrolling background image.
</p>
CSS Fonts
CSS Fonts
font-family property
font-style property
font-variant property
font-weight property
font-size property
font-family property
<p style="font-
family:georgia,garamond,serif;">
This text is rendered in either georgia,
garamond, or the default
serif font depending on which font you have at
your system.
</p>
It will produce the following result:
font-style property
<p style="font-style:italic;">
This text will be rendered in italic style
</p> t-style:italic;">
It will produce the following result:

font-variant property
<p style="font-variant:small-caps;">
This text will be rendered as small caps
</p>

font-weight property
<p style="font-weight:bold;">
This font is bold.
</p>
<p style="font-weight:bolder;">
This font is bolder.
</p>
<p style="font-weight:900;">
This font is 900 weight. </p>
font-size property
<p style="font-size:20px;">
This font size is 20 pixels
</p>
<p style="font-size:small;">
This font size is small
</p>
<p style="font-size:large;">
This font size is large
</p>
CSS Text
color property
direction property
letter-spacing property
word-spacing property
text-indent property
text-align property
text-decoration property
text-transform property
white-space property
text-shadow property
Explore it by yourself
CSS Links
CSS Links
:link signifies unvisited hyperlinks.
:visited signifies visited hyperlinks.
:hover signifies an element that currently
has the user's mouse pointer hovering
over it.
:active signifies an element on which the
user is currently clicking.
Explore it by yourself
CSS Tables
CSS Tables
border-collapse specifies whether the browser should
control the appearance of the adjacent borders that touch
each other or whether each cell should maintain its style.
border-spacing specifies the width that should appear
between table cells.
caption-side captions are presented in the <caption>
element. By default, these are rendered above the table in
the document. You use the caption-side property to control
the placement of the table caption.
empty-cells specifies whether the border should be shown
if a cell is empty.
table-layout allows browsers to speed up the layout of a
table by using the first width properties it comes across for
the rest of a column rather than having to load the whole
table before rendering it.
CSS Border
CSS Border
The border properties allow you to specify how
the border of the box representing an element
should look. There are three properties of a
border you can change:
border-color specifies the color of a border.

border-style specifies whether a border
should be solid, dashed line, double line,
or one of the other possible values.
border-width specifies the width of a
border.
The border-color Property
border-bottom-color changes the color
of bottom border.
border-top-color changes the color of
top border.
border-left-color changes the color of
left border.
border-right-color changes the color of
right border.
Example
p.example1{
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2{
border:1px solid;
Example(Cont…)
border-color:#009900; /* Green */
}
</style>
<p class="example1">
This example is showing all borders in different
colors.
</p>
<p class="example2">
This example is showing all borders in green color
only.
</p>
The border-style Property
none: No border. (Equivalent of border-
width:0;)
solid: Border is a single solid line.
dotted: Border is a series of dots.
dashed: Border is a series of short lines.
double: Border is two solid lines.
groove: Border looks as though it is carved
into the page.
ridge: Border looks the opposite of groove.
inset: Border makes the box look like it is
embedded in the page.
The border-style
Property(Cont…)
outset: Border makes the box look like it is
coming out of the canvas.
hidden: Same as none, except in terms of
border-conflict resolution for table elements.
border-bottom-style changes the style of bottom
border.
border-top-style changes the style of top border.
border-left-style changes the style of left border.
border-right-style changes the style of right
border.
CSS Lists
CSS Lists
Lists are very helpful in conveying a set of either numbered or
bulleted points. This chapter teaches you how to control list type,
position, style, etc., using CSS.
We have the following five CSS properties, which can be used to
control lists:
list-style-type allows you to control the shape or
appearance of the marker.
list-style-position specifies whether a long point that
wraps to a second line should align with the first line or
start underneath the start of the marker.
list-style-image specifies an image for the marker rather
than a bullet point or number.
list-style serves as shorthand for the preceding properties.
marker-offset specifies the distance between a marker and
the text in the list.
Example
<ul style="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:square;">
<li>Maths</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Physics</li>
Example(Cont…)
</ol>
<ol style="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-roman;">
<li>Maths</li>
<li>Physics</li>
</ol>
Example Output
CSS Box
Model
CSS Box Model
All HTML elements can be considered as
boxes. In CSS, the term "box model" is used
when talking about design and layout.
The CSS box model is essentially a box that
wraps around every HTML element. It
consists of: margins, borders, padding, and
the actual content. The image below
illustrates the box model:
Box Model
Mouse Hover Example
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
background-color: yellow;
}
</style>
</head>
<body>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>
</body>
</html>
Mouse Hover Example
Output

CSS (Cascading Style Sheet)

Uploaded by

Copyright:

Available Formats

You might also like

CSS (Cascading Style Sheet)

Uploaded by

Document Information

Original Description:

Original Title

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

CSS (Cascading Style Sheet)

Uploaded by

Copyright:

Available Formats

CSS(Cascading Style Sheet)

selector { property: value }

<h1 class=“black”> Black heading</h1>

<h1 id=“black”> Black heading</h1>

This rule will render all the paragraphs in

p[lang] - Selects all paragraph elements with a lang

It will produce the following result:

It will produce the following result:

border-color specifies the color of a border.

<p><b>Note:</b> The :hover selector style links on mouse-over.</p>

You might also like