Cascading Style Sheets
What is CSS ?
• CSS stands for “Cascading Style Sheets”.
• Cascading: refers to the procedure that determines which style will apply
to a certain section, if you have more than one style rule.
• Style: how you want a certain section of your page to look. You can set the
HTML webpage with color, font, layout, margin, etc for things like tables,
paragraphs, and headings.
• Sheets: the “sheets” are like templates, or a set of rules, for determining
how the webpage will look.
• So, CSS (all together) is a styling language – a set of rules to tell browsers
how HTML webpage should look like. look.
Why do we need 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.
• It allows you to separate visual design elements (layout, fonts,
colors, margins, and so on) from the contents of a Web page.
• Allows for faster downloads, streamlined site maintenance,
and global control of design attributes across multiple pages.
What is style ?
• <style> is a command(tag) that you set to tell the browser how a
certain section of your webpage should look.
• Style rule has two parts: (1) selector and (2) declaration.
Selector {
declaration; Example : h1 // Selector (HTML tags)
} {
color: red; // Declaration
text-align : center;
}
Declaration = {property: value;}
Property: what aspect you want to change
ex: color, font, margins, etc.
Value: the exact setting for that aspect.
ex: red, italic, 40px, etc.
Types of writing Style Sheets
• There are three types of style-rule-places that we will cover:
- Inlined Style Sheet
- Internal Style Sheet
- External or Linked Style Sheet
a) Inlined example
<body>
<p style=“text-align: center; font-weight: bold; color: yellow;” > What was I thinking? </p>
<h1 style=“color:red;font-size:50px;”> The heading-1 style is formatted using CSS </h1>
</body>
What was I thinking?
The heading-1 style is formatted using CSS
Note :
• Placed inside the HTML tags.
• Specific to a single instance of an html tag on a page.
2. Internal Style Sheet
• Applicable to an entire HTML document.
• Styles are defined within the <style> </style> tag,
which is placed in the header of the html file
(i.e., within <head> and </head>).
<html>
<head>
<title>Title</title>
<style type="text/css">
<!--[STYLE INFORMATION GOES
HERE] -->
</style>
</head>
<body>
[DOCUMENT BODY GOES HERE]
</body>
</html> 7
Internal Style Sheet Example
<html>
<head>
<title>My Wonderful Example</title>
<style type=“text/css”>
body {
text-align: left;
font-family: verdana;
}
</style>
</head>
<body>
………………..
</body>
</html>
3. External (Linked) Styles
• External style sheet
• Styles are saved in a separate file, with the extension .css
• This single stylesheet can be used to define the look of multiple
pages.
In TextPad,Notepad, etc.… Save this text
file as
p {font-family: verdana, sans-serif; filename.css
font-size: 12pt; color: red}
h1 {font-family: serif; font-size:
14pt; color: green}
h2 {font-family: serif; font-size:
11pt; color: blue}
9
Linked (External)
• To apply the stylesheet “filename.css“ to an HTML
document, call it in from the header:
<html>
<head>
<link rel="stylesheet" href=“filename.css"
type="text/css">
</head>
<body>
…………………………
</body>
</html>
10
Inheritance / Cascading Precedence: which
style prevails when several are present?
• Inline CSS (local) overrides internal CSS (global).
• Internal CSS (global) overrides external CSS (linked).
• An inline style (inside an HTML element) has the highest
priority, which means that it will override every style
declared inside the <head> tag (internal) or an external
style sheet.
11
Grouping selectors
• Separate selectors with a comma
– Example:
h1,h2,h3,h5,h6 { color: green }
(each header will be green)
• Separate selectors with a space
– Example:
p li { color: red }
(only items within a list and a paragraph tag will be red)
12
The class Selector
• With a class selector you can define different styles for the same
type of HTML element
• Examples:
First define the class:
p.right {text-align: right; color: red; font-style: italic}
p.blue {text-align: center; color:blue}
Then use the class in your HTML code :
<p class="right"> This paragraph will be right-aligned, italic, and red.
</p>
<p class=“blue"> This paragraph will be center-aligned and blue. </p>
13
The class Selector
• You can also omit the tag name in the selector to define a
style that will be used by all HTML elements that have this
class.
• Example:
.poem {text-align: center; font-style:italic}
Any HTML element with class=“poem" will be center-
aligned and italic.
14
The class Selector
• Example (continued)
Both elements below will follow the rules in the
".poem“ class:
<h1 class=“poem"> This heading will be center-
aligned and italic </h1>
<p class=“poem"> This paragraph will also be
center-aligned and italic. </p>
15
Class Example
<style>
p {font-family: sans-serif; font-size: 10pt; background-color:green}
h1 {font-family: serif; font-size: 30pt}
h2 {font-family: serif; font-size: 24pt}
.boldred {color: red; font-weight: bold; font-size : 20pt}
.green {color: green}
.tinyblue {color: blue; font-size: 8pt}
</style>
The tags and classes can then be used in combination:
<h1 class=“boldred">This is rendered as 20-point red serif bold text.</h1>
<p class=“boldred">This is rendered as 20-point red sans-serif bold
text.</p>
16
Applying styles to portions of a
document:
• <span>
– “Wraps” a portion of text into a unit, but doesn't
cause a line break. Allows styles to be applied to an
'elemental' region (such as a portion of a
paragraph).
Example :
• <div>
– A division tag: to “package” a block of document
into one unit. It defines a block element.
– Causes a line break, like <br> and <p>.
– Example : 17
Font formatting properties
• Font-Properties : Values
– font-family : Arial, Times, Courier
– font-style : normal, italic
– font-variant : normal, small-caps
– Font-weight : normal, bold
– font-size : xx-small, x-small, small, medium, large
– Line-height : numerical values (gap between two lines)
More about font-family
•We can specify multiple fonts from highest to lowest priority
•Generic font names:
•serif, sans-serif, cursive, fantasy, monospace
•If the first font is not found on the user's computer, the
next is tried
•Placing a generic font name at the end of your font-family
value, ensures that every computer will use a valid font
p {
font-family: Garamond, "Times New Roman",
serif;
This paragraph uses the above style.
} CSS
19
Colour and Background properties
• Property : Value
– color : colorname or hexadecimal number
– background-color : colorname or hexadecimal
– background-image : URL
– Example : background-image:url("index.png");
– background-repeat : The background-repeat property
determines how a specified background image is repeated.
The repeat-x value will repeat the image horizontally
while the repeat-y value will repeat the image vertically.
– background-repeat : repeat-x, repeat-y, no-repeat, repeat
Colour and Background properties
• background-attachment : The background-attachment property
determines if a specified background image will scroll with the
content or be fixed with regard to the canvas. For example, the
following specifies a fixed background image:
• Example :
• body{ background-image: url(“candybar.gif”);
• background-attachment: fixed }
• background-attachment : fixed, scroll
• background-position :
– Horizontal keywords (left, center, right)
– Vertical keywords (top, center, bottom)
Text formatting properties
• Property : Value
– word-spacing : The word-spacing property defines an additional
amount of space between words. The value must be in the
length format; negative values are permitted.
– word-spacing : 0.4cm|mm|in
– letter-spacing : The letter-spacing property defines an additional
amount of space between characters. The value must be in the
length format; negative values are permitted. A setting of 0 will
prevent justification.
– Letter-spacing : 0.4cm|mm|in
– text-decoration : none, underline, overline, line-through
Text formatting properties
• text-transform : capitalize, uppercase, lowercase,
none
• text-align : left, right, center, justify
• text-indent : The text-indent property can be applied to block-
level elements (P, H1, etc.) to define the amount of indentation that
the first line of the element should receive.
• text-indent : <length> or <percentage>
• Example : P { text-indent: 5cm }
Box Properties
• All HTML elements can be considered as boxes.
• In CSS, the "box model" is design and layout: margins, borders, padding,
content.
• margin-top : numerical value
• Initial value : 0
• margin-right : numerical value
• Initial value : 0
• margin-bottom : numerical value
• Initial value : 0
• margin-left : numerical value
• Initial value : 0
• margin : All margins
Box Properties
• Padding-top : The padding-top property describes how
much space to put between the top border and the content
of the selector.
<html>
<head>
<style>
p.ex1 {
border: 1px solid red;
padding-top: 100px;
}
</style>
</head>
<body>
<h1>The padding-top Property</h1>
<p class="ex1">A paragraph with a 25 pixels top padding.</p>
</body>
</html>
Box Properties
• padding-bottom : The padding-top property describes how much
space to put between the bottom border and the content of the
selector.
• padding-left : The padding-top property describes how much space
to put between the left border and the content of the selector.
• padding-right : The padding-top property describes how much space
to put between the right border and the content of the selector.
• padding : The padding property describes how much space to put
between the all the borders to the content of the selector.
Box properties
• border-color : The border-color property sets the color of
an element's border.
– Border-color : colorname or hexadecimal number.
• border-style : The border-style property sets the style
of an element's border.
– border-style : none | dotted | dashed | solid | double |
groove | ridge | inset | outset.
• border-top-style : value
• border-bottom-style : value
Border Styles
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed
solid double;}
Border Width and color
Border - Shorthand Property
•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
Left, right and round borders
In a box:
• Margins are always transparent.
• Borders come in various styles.
• Background settings:
– the area just inside the borders
– includes both the padding and content areas.
32
Examples
img { border-style: ridge;
border-width: 20px;
border-color:red green
blue purple}
h1 {background-color:
#CC66FF;
width: 50%; H1,50% ,purple
padding: 20px} background 33
CSS comments /*…*/
The // single-line comment style is NOT supported in CSS
<!-- ... --> HTML comment style is also NOT supported in
CSS
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
}
CSS
34
