CHAPTER Three - Cascading Style Sheets (CSS)

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>
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>
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>
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>
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>
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;}
CSS Typography
❖ Is a way that text is arranged and presented.
❖ So, there are a lot of property for text including the font
of the text.
✓ Font
❖ Font-size: 2em Font-weight: 700/bold Typeface(font
family): Times Font Style: italic Font-variant: small-caps
✓ Text-decoration
❖ text-decoration: underline/overline/line-through
✓ Text-transformation
❖ Text-transform: capitalize/uppercase/lowercase
✓ Text-align
❖ Text-align: right Text-indent: 2em
Generic Font names
✓ The font-family property to specify a font or list of fonts

(font stack) by name.
✓ @font-face: is used by authors(designers) to provide their

own fonts that is not installed on the user machine.
Font Size: to specify the font-size we can use absolute keywords (xx-
small, x-small, medium, large, etc.) The medium corresponds to the
default font size.
✓ The preferred values for font-size in web design are the relative
length unit’s em and rem, as well as percentage values. The font-
size can be defined in pixels (px) but it doesn’t provide flexibility
required in web page design.
em is based on the font-size of the current

element. It will be relative to the inherited size
for that element. The em measurement can be
used for other measurement like margins,
padding, element width, and other setting
that it needs to be relative to the size of font.
In the above example the size of an h1
that has inherited the default 16-pixel pixel
font size from the root will be 1.5 * 16 = 24
rem: it stands for “root em” is always relative to the size of the root (html) element.
If the root size is 16 pixels, then a rem equals 16 pixels. If the root size be other
than 16 pixels, elements specified in rem values will resize accordingly.
Percentage value: a percentage value (100%) is used to preserve the default
font size, but percentage value can be used for any element.
In this example the h1 inherits the default 16px size from the html element and
applying the 150% value multiplies that inherited value, resulting h1 that is 24 pixels.
font: The font shorthand property can compile all the font-related property into
one rule.
The font property must include a font-size value and a font-family value, in that order.
Omitting one or putting them in the wrong order cause the entire rule to be invalid. This is
an example of minimal font property value:
Leading(line-height): is used for the vertical space between lines of text.
Increasing the line-height makes the vertical gap between lines

