Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
34 views

CSS (Cascading Style Sheet)

CSS (Cascading Style Sheets) is a design language intended to simplify the process of making web pages presentable. It handles the look and feel part of a web page. CSS provides advantages like saving time, faster page loads, easy maintenance, superior styles to HTML, and multi-device compatibility. CSS uses selectors to apply styles to HTML elements, and properties and values to specify styles. Styles can be defined using inline, internal, or external style sheets.

Uploaded by

Iqra Raja
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
34 views

CSS (Cascading Style Sheet)

CSS (Cascading Style Sheets) is a design language intended to simplify the process of making web pages presentable. It handles the look and feel part of a web page. CSS provides advantages like saving time, faster page loads, easy maintenance, superior styles to HTML, and multi-device compatibility. CSS uses selectors to apply styles to HTML elements, and properties and values to specify styles. Styles can be defined using inline, internal, or external style sheets.

Uploaded by

Iqra Raja
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 58

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>
<style type="text/css">
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;
font-weight: normal;
letter-spacing: .4em;
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;
font-weight: normal;
letter-spacing: .4em;
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
<table style="background-
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:

<table style="background-
image:url(/images/pattern1.gif);
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:
<table style="background-
image:url(/images/pattern1.gif);
background-repeat: repeat-y;">
<tr><td>
This table has background image set which
will repeat vertically.
</td></tr>
</table>
background-position
<table style="background-
image:url(/images/pattern1.gif);
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-
image:url(/images/pattern1.gif);
background-attachment:fixed;">
This parapgraph has fixed background image.
</p>

<p style="background-
image:url(/images/pattern1.gif);
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>

It will produce the following result:


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>
It will produce the following result:
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
<style type="text/css">
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>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
Example(Cont…)
</ol>
<ol style="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</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

You might also like