CHAPTER Three –
Cascading Style Sheets (CSS)
Outline
Introduction to CSS Box Model
Style sheets
✓ How CSS works Formatting Table
✓ CSS rules using Style sheets
✓ How CSS rule apply to
HTML pages Layout and
Formatting Text by Positioning Properties
using Style sheets
Formatting CSS Measuring
Paragraphs using Style Units
sheets
Introduction to Style Sheet
A cascading style sheet (CSS) is stylesheet language used
to describe the presentation of a document written in HTML
or XML.
It is code or rule that specify how the content of an
element (i.e., Element of HTML) should appear or
rendered on the screen or on another media.
CSS allows you to create rules that specify how the content of
an element should appear.
✓ For example, you can specify that the background of
the page is cream, or that all level one heading should be
in a blue, italic, Times typeface.
The formatting then “cascades” down to the individual
instances of each tag.
In simplest terms, a style is a formatting rule. That rule can be
applied to an individual tag, to all instances of a certain tag
within a document, or to all instances of a certain tag across
a group of documents.
Cont’d (HTML vs CSS)
✓ HTML: is the foundation and structure of the web or house.
✓ CSS: anything that makes the structure looks good, such
as painting, carpet , all other staff in the home
How it works
The key to understanding how CSS works is to imagine
that there is an invisible box around every HTML element.
In the picture below, block level elements are shown
with red borders, and inline elements have green borders.
Block-level Elements
✓ always starts on a new line.
✓ takes up the full width available (stretches out to the left and right as
far as it can).
✓ has a top and a bottom margin, whereas an inline element does not.
Inline Elements
✓ An inline element does not start on a new line.
✓ only takes up as much width as necessary
✓ The <body> element creates the first box, then the
<h1>, <h2>, <p>, <i>, and <a> elements each create
their own boxes within it
CSS Style Rule
✓ CSS works by associating rules with HTML elements.
These rules govern how the content of specified
elements should be displayed.
✓ A CSS rule contains two
parts: a selector and
declarations.
❖ Selectors indicate
which elements the rule
applies to.
✓ Declarations indicate how the elements referred to in the
selector should be styled.
❖ Declarations are split into two parts (a property and a
value), and are separated by a colon.
❖ In the above example the rule indicates that all <p>
elements should be red color.
❖ Properties indicate the aspects of the element you want
to change.
E.g., color, font, width, height and border.
❖ Values specify the settings you want to use for the
chosen properties.
■ E.g., if you want to specify a color property then the value
is the color you want the text in these elements to be.
❖ You can specify several properties in one declaration,
each separated by a semi-colon.
❖ h1, h2, h3 {font-family: Arial; color: yellow;}
Constructing Style Rules
○ Syntax
<style >
tag {
attribute: value;
attribute: value
}
</style>
Example
<style > h1{color: red; font-size:14px} </style>
○ Multiple tags syntax
<style >
h1, h2, h3, h4, h5, h6 {color:
red; font-size:14px}
</style>
Types of Cascade Style sheets
❖ Inline Style
✓ Inline style sheets enable a
webpage author to declare an
individual style inside each
HTML element using style
attribute.
✓ < ul style="list-style-type: square”>
✓ <hr style="color: #ee3e80;“>
❖ Internal Style: internal style sheets enable a
web page author to embed an entire CSS
document in the HTML document’s head section
with a <style> tag.
✓ The <style> element should use the type attribute to indicate
that the styles are specified in CSS. The value should be
text/css.
<head >
<style type= “text/CSS”>
ul {
list-style-type: square
}
</style>
<head>
❖ External Style: with External Style Sheets (i.e., Separate
documents that contain only CSS rule), web authors can
provide a uniform look and feel to an entire Web site.
<style>
<link rel="stylesheet" type="text/css"
href="default.css">
</style>
<link rel="stylesheet" type="text/css"
href="default.css">
Item Meaning Example
<link> tells the browser where to find the CSS file used
to style the page.
Rel specifies the relationship between the HTML page Stylesheet, script
and the file it is linked to
Type specifies the type of document being linked to. “text/css” , “text/javascript”
Href specifies the path to the CSS file (which is often default.css or
placed in a folder called css or styles) /css/default.css
CSS Selectors:
There are many different types of CSS selectors that allow
you to target rules to specific element in an HTML document.
Universal Selector (just select everything!). Applies to all
elements in the document. We use *{}
<html>
<head>
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<p>This paragraph includes <em>descendant </em> selector </p>
This line not include<em>descendant</em> selector
</body>
</html>
Type Selector. The CSS type selector matches elements by
node name. In other words, it selects all elements of the
given type within a document.
<html>
<head>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<p>This paragraph includes <em>descendant </em> selector </p>
This line not include<em>descendant</em> selector
</body>
</html>
Class Selector. Styles can be created using classes.
Classes mark certain elements so that you can refer to
them in your style sheet.
✓ A class can be applied to multiple section, whereas an
ID uniquely identifies a specific selection within a
document.
✓ Creating Class Style
.className
{ E.g., <style >
attribute: value <li class="new">Spraying
} Techniques for Fruit Trees
.new { Color: red}
</li>
</style>
Id Selector. Ids work the same way, except that you can
apply them only once per document.
✓ define the ID in the <style> area, preceding the
ID name with a hash symbol (#), as shown below.
# idName
{ E.g.
attribute: value <style >
} #special {color: red}
</style>
For example, you might apply an ID to a unique heading. To
create an ID, add an id= attribute to the tag, like this:
<li id="special">Spraying Techniques for Fruit Trees</li>
Descendant Selector. A selector which matches all child
elements that are descendants of the parent element.
✓ Descendent selector selects including elements that
are not only direct descendants.
✓ These elements may be a child, grandchild, great
grandchild, and so on.
✓ defined as p em {color: #red;}
<html>
<head>
<style type="text/css">
p em { color: red; }
</style>
</head>
<body>
<p>This paragraph include <em>descendant</em>
selector </p>
This line not include <em>descendant</em> selector
</body>
</html>
Child Selector. Is similar to a descendant selector, but
it targets only the direct children of a given element.
✓ That means it matches all elements that are the
immediate children of a specified element.
✓ defined as a>b {color: #red;}
<html>
<head>
<style type="text/css">
div ol > li strong {color: red;}
</style>
</head>
<body>
<ol>
<li>The strong text here is <strong>not</strong> change the color. </li>
</ol>
<div>
<ol>
<li>next is direct child ..
<ul>
<li>The strong text here <strong>is changed</strong> the color. </li>
</ul>
</li>
</ol> </div> </body> </html>
Adjacent Sibling Selector. Selects an element’s next
sibling, that is it allows you to select an element that is
directly after another specific element.
✓ The special character used in Adjacent Sibling
selector is the + (plus) character.
✓ Specified as div + p {color: red;}
<html>
<head>
<style type="text/css">
div + p {color: red;}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Next Paragraph</p>
<div> Div section </div>
<p> Paragraph after Div</p>
</body>
</html>
General Sibling Selector. Almost similar to the
adjacent sibling selector. The difference is that it selects any
element that follows another element, it doesn’t need to be
directly preceding element, can appear anywhere after it.
character used in Adjacent Sibling selector is ~ (tilde)
character.
✓ Created as: p ~ h1 {color: red;}
<html>
<head>
<style type="text/css">
p ~ h1 {color: red;}
</style>
</head>
<body>
<h1>Heading </h1>
<p>Paragraph after heading 1</p>
<h1>Heading 2</h1>
<p>Paragraph after heading 2</p>
<b>This is to test the general sibling</b><br>
<i>This is to test the general sibling</i>
<h1>Heading 2</h1>
</body>
Multiple Style Sheets Cascading Order:
What style will be used when there is more than one style
specified for an HTML element?
❖ All the styles in a page will "cascade" into a new
"virtual" style sheet by the following rules, where
number one has the highest priority:
✓ Inline Style (inside an HTML elements)
✓ Internal and External style sheets (inside
head section).
✓ Browser Default
So, an inline style has the highest priority, and will
override external and internal styles and browser defaults.
If there are two or more rules that apply to the same element,
it is important to understand which will take precedence.
✓ Last rule: If the two selectors are identical, the latter of
the two will take precedence.
✓ Specificity: If one selector is more specific than the
others, the more specific rule will take precedence over
more general ones.
✓ Important: You can add !important after any property
value to indicate that it should be considered more
important than other rules that apply to the same
element.
CSS Inheritance:
If you specify the font-family or color properties on the
<body> element, they will apply to most child elements.
This is because the value of the font-family property is
inherited by child elements.
It saves you from having to apply these properties to as
many elements (and results in simpler style sheets).
You can compare this with the background-color or border
properties; they are not inherited by child elements. If
these were inherited by all child elements then the page
could look quite messy.
To enforce properties to inherit values from their parent
elements, use “inherit” word for the value of the
properties.
CSS Color
As we have discussed, each HTML elements has invisible box
and content. Hello World
Box
Content
So, you can set color for both the box and the content with
background-color and color properties respectively.
The value can be specified using RGB values, hex codes
and color names.
Color name: e.g., background-color: red; CSS has 147
predefined color names.
RGB values: each and every colors are a combination of
RGB (i.e. RED, GREEN and BLUE) colors
E.g., Color: rgb (0,0,0) //black color
Each value be from 0 to 255
Color: rgb (255,255,255) is white color
Hex codes: Color property can be set with
hexadecimal value. Each color has 6-digit hexadecimal
value
E.g., color: #000000 //black color
background: #ff0000 // red color
Opacity: The value for opacity is a number between 0
(completely transparent) and 1(completely opaque).
The opacity setting applies to the entire element both
the foreground and the background.
Note: If you want to affect just one or the other, use an
RGBa color value instead.
CSS3: HSL Colors
CSS hsl() function can be used to provide a color value when
using CSS.
It allows you to specify a color value by specifying the hue,
saturation, and light components of the color.
HSL (which stands for Hue Saturation Lightness) is a hue-based
representation of the RGB color space of computer graphics.
Color: hsl(180, 0.5 ,0.8)
The hue component: represents an angle of the color circle. You can
specify the value as an angle in degree (e.g. 180deg) or simply as a
number (e.g. 180)
Saturation: it is expressed as a percentage. For e.g. 100% is fully
saturated (more colorful and intense), while 0 is fully-unsaturated gray.
Lightness: it represents the amount of light in the color. For lightness,
50% is the “normal” setting, while 100% is white and 0% is black.
CSS Box Model:
When laying out a document, the browser's rendering engine
represents each element as a rectangular box according to
the standard CSS basic box model.
CSS determines the size, position, and properties (color,
background, border size, etc.) of these boxes.
Every box is composed of
four parts (or areas),
defined by their
respective edges: the
content edge, padding
edge, border edge, and
margin edge.
Content Area.
✓ The content area, bounded by the content edge, contains
the "real" content of the element, such as text, an image, or
a video player.
✓ Its dimensions are the content width (or content-box width)
and the content height (or content-box height).
Padding Area.
✓ The padding area, bounded by the padding edge, extends
the content area to include the element's padding. Its
dimensions are the padding-box width and the padding-box
height.
Border Area.
✓ The border area, bounded by the border edge, extends the
padding area to include the element's borders. Its dimensions
are the border-box width and the border-box height.
Margin Area.
✓ The margin area, bounded by the margin edge, extends the
border area to include an empty area used to separate the
element from its neighbors.
✓ Its dimensions are the margin-box width and the margin-box
height.
Box-sizing: width and height properties are used to make the
content area of an element a specific width or height. But you
have to know exactly which element of the element box you
are sizing.
❖ Content-box:
✓ default value as specified by the CSS standard.
✓ width and height properties include the content,
but does not include the padding, border, or margin.
✓ For example, .box {width: 350px; border: 10px
solid black;} renders a box that is 370px wide.
❖ Border-box:
✓ The width and height properties include the
content, padding, and border, but do not include
the margin.
✓ Note that padding and border will be inside of
the box.
✓ For example, .box {width: 350px; border: 10px
solid black;} renders a box that is 350px wide,
with the area for content being 330px wide.
Padding area:
✓ An element's padding area is the space between its content
and its border.
✓ Its dimensions are the padding-box width and the padding-
box height.
✓ The padding CSS shorthand property sets the padding area
on all four sides of an element at once.
✓ This property is a shorthand for the following CSS
properties: Padding-bottom, padding-left, padding-right,
padding-top
✓ padding property may be specified using one, two, three,
or four values.
✓ Each value is a <length> or a <percentage>. Negative
values are invalid.
❖ When one value is specified, it applies the same
padding applied to all four sides.
❖ When two values are specified, the first padding
applies to the top and bottom, the second to the left
and right.
❖ When three values are specified, the first padding
applies to the top, the second to the right and left,
the third to the bottom.
❖ When four values are specified, the paddings
apply to the top, right, bottom, and left in that order
(clockwise).
padding: 1em;
padding: 10px 50px 20px;
Border area:
✓ The border shorthand CSS property sets an element's
border. It sets the values of border-width, border-style, and
border-color.
border: 2px solid red
Line-width: Sets the thickness of the border default is
medium
Line-style: Sets the style of the border default is none
Color: Sets the color of the border default to current color if
absent
✓ Border-width> border-top-width, border-right-width,
border-bottom-width, border-left-width
✓ Border-style> border-top-style, border-right-style,
border-bottom-style, border-left-style
✓ border-color> border-top-color, border-right-color, border-
bottom-color, border-left-color
border: thick double #32a1ce;
border: solid ;
Margin area:
✓ This property can be used to set a margin on all four sides
of an element. Margins create extra space around an
element, unlike padding, which creates extra space within an
element.
✓ This property(margin) is a shorthand for the following CSS
properties:
Margin , margin-top, margin-right, margin-bottom, margin-left
✓ Margin may be specified using one, two, three, or four
values. Each value is a <length>, a <percentage>, or the
keyword auto. Negative values draw the element closer to
its neighbors than it would be by default.
❖When one value is specified, it applies the same margin to all four sides.
❖When two values are specified, the first margin applies to the top and
bottom, the second to the left and right.
❖When three values are specified, the first margin applies to the top, the
second to the right and left, the third to the bottom.
❖When four values are specified, the margins apply to the top, right,
bottom, and left in that order (clockwise).
<p>Analog synthesizers are often said to have a "warmer" sound
than their digital counterparts. </p>
<p class="example">Analog synthesizers are often said to have a
"warmer" sound than their digital counterparts. </p>
CSS
p{
width: 200px;
border: 2px solid #0088dd;
padding: 10px;}
p.example {
margin: 20px;}