of text larger. This makes text easier to read. The measurement is better to be set using ems
not pixels.
Indent: The text-indent property indents the first line of text by a specified amount. Length
measurement or percentage value for text-indent.
Horizontal Text Alignment: aligning text for webpage is possible like word processing or
desktop publishing program with the text-align property.
Letter and word spacing: add space between the letters of the text or words in a line,
respectively.
Text Shadow: adds a shadow below the text that makes it seem to hover above the
page. Text shadows are behind the text but in front of the background and border if
there is one.
The value contains two or three measurements (a horizontal offset, vertical offset and an
optional blur radius).
CSS Lists
✓ Browsers automatically insert
bullets before unordered list items,
and numbers before items in order
list.
✓ Authors can choose the type and
position of the marker, or turn them
off entirely.
✓ List properties are the followings:
❖ list-style-type: upper-roman
❖ list-style-position: inside/outside
❖ list-style-image: url(location)
Layout and Positioning
✓ If one block-level element sits inside ❖ The <body> element is the containing
another block-level elements then the element for these three <div>
outer box is known as the containing elements.
or parent elements. ❖ The second <div> element is the
containing element for two
✓ It is common to group a number of paragraphs of Latin text and images
elements together inside a <div> or (represented by crossed squares).
<section> elements. Let us see the
following figure in detail
❖ A box may be nested inside several
other block-level elements. The
containing element is always the direct
parent of that element.
❖ The red lines in this diagram represent
<div> elements.
❖ The header (containing the logo and
navigation) are in one <div> element,
the main content of the page is in
another, and the footer is in a third.
✓ Floating and positioning are used for breaking out the normal flow and
arranging elements on the page. Floating an element moves it to the left or
right and allows the following text to wrap around it. Positioning is a way to
specify the location of an element anywhere on the page with pixel precision.
Normal Flow
✓ In normal flow, each block level element sits on top of the next one. Inline
elements and text characters line up next to one another to fill the block
elements.
✓ When the window or containing element resizes, the block elements expand
or contract to the new width, and the inline content reflows.
✓ It is default way in which browsers treat HTML elements.
Floating
✓ float property moves an element as far possible to the left or right, allowing
the following content to wrap around it.
✓ The next example shows how the paragraph and the contained image are
rendered by default and how it looks when the float property is applied
How can we add a space between the image element and the surrounding text? We can
use Margin.
Important notes
❖ The floated element removed from its position in the normal flow but it continues to
influence the surrounding content. (Like island of a stream).
❖ Float stay in the content area of the containing element.
❖ Margins are maintained.
Floating inline elements
❖ It is possible to float an inline text (non-replaced) element. The following example
shows floating a span of text.
Important points (non-replaced inline element floating)
✓ It is necessary to specify a width for floated text element.
✓ Floated inline elements behave as block elements.
✓ Margin on floated elements do not collapse.
Floating block elements
✓ It is necessary to provide a width for floated block elements.
✓ Elements do not float higher than their reference in the source.
✓ Non-floated elements maintain the normal flow.
Clear property: is used to turn the text wrapping off and get back to normal flow
as usual. This can be done by clearing the element that you want to start below the
float. The left ,right, both can be used as a value.
N.B. You apply clear property to the element you want to start below the floated
element, not the floated element itself.
In the example below the clear property is used to make h2 element start below left-
floated element.
Positioning
Static
❖ This is the normal positioning scheme in
which elements are positioned as they
occur in the normal document flow.
❖ Relative: moves an element in relation to where it would have been in normal flow.
When an element is relatively positioned, the space it once occupied is preserved
and continues to influence the layout of surrounding content.
✓ You can indicate that an element should be relatively positioned using the
position property with a value of relative.
✓ It is used with offset properties (top or bottom and right or left) to indicate how
far to move the elements from where it would have been in normal flow.
❖ Absolute: When the position property is given a value of absolute, the box is taken
out of normal flow and no longer affects the position of other elements on the page.
When an element is absolutely positioned, the space it once occupied is closed up.
❖ Fixed: Fixed positioning is a type of absolute positioning that requires the position
property to have a value of fixed.
✓ It positions the element always in relation to the browser window. Therefore,
when a user scrolls down the page, it stays in the exact same place.
In this example the h1 positioned
as fixed so it can placed exactly
the same place when the user
scrolls.
❖ Sticky: Sticky positioning is a combination of relative and fixed in that it behaves
as though it is relatively positioned, until it is scrolled into a specified position relative
to the viewport, at which point it remains fixed.
❖ Z-index: When you use relative, fixed, or absolute positioning, boxes can overlap.
✓ If boxes do overlap, the elements that appear later in the HTML code sit on top
of those that are earlier in the page.
✓ If you want to control which element sits on top, you can use the z-index property.
✓ Its value is a number, and the higher the number the closer that element is to the
front.
Display Types
❖ The display property defines the type of element box an element generates in the
layout.
❖ In addition to the inline and block display types, we can make elements display as
list items, flex or grid or various parts of a table.
❖ It is common practice to make li elements (which usually display the characteristics of block
elements) display as inline elements to turn a list into a horizontal navigation bar. a(anchor)
element display as a block in order to give it a specific width and height.
❖ Another useful value for the display property is none, which removes the content
from the normal flow entirely. Unlike visibility: hidden, which just makes the element
invisible but keeps the space it would have occupied blank, display: none removes
the content, and the space it would have occupied is closed up.
N.B Display type assignment is useful for achieving layout effects while keeping
the semantics of the HTML source.
CSS Flexbox
❖ The Flexible Box Module, usually referred to as flexbox, was designed as a one-
dimensional layout model, and as a method that could offer space distribution between
items in an interface and powerful alignment capability.
❖ When we describe flexbox as being one dimensional, we are describing the fact that
flexbox deals with layout in one dimension at a time — either as a row or as a column.
This can be contrasted with the two-dimensional model of CSS Grid Layout, which
controls columns and rows together.
❖ When working with flexbox you need to think in terms of two axes — the main axis
and the cross axis. The main axis is defined by the flex-direction property, and the
cross axis runs perpendicular to it.
❖ Main Axis
The main axis is defined by flex-direction, which has four possible values:
row, row-reverse, column or column reverse
1) When we choose row or row-reverse, the
main axis will run along the row in the
inline direction
2) When we choose column or column-
reverse the main axis will run from the
top of the page to the bottom – in the
block direction
Start and End lines

