Cascade Style Sheets

CASCADE STYLE SHEETS
Module 3
Cascade Style Sheets
• a simple design language intended to simplify the process
of making web pages presentable.

• handles the look and feel part of a web page.
• can control the text colors, fonts style, the spacing
between paragraphs, columns sizes, background

images or colors, layout designs etc
• CSS is combined with the markup languages HTML or
XHTML.
Advantages of CSS
• CSS saves time
• Pages load faster
• Easy maintenance
• Superior styles to HTML
• Multiple Device Compatibility
• Global web standards
• Platform Independence
CSS Syntax
• A style rule is made of three parts −
• 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. (color,
border)
• Value − Values are assigned to properties. (color: red or #F1F1F1)
• CSS Style Rule Syntax − selector { property: value }

Selector Types
• The Type Selectors
• A Type selector matches elements with the
corresponding element node name such as <p>,

<span>, and <div> tags.
• h1 { color: #36CFFF; }
• The Universal Selectors
• The universal selector (*) selects all HTML elements on
the page.
• Example
• The CSS rule below will affect every HTML element on
the page:
•*{
text-align: center;
color: blue;
}
• The CSS Grouping Selector
• The grouping selector selects all the HTML elements with the same style
definitions.
• Look at the following CSS code (the h1, h2, and p elements have the
same style definitions):
• h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
• <html>
• <head>
• <style>
• h1, h2, p {
• text-align: center;
• color: red;
• }
• </style>
• </head>
• <body>
• <h1>Hello World!</h1>
• <h2>Smaller heading!</h2>
• <p>This is a paragraph.</p>
• </body>
• </html>
• The Class Selectors
• You can define style rules based on the class attribute of the elements.
All the elements having that class will be formatted according to the
defined rule.
• The ID Selectors
• You can define style rules based on the id attribute of the elements.
All the elements having that id will be formatted according to the
defined rule.
• <html>
• <style> #p1{ color:red; text-align:center; } </style>
• <body>
• <p> This paragraph will not be red and centre aligned</p>

• <p id="p1"> This paragraph will be red and centre
aligned</p>
• </body>
• </html>
• The Descendant Selectors
• Suppose you want to apply a style rule to a particular element only
when it lies inside a particular element.

• <body>
• <style> ul li { color:red; } </style>

• <ul type = "circle">
• <li>Beetroot</li>
• <li>Ginger</li> </ul>
• <ol>
• <li>Beetroot</li>
• <li>Ginger</li> </ol>
• </body>
• Child Selector (>)
• The child selector selects all elements that are the
children of a specified element.
• The Child Selectors
• Select and style every <p> element that is the first child of its parent:
CSS :nth-child() Selector
The :nth-child(n) selector matches every element that is the nth child of its parent.
• The Attribute Selectors
The [attribute] selector is used to select elements with a specified attribute.
The [attribute="value"] selector is used to select elements with a specified attribute and
value.
The following example selects all <a> elements with a target="_blank" attribute:
• Multiple Style Rules
• You may need to define multiple style rules for a single
element. You can define these rules to combine multiple

properties and corresponding values into a single block as
defined.
• h1 { color: #36C;
• font-weight: normal;
• letter-spacing: .4em;
• margin-bottom: 1em;
• text-transform: lowercase; }
• Grouping Selectors
• You can apply a style to many selectors if you like. Just
separate the selectors with a comma,

• h1, h2, h3 {
• color: #36C;
• font-weight: normal;
• letter-spacing: .4em;
• margin-bottom: 1em;
• text-transform: lowercase; }
CSS - Inclusion
• There are four ways to associate styles with your HTML
document.
• Inline CSS
• External CSS.
• Embedded CSS
• Imported CSS
Inline CSS - The style Attribute
• You can use style attribute of any HTML element to define
style rules.
• These rules will be applied to that element only. Here is
the generic syntax −

• <element style = "...style rules....">
• <html>
• <head> </head>
• <body>
• <h1 style = "color:#36C;"> This is inline CSS </h1>
• <p style =”font-size: 20pt; color:red”> This paragraph is
also in inline CSS</p>
• </body> </html>
External CSS - The <link> Element
• The <link> element can be used to include an external
stylesheet file in your HTML document.

• An external style sheet is a separate text file with .css
extension.
• You define all the Style rules within this text file and then
you can include this file in any HTML document using

<link> element.
Embedded CSS - The <style> Element
• You can put your CSS rules into an HTML document
using the <style> element.

• This tag is placed inside the <head>...</head> tags.
• Rules defined using this syntax will be applied to all the
elements available in the document.

• <html>
• <head>
• <style type = "text/css" media = "all">
• body { background-color: linen; }
• h1 { color: maroon; margin-left: 40px; }
• p {font-size: 12pt; font-family: arial, sans-serif} </style>
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>
Imported CSS - @import Rule
• @import is used to import an external stylesheet in a manner
similar to the <link> element. Here is the generic syntax of

@import rule.
• <head>@import “URL” </head>
• OR
• <head>@import url “URL” </head>
• Example
• <head>
• @import "mystyle.css";
• </head>
CSS Comments
• your comments inside /*.....this is a comment in style sheet.....*/
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• p { color: red;
• /* This is a single-line comment */
• text-align: center; }
• /* This is a multi-line comment */
• </style> </head>
• <body> <p>Hello World!</p> </body> </html>

CSS STYLING
CSS - Backgrounds
• background-color
• background-image
• background-repeat
• background-position.
• background-attachment.
• background property.
• Set the Background Color
• <html>
• <head> </head>
• <body>
• <p style = "background-color:yellow;">
• This text has a yellow background color.
• </p>
• </body>
• </html>
• Set the Background Image
• We can set the background image by calling local stored images
• <html>
• <head>
• <style>
• body { background-image: url("img1.jpg");
• background-color: #cccccc; } </style>
• </head>
• <body>
• <h1>Hello World!</h1>
• </body>
• <html>
• Repeat the Background Image
• By default background-repeat property will have repeat value.
• <html>
• <head>
• <style>
• body { background-image: url("img1.jpg");
• background-repeat: repeat; }
• </style>
• </head>
• <body>
• <p>Hello World</p>
• </body> </html>
• If you don’t want to repeat the image then give the value
• background-repeat: no-repeat;
• If you want to repeat the image horizontally then
• background-repeat: repeat-y;
• If you want to repeat the image vertically then
• background-repeat: repeat-x;
• If you want to place an image in a fixed position then, 100
pixels away from the left side

• background-position: 100px
• If you want to place an image 100 pixels away from the
left side and 200 pixels down from the top.

• background-position: 100px 200px
CSS- Text
• Set the Text Color
• <p style = "color:red;"> This text will be written in red. </p>
• Set the Text Direction
• <p style = "direction:rtl;"> This text will be rendered from right to left </p>
• Set the Space between Characters
• <p style = "letter-spacing:5px;"> This text is having space between letters.
</p>
• Set the Text Indent
• how to indent the first line of a paragraph.
• <p style = "text-indent:1cm;"> Text will have first line indented by 1cm </p>
• Text Align
• <p style = "text-align:right;"> This will be right aligned. </p>
• <p style = "text-align:center;"> This will be center aligned. </p>

• <p style = "text-align:left;">This will be left aligned. </p>
• Set the Text Cases
• <p style = "text-transform:capitalize;"> This will be capitalized </p>

• <p style = "text-transform:uppercase;"> This will be in uppercase
</p>
• <p style = "text-transform:lowercase;"> This will be in lowercase </p>
•
TEXT DECORATION
CSS - Links
• properties of a hyper link −
• The :link signifies unvisited hyperlinks.
• The :visited signifies visited hyperlinks.
• The :hover signifies an element that currently has the user's mouse
pointer hovering over it.

• The :active signifies an element on which the user is currently
clicking.
• All these properties are kept in the header part of the HTML
• Syntax
• <style type = "text/css">
• a:link {color: #000000}

• a:visited {color: #006600}
• a:hover {color: #FFCC00}
• a:active {color: #FF00CC} </style>
• Set the Color of Links
• <style type = "text/css"> a:link {color:#000000} </style>
• Set the Color of Visited Links
• <style type = "text/css"> a:visited {color: #006600} </style>
• Change the Color of Links when Mouse is Over
• <style type = "text/css"> a:hover {color: #FFCC00} </style>
• Change the Color of Active Links
• <style type = "text/css"> a:active {color: #FF00CC} </style>

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */

a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
</style>
</head>
<body>
<p>Mouse over and click the link: <a

href="https://www.w3schools.com">w3schools.com</a></p>
</body>
</html>
CSS - Margins
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
<!DOCTYPE html>
<html>
<head>
<style>
: 1px solid black;
mdiv {
borderargin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of

150px, a bottom margin of 100px, and a left margin of 80px.</div>
</body>
</html>
CSS - Paddings
• The padding property allows you to specify how much space
should appear between the content of an element and its

border −
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
CSS - Positioning
• CSS helps you to position your HTML element.
• You can put any HTML element at whatever location you
like.
• You can specify whether you want the element positioned
relative to its natural position in the page or absolute

based on its parent element.
The position Property
The position property specifies the type of positioning method used for an element.
There are five different position values:
•static
•relative
•fixed
•absolute
•sticky
Elements are then positioned using the top, bottom, left, and right properties.

Cascade Style Sheets

Uploaded by

Document Information

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

Cascade Style Sheets

Uploaded by

Copyright:

Available Formats

CASCADE STYLE SHEETS

• a simple design language intended to simplify the process

of making web pages presentable.

• can control the text colors, fonts style, the spacing

between paragraphs, columns sizes, background

• CSS saves time

• Pages load faster

• Superior styles to HTML

• Multiple Device Compatibility

• Global web standards

• Selector − A selector is an HTML tag at which a style will be

applied. This could be any tag like <h1> or <table> etc.

• CSS Style Rule Syntax − selector { property: value }

• The Type Selectors

• A Type selector matches elements with the

corresponding element node name such as <p>,

• <p> This paragraph will not be red and centre aligned</p>

• Suppose you want to apply a style rule to a particular element only

when it lies inside a particular element.

• <style> ul li { color:red; } </style>

• You may need to define multiple style rules for a single

element. You can define these rules to combine multiple

• You can apply a style to many selectors if you like. Just

separate the selectors with a comma,

• There are four ways to associate styles with your HTML

• You can use style attribute of any HTML element to define

the generic syntax −

stylesheet file in your HTML document.

you can include this file in any HTML document using

• You can put your CSS rules into an HTML document

using the <style> element.

• Rules defined using this syntax will be applied to all the

elements available in the document.

• <style type = "text/css" media = "all">

• body { background-color: linen; }

• h1 { color: maroon; margin-left: 40px; }

• p {font-size: 12pt; font-family: arial, sans-serif} </style>

similar to the <link> element. Here is the generic syntax of

• /* This is a single-line comment */

• /* This is a multi-line comment */

• <body> <p>Hello World!</p> </body> </html>

• We can set the background image by calling local stored images

• If you want to repeat the image horizontally then

• If you want to repeat the image vertically then

pixels away from the left side

left side and 200 pixels down from the top.

• Set the Text Color

• <p style = "color:red;"> This text will be written in red. </p>

• Set the Text Direction

• Set the Space between Characters

• <p style = "letter-spacing:5px;"> This text is having space between letters.

• Set the Text Indent

• how to indent the first line of a paragraph.

• <p style = "text-align:right;"> This will be right aligned. </p>

• <p style = "text-align:center;"> This will be center aligned. </p>

• Set the Text Cases

• <p style = "text-transform:capitalize;"> This will be capitalized </p>

• properties of a hyper link −

• The :link signifies unvisited hyperlinks.

• The :visited signifies visited hyperlinks.

pointer hovering over it.

• <style type = "text/css">

• a:link {color: #000000}

• <style type = "text/css"> a:link {color:#000000} </style>