Cascading style sheet

-
- By Varsha Kumari
Assistant Professor
CEA Department, GLA University Mathura

CSS ?
Types of CSS
CSS Selectors
Basic CSS properties

CSS stands for Cascading Style Sheets
Style sheet language that defines how to
display HTML elements.
Describe the looks and formatting of a document.
enable the separation of document content from
document presentation.
CSS covers fonts, colors, margins, lines, height,
width, background images, advanced positions and
many other things.

A CSS rule has two main parts:
a selector, and one or more declarations:
Selector
points to the HTML element you want to style
Declaration
contains one or more declarations separated by
semicolons
includes a property name and a value, separated
by a colon

 A CSS declaration always ends with a semicolon, and declaration
groups are surrounded by curly brackets:
 p {color: red; text-align: center; font-size:30px; text-transform:
uppercase;}
 body {background-image: url(“gla.jpg"); margin-left:20px;}
 td{background-color: red ;}
 h2 { color: rgb(255,0,0); }
 p { font-family: Times New Roman; }

div {
border: 1px solid black;
margin: 100px 150px 100px 80px;
background-color: lightblue;
}
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<h1>HelloWorld!</h1>
<p>This paragraph is styled with
CSS.</p>
</body>
</html>
Example

Internal style sheet
Within the html document
External style sheet
As an external CSS file with .css extension
Inline style
In the same line where we want to apply the style

adds the style attribute to the relevant tag
style attribute can contain any CSS property
Will work for only the specified tag at that line only
<p style="color:green;margin-left:20px; text-transform: uppercase;” >
GLA University
</p>

<html>
<head>
</head>
<body bgcolor=“lightgreen”>
<p style = "color:green;background-
color:yellow; text-transform:
uppercase;font-size:30px;" >
This is the first paragragh</p>
<p style = "color:blue;background-color:
lightpink;margin-left:40px;font-size:
30px; " >
This is the first paragragh</p>
</body>
</html>

Used when a single document has a unique style
Defined in the head section of an HTML page
Defined within the <style> tag
Scope is up to the same document only
Every document has its own Internal CSS, if
required.
<style>
p {text-align: center; color: red;}
h1{color: red; text-transform: lowercase;}
</style>

<html>
<head>
<style type="text/css">
p {color: blue;}
hr {color:lightpink;}
h1{color: red; text-transform: lowercase;}
body {background-color:lightgreen;}
</style>
</head>
<body>
<h1>hello world</h1><hr>
<p>Welcome to Internal CSS</p>
</body>
</html>

Used when the style is applied to many pages.
With an external style sheet, you can change the
look of an entire Web site by changing one file.
Each page must link to the style sheet using the
<link> tag.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
h1 {color: red;}
H6{Color: green;}
hr {color:blue;}
p {margin-left:20px;}
Mystyle.css
Abc.html
Can be written on any text editor
and save file as filename.css

<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1> This is the biggest heading</h1>
<h3> This is the smaller heading</h3>
</body>
</html>
h1{color: red;}
h3{background-color: yellow;}mystyle.css
a6.html

All the styles will "cascade" into a new "virtual"
style sheet by the following rules:
Inline style (inside an HTML element) (Highest
priority)
Internal style sheet (in the head section)
External style sheet
Browser default (Lowest priority)

The element Selector
selects elements based on the element name
The id Selector
uses the id attribute of an HTML tag to find the single,unique element
Hash (#) character, followed by the name of the id
The class Selector
finds a group of elements with the specific class
uses the HTML class attribute
Period (.) character, followed by the name of the class

<html>
<head>
<style>
p{color: red;background-color:yellow;}
</style>
</head>
<body bgcolor="lightgreen">
<p>Every paragraph will be affected by the
style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

<html>
<head>
<style>
#para1 {color: red;background-color:yellow;}
</style>
</head>
<body bgcolor=“lightgreen”>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the
style.</p>
</body>
</html>

<html>
<head>
<style>
.center { text-align: center; color: red;}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned
heading</h1>
<p class="center">Red and center-aligned
paragraph</p>
</body>
</html>

<html>
<head>
<style>
p.uppercase { text-transform: uppercase;}
p.lowercase { text-transform: lowercase;}
p.capitalize { text-transform: capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

The SPAN element gives structure and context to
any inline content in a document.
<html><head>
<style type = "text/css">
p{background-color: blue;font-size:28px;}
p.A{background-color: yellow;font-size:30px;}
.B{background-color:pink;font-size:40px;}
</style></head>
<body bgcolor="lightgreen">
<p> Hello </p>
<p class="A">Welcome to <span class = "B"> GLA
University</span> Mathura.</p>
<p class="B">Uttar Pradesh</p>
</body></html>

The background-color property specifies the background color of an element.
The background color of a page is defined in the body selector:
Example
body {background-color:#b0c4de;}
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red”

body {background-image:url('paper.gif');}
By default, the background-image property repeats an image both horizontally
and vertically.
Example
body
{
background-image:url('gradient2.png');
background-repeat:no-repeat;/*repeat-x*/
background-position:center top;
}
OR
body {background:#ffffff url('img_tree.png') no-repeat right top;}

The border-style property specifies what kind of border to display.
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
none - Defines no border
Example
p {border-style: dotted;}
p{border-style: dashed;}

border-width property specifies the width of the four borders. border-
color property is used to set the color of the four borders.
Example
p{
border-style: dotted;
border-width: 2px;
border-color: red;
}
OR p { border: 5px solid red;}

The color property specifies the text color of content in between the
specified element.
Example
body {color:red;}
h1 {color:#00ff00;}
P{color:red;}

The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
Example
h1 {text-align:center;}
p {text-align:right;}
body {text-align:justify;}

The text-decoration property is used to set or remove decorations from text.
Example
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

The text-transform property is used to specify uppercase and lowercase letters
in a text.
Example
p{text-transform:uppercase;}
p {text-transform:lowercase;}
p {text-transform:capitalize;}

The font family of a text is set with the font-family property
Example
p{font-family:Times New Roman;}
p{font-family: Arial;}

The font-style property is mostly used to specify italic text.
This property has three values:
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)
font-weight property specifies the weight of a font:
Example
p {font-style:normal; font-weight: normal;}
p {font-style:italic; font-weight: bold;}
p {font-style:oblique;}

The font-size property sets the size of the text.
Example
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

Links can be styled with any CSS property (e.g. color, font-family, background,
etc.).
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
a:link {color:red;} /* unvisited link */
a:visited {color:blue;} /* visited link */
a:hover {color:green;} /* mouse over link */
a:active {color:yellow;} /* selected link */

Set the same margin for all four sides
p { margin: 35px; }
Set the different margin for all four sides in order top right bottom left
p{margin: 10px 5px 15px 20px;}
Set the margin for specific side
p { margin-left: 35px; }
p { margin-top: 25px; }

Example
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img {
max-width: 100%;
height: auto;
}
Example
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

With CSS, lists can be styled further, and images can be used as the list item
marker.
Example
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ul.d {list-style-image:url('sqpurple.gif');

display property specifies if/how an element is displayed.
Value of display property can be none, inline and block
visibility property specifies whether or not an element is visible.
Example
li{ display: none; }
li { display: inline; }
li { display: block; }
h1 { visibility: visible; }
h2{ visibility: hidden; }

With CSS, table td and th can be
styled further.
Example
table, td, th
{
border:1px solid green;
padding:15px;
height: 50px; width:50px
text-align: left;
}
Example
th
{
background-color:green;
color:white;
}
td{ height:50px;
vertical-align:bottom;
}

Cascading style sheet

More Related Content

What's hot

Similar to Cascading style sheet

More from VARSHAKUMARI49

Recently uploaded

Cascading style sheet