✓ Traditionally the writing was horizontal
and left-to-right writing modes.
✓ If the flex-direction is row and I am
working in English, then the start edge of
the main axis will be on the left, the end
edge on the right. Incase of Arabic, it will
be from right to left.
The Flex Container
❖ To create a flex container, we set the value of the area’s container’s display
property to flex or inline-flex.
e.g., display: flex
Changing Flex Direction
❖ flex-direction property to the flex container allows us to change the direction in
which our flex items display.
❖ Setting the flex-direction: row-reverse will keep the items displaying along the
row; however, the start and end lines are switched.
e.g., flex-direction: column;
Multi-line flex containers with flex-wrap
❖ flex-wrap property with a value wrap will allow to wrap item in the container.
❖ If the items be too large to all display in one line, they will wrap onto another
line.
Align Items
❖ The align-items property will align the items on the cross axis.
❖ The initial value for this property is stretch and this is why flex items stretch to the
height of the flex container by default. But the value be also flex-start, flex-end
center
Justify-content
❖ justify-content property is used to align the items on the main axis, the direction
in which flex-direction has set the flow.
❖ The initial value is flex-start which will line the items up at the start edge of the
container, but you could also set the value to flex-end to line them up at the
end, or center to line them up in the center. The value also includes space-
between, space-around and space-evenly.
Reading Assignment (flex property) which applies to flex items, not the
container.
CSS Grid
❖ Grid Layout used at dividing a page into major regions or defining the
relationship in terms of size, position, and layer, between parts of a control
built from HTML primitives.
❖ Like tables, grid layout enables an author to align elements into columns and
rows. However, many more layouts are either possible or easier with CSS
grid than they were with tables.
Grid layout properties
○ display ○ grid-column-start
○ grid-template-columns ○ grid-row-end
○ grid-template-rows ○ grid-column-end
○ grid-template-areas ○ grid-row
○ grid-template ○ grid-column
○ grid-auto-columns ○ grid-area
○ grid-auto-rows ○ row-gap
○ grid-auto-flow ○ column-gap
○ grid ○ gap
○ grid-row-start
HTML5 Layout Elements
❖ For a long time, web page authors used <div> elements to group together related
elements on the page (such as the elements that form a header, an article, footer or
sidebar).
❖ Authors used class or id attributes to indicate the role of the <div> element in the
structure of the page.
Traditional way HTML5
❖ Header/footer: The <header> and <footer> elements can be used to create
the main header or footer that appears at the top or bottom of every page on
the site.
❖ Nav: The <nav> element is used to contain the major navigational blocks on the
site such as the primary site navigation
❖ Article: The <article> element acts as a container for any section of a page that
could stand alone and potentially be syndicated
❖ Aside: The <aside> element state additional information about the page or
other things
❖ Section: The <section> element groups related content together, and typically
each section would have its own heading.
❖ Hgroup: The purpose of the <hgroup> element is to group together a set of one
or more <h1> through <h6> elements so that they are treated as one single
heading.
❖ Figure and Figcaption: Used to insert image and figure caption.

CHAPTER Three - Cascading Style Sheets (CSS)

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

CHAPTER Three - Cascading Style Sheets (CSS)

Uploaded by

Copyright:

Available Formats

CHAPTER Three –

Cascading Style Sheets (CSS)

✓ CSS: anything that makes the structure looks good, such

✓ A CSS rule contains two

✓ Declarations indicate how the elements referred to in the

❖ Properties indicate the aspects of the element you want

✓ < ul style="list-style-type: square”>

For example, you might apply an ID to a unique heading. To

Every box is composed of

padding: 10px 50px 20px;

✓ The font-family property to specify a font or list of fonts

✓ @font-face: is used by authors(designers) to provide their

em is based on the font-size of the current

Increasing the line-height makes the vertical gap between lines

Start and End lines

You might also like