Cascading Style Sheet Handout March 2023

Cascading Style Sheets,
@Copyright Dec 2013 by Anthony

OVERVIEW
• You should be familiar with:
– Basic word processing using any text editor.
– How to create directories and files.
– How to navigate through different directories.
– Basic understanding on internet browsing using a
browser like Internet Explorer or Firefox etc.
– Basic understanding on developing simple Web
Pages using HTML or XHTML.

What is CSS?
• Cascading Style Sheets, fondly referred to as CSS, is a
simple design language intended to simplify the
process of making web pages presentable.
• CSS handles the look and feel part of a web page.
• Using CSS, you can control the color of the text, the
style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background
images or colors are used, as well as a variety of
other effects.
• CSS is easy to learn and understand but it provides
powerful control over the presentation of an HTML
document.
Using CSS
• CSS can be added to HTML documents in 3
ways:
– Inline - by using the style attribute inside HTML
elements
– Internal - by using a <style> element in
the <head> section
– External - by using a <link> element to link to an
external CSS file

Inline CSS
• An inline CSS is used to apply a unique style to
a single HTML element.
• An inline CSS uses the style attribute of an
HTML element.
• The following example sets the text color of
the <h1> element to blue, and the text color
of the <p> element to red:

Inline CSS

Internal CSS
• An internal CSS is used to define a style for a
single HTML page.
• An internal CSS is defined in the <head> section
of an HTML page, within a <style> element.
• The following example sets the text color of ALL
the <h1> elements (on that page) to green, and
the text color of ALL the <p> elements to cyan. In
addition, the page will be displayed with a
“lightblue" background color:
Internal CSS

External CSS
• An external style sheet is used to define the
style for many HTML pages.
• To use an external style sheet, add a link to it
in the <head> section of each HTML page:

External CSS

External CSS
• The external style sheet can be written in any
text editor. The file must not contain any
HTML code, and must be saved with a .css
extension.
• Here is what the “mkustyles.css" file looks like:

CSS Syntax
• A CSS comprises of style rules that are interpreted
by the browser and then applied to the
corresponding elements in your document.
• A style rule is made of three parts:
– Selector: A selector is an HTML tag at which 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.
Put simply, all the HTML attributes are converted into
CSS properties. They could be color or border etc.
– Value: Values are assigned to properties. For
example color property can have value
either red or #F1F1F1 etc.
CSS Syntax
• You can put CSS Style Rule Syntax as follows:
selector { property: value }
• A CSS rule two main parts: a selector, and one
or more declarations:

CSS Syntax
• The selector is normally the HTML element you
want to style.
• Each declaration consists of a property and a
value.
• The property is the style attribute you want to
change. Each property has a value.

CSS Example
• A CSS declaration always ends with a semicolon,
and declaration groups are surrounded by curly
brackets:
p {color:red;text-align:center;}
• To make the CSS more readable, you can put one
declaration on each line, like this:
p
{
color:red;
text-align:center;
}

CSS Example
<html>
<head>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

CSS Comments
• Comments are used to explain your code, and may
help you when you edit the source code at a later
date. Comments are ignored by browsers.
• A CSS comment begins with "/*", and ends with "*/",
like this:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
CSS Id and Class
• In addition to setting a style for a HTML
element, CSS allows you to specify your own
selectors called "id" and "class".
The id Selector
• The id selector is used to specify a style for a
single, unique element.
• The id selector uses the id attribute of the
HTML element, and is defined with a "#".
• The style rule below will be applied to the
element with id="para1":

The id Selector: Example
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
The class Selector
• The class selector is used to specify a style for a
group of elements.
• Unlike the id selector, the class selector is most
often used on several elements.
• This allows you to set a particular style for
many HTML elements with the same class.
• The class selector uses the HTML class
attribute, and is defined with a "."
• In the example below, all HTML elements with
class="center" will be center-aligned:
.center {text-align:center;}
Class Selector: Example
<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
CSS Background

Background Color
• The background-color property specifies the
background color of an element.
• The background color of a page is defined in
the body selector:
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"

Background Color: Example
<html>
<head>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>

<p>Hello world! This is a BODY background example.</p>
</body>
</html> @Copyright Dec 2013 by Anthony
<html><head>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>

<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div></body></html> @Copyright Dec 2013 by Anthony
Background Image
• The background-image property specifies an
image to use as the background of an
element.
• By default, the image is repeated so it covers
the entire element.
• The background image for a page can be set
like this:
body {background-image:url('Desert.jpg');}

