By:-Mr. Sachin Kumar Sonker

By:-Mr.
Sachin Kumar Sonker

What is CSS?
• CSS stands for Cascading Style Sheets

• CSS describes how HTML elements are to be
displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the
layout of multiple web pages all at once
• External stylesheets are stored in CSS files
Why Use CSS?
• CSS is used to define styles for your web pages, including
the design, layout and variations in display for different
devices and screen sizes.
CSS Example:-
• body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
CSS Syntax
CSS Syntax
• A CSS rule-set consists of a selector and a declaration block:
• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations
separated by semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.
• Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.
Example:-
In this example all <p> elements will be center-aligned, with a red text color:
p{
color: red;
text-align: center;
}
• EXAMPLE EXPLAINED
P IS A SELECTOR IN CSS (IT POINTS TO THE HTML ELEMENT YOU

WANT TO STYLE: <P>).
COLOR IS A PROPERTY, AND RED IS THE PROPERTY VALUE
TEXT-ALIGN IS A PROPERTY, AND CENTER IS THE PROPERTY VALUE

How To Add CSS
Three Ways to Insert CSS
• There are three ways of inserting a style sheet:

• External CSS
• Internal CSS
• Inline CSS
External CSS
• With an external style sheet, you can change the look of an entire website by
changing just one file!
• Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.
Example
• External styles are defined within the <link> element, inside the <head>
section of an HTML page:
• <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type=“text/css” href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
• An external style sheet can be written in any text
editor, and must be saved with a .css extension.
• The external .css file should not contain any
HTML tags.
• Here is how the "mystyle.css" file looks:
• "mystyle.css"
• body {
}
h1 {
color: navy;
margin-left: 20px;
}
Internal CSS
• An internal style sheet may be used if one single HTML page has a unique style.
• The internal style is defined inside the <style> element, inside the head section.
• Example
• Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
• Example
• Inline styles are defined within the "style" attribute of the relevant
element:
• <!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
CSS Selector
The CSS element Selector
• The element selector selects HTML elements

based on the element name.
Example
Here, all <p> elements on the page will be center-
aligned, with a red text color:
p{
text-align: center;
color: red;
}
The CSS id Selector
• The id selector uses the id attribute of an HTML
element to select a specific element.
• The id of an element is unique within a page, so the id
selector is used to select one unique element!
• To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
Example
The CSS rule below will be applied to the HTML
element with id="para1":
#para1 {
text-align: center;
color: red;
}
The CSS class Selector
• The class selector selects HTML elements with a
specific class attribute.
• To select elements with a specific class, write a
period (.) character, followed by the class name.
Example
In this example all HTML elements with
class="center" will be red and center-aligned:
.center {
text-align: center;
color: red;
}
CSS Comments
CSS Comments
• Comments are used to explain the code, and may help

when you edit the source code at a later date.
• Comments are ignored by browsers.
• A CSS comment is placed inside the <style> element,
and starts with /* and ends with */:
Example
/* This is a single-line comment */
p{
color: red;
}
CSS Color
CSS Colors
Colors are specified using

• predefined color names
• RGB(red, green, blue)
• RGBA (red, green, blue, alpha)
• HEX
• HSL (hue, saturation, lightness)
• HSLA (hue, saturation, lightness, alpha)
values.
CSS RGB Colors
• In CSS, a color can be specified as an RGB value, using this
formula:
• rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the intensity
of the color between 0 and 255.
• For example, rgb(255, 0, 0) is displayed as red, because red
is set to its highest value (255) and the others are set to 0.
• To display black, set all color parameters to 0, like this:
rgb(0, 0, 0).
• To display white, set all color parameters to 255, like this:
rgb(255, 255, 255).
CSS HEX Colors
• In CSS, a color can be specified using a

hexadecimal value in the form:
• #rrggbb
• Where rr (red), gg (green) and bb (blue) are
hexadecimal values between 00 and ff (same as
decimal 0-255).
• For example, #ff0000 is displayed as red, because
red is set to its highest value (ff) and the others
are set to the lowest value (00).
CSS HSL Colors
• In CSS, a color can be specified using hue, saturation, and
lightness (HSL) in the form:
• hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to 360. 0 is red,
120 is green, and 240 is blue.
• Saturation is a percentage value, 0% means a shade of gray,
and 100% is the full color.
• Lightness is also a percentage, 0% is black, 50% is neither
light or dark, 100% is white
• Experiment by mixing the HSL values below:
CSS Background
CSS Backgrounds
• The CSS background properties are used to

