Chapter 5: CSS
Cascading Style Sheet
Compiled by: yenesew.A;abgs school
What is CSS?
CSS stands for Cascading Style Sheets. It is a language designed to specify the
overall appearance of webpages as well as the appearance and structure of the text
and elements such as images and buttons on webpages and their layout.
Styles can be specified with CSS using internal style sheet definitions which are
placed right into HTML/XHTML code or in external files.
CSS and HTML
Not just a language all its own, CSS is a part of HTML.
The first version of HTML to include CSS was HTML 4.0
CSS was added to HTML to solve a particular problem - the problem of the
content of HTML documents not being separated from the layout of the
documents.
This problem arose when the two most popular web browsers (Netscape and Internet
Explorer) continuously added new tags and attributes to the HTML specification.
Without the use of formatting tags, the layout of an HTML document was supposed to be
taken care of by web browsers.
The original purpose of HTML tags was to specify the content that will appear on
webpages, and not their layout. But this was no longer the case, as Netscape and Internet
Explorer added to the HTML specification.
The World Wide Web Consortium (W3C) - the organization responsible for developing and
maintaining standards on the world wide web created CSS to solve the problem of content
not being separated from layout.
While CSS should be used to specify the overall appearance of webpages as well as the
appearance and structure of the text and elements such as images and buttons on webpages
and their layout, HTML/XHTML should be used to specify the content on webpages
What can be done with CSS?
Specify a background color - You can specify a background color for a webpage, a table, a form element, a
paragraph, and more.
Specify a common style for one tag or a set of tags. - For example, you can specify that all text declared with the
<h2> tag should be blue or that all text declared with the <p> (paragraph) tag should be bold and in a Courier
font.
Specify the distance between elements - For example, you can specify how much distance between the top most
point of a page and the first element that appears on it there should be or the line spacing in a paragraph.
Specify the appearance of links - For example, you can specify that an unvisited link should be blue and not
underlined, when the user moves the mouse over a link it should have a gray background and be underlined, and
visited links should be green.
Specify multiple styles for various webpages - You can have one stylesheet definition that can be used on several
webpages instead of redefining the style on each individual page. For example, if you want the links on several
of your pages to be green, you can specify this in one external stylesheet definition, and upload it to the pages
where you want this particular style to take effect. Once you want to make a change to the stylesheet definition,
you can do so in the stylesheet, and the changes will appear automatically on all the pages that the stylesheet has
been uploaded to.
The three types of stylesheets
There are three types of stylesheets:
1. Internal/Embedded - Placed right on the page whose interface it will affect.
Embedded styles are styles that are embedded in the head of the document.
Embedded styles affect only the tags on the page they are embedded in.
<style type="text/css">
p { color: #00f; } </style>
2. External - Placed in a separate file.
3. Inline - Placed inside a tag it will affect.
Inline styles are styles that are written directly in the tag on the document.
Inline styles affect only the tag they are applied to.
<a href="" style="text-decoration: none;">
1. Creating an internal stylesheet
Use an internal stylesheet when you want an HTML
document to have a unique style.
An internal stylesheet is defined using the <style> tag and
goes in the head section of an HTML document.
The <style> tag specifies the content type of a stylesheet
with its type attribute which should be set to "text/css".
Syntax:
<style type="text/css"> styles go here
</style>
Example:
<html>
<head>
<style type="text/css">
p {color: green}
</style>
</head>
<body>
<p> The text in this paragraph will be green. </p> <p> This
paragraph too. </p>
</body> </html>
The above stylesheet definition specifies that all text
declared with the <p> tag should be green.
Output:
The text in this paragraph will be green.
This paragraph too.
NOTE: There are some old browsers still in use that do not
support styles. Such browsers will ignore the <style> tag and
will display the content within it on a webpage. You can
prevent this by placing HTML comments within the <style>
tag
Example:
<html>
<head>
<style type="text/css">
<!--
p {color: green;
}
-->
</style>
</head>
<body>
<p> The text in this paragraph will be green. </p>
</body>
</html>
2. Creating an external stylesheet
Use an external stylesheet when you want to apply one style to
many pages.
If you make one change in an external stylesheet, the change is
universal on all the pages where the stylesheet is used.
An external stylesheet is declared in an external file with a .css
extension. It is called by pages whose interface it will affect.
External stylesheets are called using the <link> tag which should
be placed in the head section of an HTML document.
This tag takes three attributes.
Attributes of the <link> tag:
rel - When using an external stylesheet on a webpage, this
attribute takes the value "stylesheet"
type - When using an external stylesheet on a webpage,
this attribute takes the value "text/css"
href - Denotes the name and location of the external
stylesheet to be used.
Example:
<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]"
/>
</head>
<body>
<p> The text in this paragraph will be blue. </p>
</body>
</html>
Output: The text in this paragraph will be blue
The code from [Link]:
p {color:blue}
NOTE: The <style> tag is NOT used in an external stylesheet,
and neither are HTML comments.
3. Creating an inline stylesheet
Use inline stylesheets when you want to apply a style to a
single occurence of an element.
Inline stylesheets are declared within individual tags and
affect those tags only.
Inline stylesheets are declared with the style attribute.
Example:
<p style="color: gray">This text will be gray.</p>
In this example, we are using the stylesheet command
color to denote that the text in a paragraph will be gray.
Output:
This text will be gray.
Multiple stylesheets
You can have multiple stylesheet definitions on one page.
For example, an internal stylesheet and an external
stylesheet on one page or an inline stylesheet and an internal
stylesheet on one page.
If a property has been set for the same tag in different
stylesheet definitions on the same page, the definition that
will be used will be from the most specific stylesheet.
That is, the stylesheet that has the highest priority.
Stylesheets by priority:
Inline stylesheet - An inline stylesheet has the highest priority.
It will override styles declared in an internal stylesheet, an external
stylesheet, and a web browsers default styles.
Internal stylesheet - An internal stylesheet has the second highest
priority. It will override styles declared in an external stylesheet and a
web browsers default styles.
External stylesheet - An external stylesheet has the third highest priority.
It will override a web browsers default styles.
Browsers default styles - A web browsers default styles have the lowest
priority. A web browsers default styles will be used when there are no
styles set for an element in an inline, internal, or external stylesheet.
Example:
<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]" />
<style type="text/css">
<!--
p {color: orange
}
-->
</style>
</head>
<body>
<p style="color: yellow">
The text in this paragraph will be yellow. </p>
</body> </html>
Output: The text in this paragraph will be yellow.
In this example there are several stylesheet definitions:
external stylesheet definition taken from the file [Link]
- Specifies that the background color of the page should be
gray.
internal stylesheet definition - Specifies that text declared
with the <p> tag should be orange.
inline stylesheet definition - Specifies that text declared
with one particular <p> tag should be yellow.
Assume that this page is viewed in a web browser that has
the default background color for webpages set to light
yellow.
The external stylesheet definition will override the web
browsers default background color and will set the
background color of the page to gray.
The inline stylesheet definition will override the internal
stylesheets definition that specifies that text declared with
the <p> tag should be orange, and will set it to yellow.
CSS syntax
There are three parts in the CSS syntax:
selector {property: value}
selector - The selector is the HTML tag that a style will be applied to.
For example, the <p> tag for paragraphs or the <h2> heading tag.
property - The property is an aspect of the HTML tag that will be
affected by the stylesheet definition.
For example, the background color of a webpage or the color of
links.
value - The value that the property of a selector will have. For
example, the value of the background color of a webpage can be green
or the value of the color of links can be gray.
Example: body {background-color: gray}
The property and value of a selector are separated by a
colon, and sorrounded by curly braces.
If a value is more than one word, put quotes around it.
Example of value being more than one word:
h2 {font-family: "Trebuchet MS"}
If you specify more than one property, each property
should be separated with a semicolon.
Example of multiple properties: body {background-color:
gray; color: yellow;}
You can make style definitions more easily readable by
specifying each property on a separate line.
Example: body{
background-color: gray;
color: yellow;
margin-top: 0; }
Grouping styles
You can specify that a group of tags will have the same
styles by grouping them together.
Example: p, h1, h2, h3, h4
{ color: blue;
font-family: courier; }
In this example, all text declared with the tags <p>, <h1>,
<h2>, <h3>, and <h4> will be blue in color and Courier in
font.
1. CSS background properties
With CSS background properties, you can define how the background
of various elements is displayed.
The focuses are: Setting a background color & Setting a background
image
A. Setting a background color
You can use CSS to set the background color of various elements
including the webpage itself, tables, textboxes and links.
The background color of an element is set with the background-color
property. You can specify the background color of an element with a
color name, an RGB value, or a hexadecimal value.
Example:
<html> <head> <title>Background properties</title>
<style type="text/css">
body {background-color: #f0f8ff;}
h1 {background-color: lightsteelblue;}
p {background-color: rgb(220, 220, 220);}
a {background-color: #e6dcbe;}
</style>
</head>
<body>
<h1>Some text</h1>
<p> A paragraph </p>
<a href="[Link] [Link] main page
</a>
</body>
Output:
each of the following has different back ground
Some text
A paragraph
[Link] main page
B. Setting a background image
You can use CSS to set a background image for various
elements including the webpage itself and tables.
The background image of an element is set with the
background-image property.
The value this property takes should be the location of
the image specified within a url() identifier.
Example:
<html> <head> <title>Setting a background image</title>
<style type="text/css">
body {background-image: url(/images/[Link]);}
table {background-image: url(/images/[Link]);}
</style>
</head>
<body>
<table border="2"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr>
<td>Cell 3</td> <td>Cell 4</td> </tr>
</table> </body> </html>
Output: table with image back ground
Cell 1 Cell 2
Cell 3 Cell 4
2. CSS text properties
With CSS text properties, you can define how text is
displayed. You can specify the color of text, alignment
of text, and more.
This focuses on:
Setting text color
Aligning text
Decorating text
Setting letter spacing
A. Setting text color
Text color is set with the color property.
You can specify the color of text with a color name, an
RGB value, or a hexadecimal value.
Example:
<html>
<head> <title>Background properties</title>
<style type="text/css">
h1 {color: green;}
p {color: #00008b;}
[Link]{color: rgb(47, 49, 49);}
</style>
</head>
<body> <h1>This text is green</h1>
<p>This text is darkblue</p>
<p class="text">This text is darkslategray</p>
</body>
</html>
Output:
This text is green
This text is darkblue
This text is darkslategray
B. Aligning text
The alignment of text in an element is set with the text-
align property. With this property, you can set text to
align to the left, right, or center.
Example
<html>
<head> <title>Background properties</title>
<style type="text/css">
h1 {text-align: left;}
h2 {text-align: right;}
p {text-align: center;}
</style>
</head> <body>
<h1>This text is aligned to the left</h1> <h2>This text is
aligned to the right</h2> <p>This text is aligned to the
center</p>
</body>
</html>
Output:
This text is aligned to the left
This text is aligned to the right
This text is aligned to the center
C. Decorating text
Text decoration is set with the text-decoration property.
With this property, you can set text to be underlined, have
an overline, and more.
Example:
<html>
<head> <title>Background properties</title>
<style type="text/css">
p {text-decoration: underline;}
a {text-decoration: overline;}
h2 {text-decoration: line-through;}
h1 {text-decoration: blink;}
</style>
</head>
<body> <p>This text is underlined</p>
<a href="[Link]
main page</a> <h2>This text has a line through it</h2>
<h1>This text is blinking</h1>
</body> </html>
Output:
This text is underlined
[Link] main pageThis text has a line
through it
This text is blinking
D. Setting letter spacing
Letter spacing is set with the letter-spacing property.
You can increase or decrease the letter spacing between text
with this property.
The letter-spacing property takes the value "normal" for
normal spacing between text characters or a numeric
attribute specified by pixels followed by "px" for a fixed
space between text characters.
Example
<html>
<head> <title>Background properties</title>
<style type="text/css">
p {letter-spacing: normal;}
[Link] {letter-spacing: 5px;}
[Link] {letter-spacing: 10px;}
[Link] {letter-spacing: 15px;}
</style>
</head> <body> <p>The characters in this paragraph have normal
spacing</p> <p class="two">The characters in this paragraph have a
spacing of 5 pixels</p> <p class="three">The characters in this
paragraph have a spacing of 10 pixels</p> <p class="four">The
characters in this paragraph have a spacing of 15 pixels</p>
</body> </html>
Output:
The characters in this paragraph have normal spacing
The characters in this paragraph have a spacing of 5 pixels
The characters in this paragraph have a spacing of 10 pixels
The characters in this paragraph have a spacing of 15 pixels
3. CSS font properties
With CSS font properties, you can specify the font a text
will be displayed in and the size of the text.
This focuses on: Setting text font & Setting text size
[Link] text font
Text font is set with the font-family property.
You can specify a list of fonts with this property and the
web browser will use the first font that is found on the
user's computer.
Example:
<html>
<head> <title>Background properties</title>
<style type="text/css">
h1 {font-family: helvetica, georgia;}
p {font-family: tahoma, "trebuchet ms"}
</style>
</head>
<body> <h1>Some text</h1> <p>Some more text</p>
</body> </html>
Output:
Some text
Some more text
B. Setting text size
Text size is set with the font-size property. You can
specify a size from a set of prefixed sizes or set your
own size for text.
Some prefixed text sizes: - x-small, small, medium,
large, x-large
Example:
<html>
<head> <title>font
</title> <style type="text/css">
h1 {font-size: 40px;}
p {font-size: large;}
</style>
</head>
<body> <h1>Some text</h1> <p> A sentence in a paragraph. Another
sentence in a paragraph. </p>
</body>
</html>
Output:
Some text
A sentence in a paragraph. Another sentence in a paragraph
4. CSS list properties
With CSS list properties, you can specify how lists appear.
This focuses on: Setting the marker for a list specifying
where a list is placed
A. Setting the marker for a list
The marker for a list is set with the list-style-type
attribute.
Possible values for the list-style-type attribute: disc,
square, decimal, lower-roman, upper-alpha
Example:
<html>
<head>
<title>Lists</title>
</head> <body>
<ul style="list-style-type: square;"> <li>green</li> <li>blue</li>
<li>gray</li> <li>orange</li> </ul>
<ul style="list-style-type: upper-alpha;"> <li>green</li> <li>blue</li>
<li>gray</li> <li>orange</li> </ul>
<ol style="list-style-type: disc;"> <li>green</li> <li>blue</li>
<li>gray</li> <li>orange</li> </ol>
<ol style="list-style-type: circle;"> <li>green</li> <li>blue</li>
<li>gray</li> <li>orange</li> </ol>
</body>
</html>
Output:
green
blue
gray
orange
A. green
B. blue
C. gray
D. orange
green
blue
gray
orange
o green
o blue
o gray
o orange
Specifying where a list is placed
The location of a list is specified with the list-style-
position attribute.
The location of a list can be specified as its default
location using the value "inside" or as another location
using the value "outside" so that it can be displayed as an
indented list.
Example:
<html>
<head>
<title>Lists</title> </head> <body>
<ul style="list-style-position: outside;"> <li>green</li>
<li>blue</li> <li>gray</li> <li>orange</li> </ul>
<ol style="list-style-position: inside;"> <li>green</li>
<li>blue</li> <li>gray</li> <li>orange</li> </ol>
</body>
</html>
Output:
• green
• blue
• gray
• orange
1. green
2. blue
3. gray
4. orange
5. CSS border properties
With CSS border properties, you can specify how borders appear
around elements.
This focuses on: Setting the style of a border, setting the width of
a border, setting the color of a border
A. Setting the style of a border
The style of a border is set with the border-style property.
Possible values for the border-style property: dashed, dotted,
solid, groove, double, outset
Example:
<html>
<head> <title>Lists</title>
<style type="text/css">
h1 {border-style: dashed;}
h2 {border-style: double;}
p {border-style: dotted;}
a {border-style: groove;}
</style>
</head>
<body>
<h1>This text has a dashed border</h1> <h2>This text has a double
border</h2> <p>This text has a dotted border</p> <a
href="[Link] text has a groove border</a>
</body>
</html>
Output:
This text has a dashed border
This text has a double border
This text has a dotted border
This text has a groove border
B. Setting the width of a border
The width of a border is set with the border-width
property.
The values you can assign to this property include "thin",
"medium", "thick", or a custom value in pixels.
Example:
<html> <head> <title>Lists</title>
<style type="text/css">
h1 {border-style: dashed; border-width: thin;}
h2 {border-style: double; border-width: medium;}
p {border-style: dotted; border-width: thick;}
a {border-style: groove; border-width: 10px;}
</style> </head>
<body> <h1>This text has a dashed border</h1> <h2>This
text has a double border</h2> <p>This text has a dotted
border</p> <a href="[Link] text has a
groove border that has a thickness of 10 pixels</a>
</body>
</html>
Output:
This text has a thin dashed border
This text has a medium double border
This text has a thick dotted border
This text has a groove border that has a thickness of 10 pixels
C. Setting the color of a border
The color of a border is set with the border-color property.
The values you can assign to this property include a color
name, an RGB value, or a hexadecimal value.
Example:
<html>
<head> <title>Lists</title>
<style type="text/css">
h1 {border-style: dashed; border-color: green;}
h2 {border-style: double; border-color: #556b2f;}
p {border-style: dotted; border-width: rgb(128, 128, 128);}
a {border-style: groove; border-color: #2f7e87;} </style>
</head> <body> <h1>This text has a green dashed
border</h1> <h2>This text has a darkolivegreen double
border</h2> <p>This text has a gray dotted border</p> <a
href="[Link] text has a teal groove
border</a>
</body> </html>
Output:
This text has a green dashed border
This text has a darkolivegreen double border
This text has a gray dotted border
This text has a teal groove border
6. CSS margin properties
With CSS margin properties, you can specify how much
space there should be around elements.
This focuses on:
Setting the left margin of an element
Setting the right margin of an element
Setting the top margin of an element
Setting the bottom margin of an element
A. Setting the left margin of an element
The left margin of an element is set using the margin-left
property.
Example:
<html>
<head> <title>Setting the left margin of an element</title>
</head>
<body>
<p>This paragraph has no specified margin.</p>
<p style="margin-left: 20px;">This paragraph has a left
margin of 20 pixels.</p>
</body>
</html>
Output:
This paragraph has no specified margin.
This paragraph has a left margin of 20 pixels.
B. Setting the right margin of an element
The right margin of an element is set using the margin-
right property.
Example:
<html>
<head> <title>Setting the right margin of an
element</title>
</head>
<body> <p>This paragraph has no specified
margin.</p>
<p style="margin-right: 25px;">This paragraph has a
right margin of 25 pixels.</p>
</body> </html>
Output:
This paragraph has no specified margin.
This paragraph has a right margin of 25 pixels.
C. Setting the top margin of an element
The top margin of an element is set using the margin-top
property.
Example:
<html>
<head>
<title>Setting the top margin of an element</title>
</head> <body> <p>This paragraph has no specified
margin.</p>
<p style="margin-top: 45px;">This paragraph has a top
margin of 45 pixels</p>
</body>
</html>
Output:
This paragraph has no specified margin.
This paragraph has a top margin of 45 pixels.
D. Setting the bottom margin of an element
The bottom margin of an element is set using the
margin-bottom property.
Example:
<html>
<head> <title>Setting the bottom margin of an
element</title> </head> <body> <p>This paragraph has no
specified margin.</p>
<p style="margin-bottom: 35px;">This paragraph has a
bottom margin of 35 pixels.</p>
</body> </html>
Output:
This paragraph has no specified margin.
This paragraph has a bottom margin of 35 pixels.
7. CSS comments
Comments are declared within stylesheet definitions so that code
would be easier to understand and navigate. Comments in CSS
are ignored by web browsers.
Comments begin with /* and end with */ and can span as many
lines as you want.
Example:
<html>
<head>
<style type="text/css"> /* this is a comment this is another
comment */
p{ color: green; /* the color of the text in the paragraph */
font-family: Courier; margin-top: 0; margin-left: 0; /* the
left margin of the paragraph */ }
</style>
</head> <body> <p> The text in this paragraph will be
green. </p> </body>
</html>