<html>
<head>
<style>
body {background-image:url('Desert.jpg');}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>

CSS Text

Text Color
• The color property is used to set the
color of the text.
–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"

<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The
default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is
blue.</p>
</body>
</html>
Text Alignment
• 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.
• When text-align is set to "justify", each line is
stretched so that every line has equal width, and
the left and right margins are straight (like in
magazines and newspapers).
` h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Text Decoration
• The text-decoration property is used to set or
remove decorations from text.
• The text-decoration property is mostly used to
remove underlines from links for design
purposes
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

Text Decoration
<html>
<head>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
</body>
Text Transformation
• The text-transform property is used to specify
uppercase and lowercase letters in a text.
• It can be used to turn everything into
uppercase or lowercase letters, or capitalize
the first letter of each word.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Text Transformation: Example
<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>
Text Indentation
• The text-indent property is used to specify the
indentation of the first line of a text.
p {text-indent:50px;}

CSS Font Families

CSS Font Families
• In CSS, there are two types of font family names:
– generic family - a group of font families with a similar
look (like "Serif" or "Monospace")
– font family - a specific font family (like "Times New
Roman" or "Arial")

Font Family
• The font family of a text is set with the font-family
property.
• The font-family property should hold several font
names as a "fallback" system. If the browser does not
support the first font, it tries the next font.
• Start with the font you want, and end with a generic
family, to let the browser pick a similar font in the
generic family, if no other fonts are available.
• Note: If the name of a font family is more than one
word, it must be in quotation marks, like: "Times
New Roman".
• More than one font family is specified in a comma-
separated list:
p{font-family:"Times New Roman", Times, serif;}
Font Style
• 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)
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Font Size
• The font-size property sets the size of the text.
• Being able to manage the text size is
important in web design.
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

CSS Links

Styling Links
• Links can be styled in different ways.
• Links can be styled with any CSS property (e.g.
color, font-family, background, etc.).
• In addition, links can be styled differently
depending on what state they are in.
• 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
Styling Links
<html>
<head>
<style>
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>
CSS Tables

Table Borders
• To specify table borders in CSS, use the border
property.
• The example below specifies a black border for
table, th, and td elements:
table, th, td
{
border: 1px solid black;
}

Table Borders: Examples
<html><head>
<style>
table,th,td
{
border:1px solid black;
}
</style></head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table></body></html> @Copyright Dec 2013 by Anthony
Table Width and Height
• Width and height of a table is defined by the width
and height properties.
• The example below sets the width of the table to
100%, and the height of the th elements to 50px:
Example
table
{
width:100%;
}
th
{
height:50px;
} @Copyright Dec 2013 by Anthony
Table Text Alignment
• The text in a table is aligned with the text-align and
vertical-align properties.
• The text-align property sets the horizontal alignment,
like left, right, or center:
Example
td
{
text-align:right;
}
• The vertical-align property sets the vertical alignment,
like top, bottom, or middle:

Table Padding
• To control the space between the border and

content in a table, use the padding property
on td and th elements:

Table Color
• The example below specifies the color of the
borders, and the text and background color of th
elements:
Example
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
End
of
Basic CSS

Cascading Style Sheets,
Part 2

CSS Layout - float
• The CSS float property specifies how an element should
float.
• The float property is used for positioning and formatting
content e.g. let an image float left to the text in a
container.
• The float property can have one of the following values:
– left - The element floats to the left of its container

– right - The element floats to the right of its container
– none - The element does not float (will be displayed just
where it occurs in the text). This is default

CSS Layout – float:left

CSS Layout – float:left

CSS Display
• CSS display is the most important property of
CSS which is used to control the layout of the
element.
• It specifies how the element is displayed.
• Every element has a default display value
according to its nature.
• Every element on the webpage is a rectangular
box and the CSS property defines the behavior
of that rectangular box.

CSS display block
• The CSS display block element takes as much
as horizontal space as they can.
• Means the block element takes the full
available width.
• They make a line break before and after them.
• Every HTML element has a default display
value depending on what type of element it is.
• The default display value for most elements is
block or inline.
Block-level Elements
• A block-level element always starts on a new line
and takes up the full width available (stretches
out to the left and right as far as it can).
• The <div> element is a block-level element.
• Examples of block-level elements
– <div>
– <h1> - <h6>
– <p>
– <form>
– <header>
– <footer>

<div> element
• The div tag is known as Division tag.
• The div tag is used in HTML to make divisions
of content in the web page like(text, images,
header, footer, navigation bar, etc).
• The <div> tag is an empty container that is
used to define a division or a section.
• It does not affect the content or layout and is
used to group HTML elements to be styled
with CSS
<div> element
• The DIV is the most usable tag in web
development because it helps us to separate
out data in the web page and we can create a
particular section for particular data or
function in the web pages.
– Div tag is Block level tag
– It is a generic container tag
– It is used to group various tags of HTML so that
sections can be created and styles can be applied
to them.
<div> element

<div> element

Inline Elements
• Displays an element as an inline element.
• Any height and width properties will have no
effect.

Inline Elements
• This one displays the element inline or on the
same line.
• In other words, inline elements do NOT start
on a new line and only takes up as much width
as its content.

Inline Elements
• Any height and width properties will have no
effect
• So, if you try to set any width and height, it will
have NO effects.
•
• …No Change
Inline Elements
• Here are a few elements that have a default
inline property:
– <span>
– <a>
– <img>

Inline Elements

Inline Elements

inline-block
• Displays an element as an inline-level block
container. You CAN set height and width
values.

inline-block
• inline-block is essentially the same thing as
inline, except that you can set height and
width values

inline-block
• display: inline-block is to display list items
horizontally instead of vertically

block
• block starts on a NEW line and takes up the
full width available.
• So that means block elements will occupy the
entire width of its parent element.

block elements
• Here are a few elements that have a default
block property:
– div
– h1
–p
– li

CSS display block

Navigation Bar
• With CSS you can transform boring HTML
menus into good-looking navigation bars.
• A navigation bar is basically a list of links, so
using the <ul> and <li> elements makes
perfect sense

Navigation Bar

Navigation Bar
• Now let's remove the bullets and the margins
and padding from the list
• list-style-type: none; - Removes the bullets. A

navigation bar does not need list markers
• Set margin: 0; and padding: 0; to remove
browser default settings
Navigation Bar

Vertical Navigation Bar
• To build a vertical navigation bar, you can style the
<a> elements inside the list
– display: block; - Displaying the links as block elements

makes the whole link area clickable (not just the text),
and it allows us to specify the width (and padding,
margin, height, etc. if you want)
– width: 60px; - Block elements take up the full width
available by default. We want to specify a 60 pixels
width
• To build a vertical navigation bar, you can style
the <a> elements inside the list

the <a> elements inside the list and specify the
width

the <a> elements inside the list and specify the
width and anchor padding(1..side & 2…between)

Vertical Navigation Bar with Background
• Create a basic vertical navigation bar with a red
background color and change the background
color of the links when the user moves the
mouse over them:

Center Links & Add Borders

Center Links & Add Borders

Horizontal Navigation Bar
• Inline List Items
• One way to build a horizontal navigation bar is to
specify the <li> elements as inline
• display: inline; - By default, <li> elements are block

elements. Here, we remove the line breaks before and
after each list item, to display them on one line


• Floating List Items

• Floating List Items

Active/Current Navigation Link
• Add an "active" class to the current link to let the
user know which page he/she is on:

Border Dividers

CSS Website Layout
• A website is often divided into headers,
menus, content and a footer:

Header
• A header is usually located at the top of the
website (or right below a top navigation
menu). It often contains a logo or the website
name:

Header

Navigation Bar

Content
• The layout in this section, often depends on
the target users. The most common layout is
one (or combining them) of the following:
– 1-column (often used for mobile browsers)
– 2-column (often used for tablets and laptops)
– 3-column layout (only used for desktops)

Columns

Footer
• The footer is placed at the bottom of your
page. It often contains information like
copyright and contact info:

Complete Class MKU Website

End
of
Basic CSS

Cascading Style Sheet Handout March 2023

Uploaded by

Document Information

Original Description:

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

Cascading Style Sheet Handout March 2023

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets,

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

<h1>My CSS web page!</h1>

<h1>CSS background-color example!</h1>

@Copyright Dec 2013 by Anthony

</html> @Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

• To control the space between the border and

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

• The float property can have one of the following values:

– left - The element floats to the left of its container

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

@Copyright Dec 2013 by Anthony

• list-style-type: none; - Removes the bullets. A

@Copyright Dec 2013 by Anthony

– display: block; - Displaying the links as block elements