define the background effects for elements.
• In these chapters, you will learn about the
following CSS background properties:
– background-color
– background-image
– background-repeat
– background-attachment
– background-position
CSS background-color
• The background-color property specifies the
background color of an element.
• Example
• The background color of a page is set like this:
• body {
}
• With CSS, a color is most often specified by:

– a valid color name - like "red"
– a HEX value - like "#ff0000"
– an RGB value - like "rgb(255,0,0)“
CSS Background Image
• The background-image property specifies an
image to use as the background of an element.
• By default, the image is repeated so it covers
the entire element.
Example
• Set the background image for a page:
• body {
background-image: url("paper.gif");
}
CSS Background Repeat
• By default, the background-image property
repeats an image both horizontally and vertically.
• Some images should be repeated only
horizontally or vertically, or they will look strange,
like this:
• If the image above is repeated only horizontally
(background-repeat: repeat-x;), the background
will look better:
Example
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
CSS background-repeat: no-repeat
• Showing the background image only once is

also specified by the background-
repeat property:
• Example
• Show the background image only once:
• body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
CSS background-position
• The background-position property is used to

specify the position of the background image.
• Example
• Position the background image in the top-right
corner:
• body {
background-position: right top;
}
CSS background-attachment
• The background-attachment property specifies

whether the background image should scroll or be
fixed (will not scroll with the rest of the page):
• Example
• Specify that the background image should be fixed:
• body {
background-position: right top;
background-attachment: fixed;
}
CSS Borders
CSS Borders
CSS Border Style
• The border-style property specifies what kind of border to display.
• The following values are allowed:
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the
border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-
color value
• inset - Defines a 3D inset border. The effect depends on the border-color
value
• outset - Defines a 3D outset border. The effect depends on the border-
color value
• none - Defines no border
• hidden - Defines a hidden border
• The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).
CSS Border Width
• The border-width property specifies the width of the
four borders.
• The width can be set as a specific size (in px, pt, cm,
em, etc) or by using one of the three pre-defined
values: thin, medium, or thick:
Example
• Demonstration of the different border widths:
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-width: medium;
}
CSS Border Color
• The border-color property is used to set the color of the four borders.
• The color can be set by:
• name - specify a color name, like "red"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• transparent
• Note: If border-color is not set, it inherits the color of the element.
• Example
• Demonstration of the different border colors:
• p.one {
border-color: red;
}
p.two {
border-color: green;
}
CSS Border - Individual Sides
• From the examples on the previous pages, you
have seen that it is possible to specify a different
border for each side.
• In CSS, there are also properties for specifying
each of the borders (top, right, bottom, and left):
• Example
• p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
CSS Border - Shorthand Property
• Like you saw in the previous page, there are many
properties to consider when dealing with borders.
• To shorten the code, it is also possible to specify all the
individual border properties in one property.
• The border property is a shorthand property for the
following individual border properties:
• border-width
• border-style (required)
• border-color
Example
p{
border-left: 6px solid red;
background-color: lightgrey;
}
CSS Margins
CSS Margins
• The CSS margin properties are used to create space
around elements, outside of any defined borders.
• With CSS, you have full control over the margins. There
are properties for setting the margin for each side of an
element (top, right, bottom, and left).
Margin - Individual Sides
• CSS has properties for specifying the margin for each
side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
All the margin properties can have the following values:
• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the
parent element
Example
• Set different margins for all four sides of a <p> element:
• p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
CSS Padding
CSS Padding
• The CSS padding properties are used to generate space
around an element's content, inside of any defined borders.
• With CSS, you have full control over the padding. There are
properties for setting the padding for each side of an
element (top, right, bottom, and left).
• Padding - Individual Sides
• CSS has properties for specifying the padding for each side of
an element:
– padding-top
– padding-right
– padding-bottom
– padding-left
All the padding properties can have the following values:
• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the
parent element
Example
• Set different padding for all four sides of a <div> element:
• div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
CSS Height & Width
CSS Setting height and width
• The height and width properties are used to

set the height and width of an element.
• The height and width properties do not
include padding, borders, or margins. It sets
the height/width of the area inside the
padding, border, and margin of the element.
CSS height and width Values
The height and width properties may have the following values:
• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value
Example
Set the height and width of a <div> element:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
All CSS Dimension Properties
Property Description
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element

CSS Text
CSS Text
Text Color
• The color property is used to set the color of the text. The color is specified by:
• a color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• The default text color for a page is defined in the body selector.
Example
• body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
• A text can be left or right aligned, centered, or justified.
• The following example shows center aligned, and left and right aligned text (left
alignment is default if text direction is left-to-right, and right alignment is default if
text direction is right-to-left):
Example
• h1 {
text-align: center;
}
h2 {
text-align: left;
}
Text Decoration
• The text-decoration property is used to set or remove decorations from
text.
• The value text-decoration: none; is often used to remove underlines from
links:
Example
• h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Text Transformation
The text-transform property is used to specify uppercase and lowercase
letters in a text.
• It can be used to turn everything into uppercase or lowercase letters, or
capitalize the first letter of each word:
Example
• p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Text Shadow
• The text-shadow property adds shadow to text.

• In its simplest use, you only specify the horizontal shadow
(2px) and the vertical shadow (2px):
• Text shadow effect!
Example
• h1 {
text-shadow: 2px 2px;
}
Add a color (red) to the shadow:
Example
• h1 {
text-shadow: 2px 2px red;
}
Add a blur effect (5px) to the shadow:

Example
• h1 {
text-shadow: 2px 2px 5px red;
}
CSS Links
CSS Links
In addition, links can be styled differently

depending on what state they are in.
The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
Example
• /* unvisited link */
a:link { /* selected link */
color: red; a:active {
} color: blue;
}
/* visited link */ • When setting the style for
a:visited { several link states, there
color: green; are some order rules:
} • a:hover MUST come after
a:link and a:visited
/* mouse over link */
a:hover { • a:active MUST come after
color: hotpink; a:hover
}
CSS Overflow
CSS Overflow
• The overflow property specifies whether to clip the
content or to add scrollbars when the content of an
element is too big to fit in the specified area.
The overflow property has the following values:
• visible - Default. The overflow is not clipped. The
content renders outside the element's box
• hidden - The overflow is clipped, and the rest of the
content will be invisible
• scroll - The overflow is clipped, and a scrollbar is added
to see the rest of the content
• auto - Similar to scroll, but it adds scrollbars only when
necessary
CSS Layout - float
The float Property
The float property is used for positioning and formatting
content e.g. let an image float left to the text in a container.
The float property can have one of the following values:
• left - The element floats to the left of its container

• right - The element floats to the right of its container
• none - The element does not float (will be displayed just
where it occurs in the text). This is default
• inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text
around images.
CSS Layout
CSS Navigation Bar
Navigation Bar
• Having easy-to-use navigation is important for any

web site.
• With CSS you can transform boring HTML menus into
good-looking navigation bars.
Navigation Bar = List of Links
• Example • Example
<ul>
<li><a href="default.asp">Home ul {
</a></li> list-style-type: none;
<li><a href="news.asp">News margin: 0;
</a></li> padding: 0;
<li><a href="contact.asp"> }
Contact</a></li>
<li><a href="about.asp">About li a {
</a></li> display: block;
</ul> }

By:-Mr. Sachin Kumar Sonker

Uploaded by

Copyright:

Available Formats

By:-Mr. Sachin Kumar Sonker

Uploaded by

Document Information

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

By:-Mr. Sachin Kumar Sonker

Uploaded by

Copyright:

Available Formats

By:-Mr.

Sachin Kumar Sonker

• CSS stands for Cascading Style Sheets

• The selector points to the HTML element you want to style.

P IS A SELECTOR IN CSS (IT POINTS TO THE HTML ELEMENT YOU

COLOR IS A PROPERTY, AND RED IS THE PROPERTY VALUE

TEXT-ALIGN IS A PROPERTY, AND CENTER IS THE PROPERTY VALUE

• There are three ways of inserting a style sheet:

• The element selector selects HTML elements

• Comments are used to explain the code, and may help

Colors are specified using

• In CSS, a color can be specified using a

• The CSS background properties are used to

• With CSS, a color is most often specified by:

• Showing the background image only once is

• The background-position property is used to

• The background-attachment property specifies

• The height and width properties are used to

max-height Sets the maximum height of an element

max-width Sets the maximum width of an element

min-height Sets the minimum height of an element

min-width Sets the minimum width of an element

width Sets the width of an element

• The text-shadow property adds shadow to text.

Add a blur effect (5px) to the shadow:

In addition, links can be styled differently

The float property can have one of the following values:

• left - The element floats to the left of its container

• Having easy-to-use navigation is important for any

You might also like