CS - 3111
Web Based System Development
SECOND SEMESTER
Third year and First year Hons:
Computer Science Specialization
University of Yangon
Web-based System Development (HTML with CSS)
University of Yangon
(1) Styling HTML with Cascading Style Sheets (CSS)
What is CSS?
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles are normally stored in Style Sheets
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save you a lot of work
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one
Syntax
The CSS syntax is made up of three parts: a selector, a property and a value;
Selectar {property: value}
The selector is normally the HTML element/tag you wish to define, the property is the
attribute you wish to change, and each property can take a value. The property and value are
separated by a colon and surrounded by curly braces:
body {color: black}
If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}
Note: To specify more than one property, separate each property with a semi-colon. The
example below shows how to define a center aligned paragraph, with a red text color:
p {text-align:center; color:red}
To make the style definitions more readable, you can describe one property on each line,
like this
p
{
text-align: center;
color: black;
font-family: arial
}
The class Selector
With the class selector can define different styles for the same type of HTML element. It
has two types of paragraphs in document: one right-aligned paragraph, and one center-aligned
paragraph.
1
Web-based System Development (HTML with CSS)
University of Yangon
p.right {text-align: right}
p.center {text-align: center}
To use the class attribute in HTML document:
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will he center aligned
</p>
You can also omit the tag name in the selector to define a style that will be used by all
HTML elements that have a certain class. In the example below, all HTML elements with
class="center" will be center-aligned:
.center {text-align: center}
Note: Only one class attribute can be specified per HTML element! The example below is
wrong:
<p class="right" class="center">
This is a paragraph.
</p>
In the code below both the h1 element and the p element have class="center". This
means that both elements will follow the rules in the ".center" selector:
<h1 class="center">
This heading will be center-aligned
<h1>
<p class="center">
This paragraph will also be center aligned.
</p>
The id Selector
The id selector is different from the class selector! While a clans selector may apply to
SEVERAL elements on a page, an id selector always applies to only ONE element. An ID
attribute must be unique within the document. The style rule below will match a p element that
has the id value "para1":
2
Web-based System Development (HTML with CSS)
University of Yangon
P#para1
{
text-align: center;
color: red
}
The style rule below will match the first element that has the id valor "wer345":
*#wer345 {color: green}
The rule above will match this h1 element:
<hl id="wer345">Some text</h1>
The style rule below will match a p element that has the id value "wer345":
p#wer345 {color: green}
The rule above will not match this h2 element:
<h2 id="wer345">Some text</h2>
CSS Comments
To insert comments in CSS to explain html code, a comment will be ignored by the
browser. 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
}
3
Web-based System Development (HTML with CSS)
University of Yangon
(2) How to Insert a Style Sheet
Styling can be added to HTML elements in 3 ways:
Inline using a style attribute in HTML elements
Internal using a <style> element in the HTML <head> section
External - using one or more external CSS files
Different CSS style linking
Inline An internal stylesheet holds the CSS code for the webpage in the head
Stylesheet section of the particular file. This makes it easy to apply styles like classes
or id’s in order to reuse the code. The downside of using an internal
stylesheet is that changes to the internal stylesheet only effect the page the
code is inserted to.
External The External Stylesheet in a .css file that you link your website to. This
Stylesheet makes it so that whatever you change in the .css sheet, will effect every
page in your website. This prevents you from having to make many code
changes in each pags. This for “global” changes.
Inline The Inline style is specific to the tag itself. The inline style uses the HTML
Stylesheet "style" attribute to style a specific tag. This is not recommended, as every
CSS change has to be made in every tag that has the inline style applied to
it. The inline style is good for one an individual CSS change that you do not
use repeatedly through the site.
i. Inline Styling (Inline CSS)
Inline styling is used to apply a unique style to a single HTML element:
<h1 style="color:blue;">This is a Blue Heading</h1>
An inline style loses many of the advantages of style sheets by mixing content with
presentation. Use this method sparingly, such as when a style is to be applied to a single
occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The
style attribute can contain any CSS property. The example shows how to change the color and
the left margin of a paragraph:
Example (1)
<p style="color: sienna; margin-left: 20px">
This is a paragraph.
4
Web-based System Development (HTML with CSS)
University of Yangon
</p>
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p (background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
ii. Internal Styling (Internal CSS)
Internal styling is used to define a style for one HTML page. Internal styling is defined in
the <head> section of an HTML page, within a <style> element:
<style>
body {background-color:lightgrey;}
hl {color:blue;}
p {color:green;}
</style>
Example (2)
<html>
<head>
5
Web-based System Development (HTML with CSS)
University of Yangon
<style>
body {
background-color: #d0e4fe;
}
hl {
color: orange; text-align: center;
}
P{
font-family: "Times New Roman"; font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph. </p>
</body>
</html>
iii. External Styling (External CSS)
An external style sheet is used to define the style for many pages. An external style sheet
can be written in any text editor. The file should not contain any html tags. The style sheet file
must be saved with a .css extension. To use an external style sheet, add a link to it in the <head>
section of the HTML page:
"styles.css"
body {
background-color: lightgrey;
}
hl {
color: blue;
}
p{
color:green;
6
Web-based System Development (HTML with CSS)
University of Yangon
Example (3)
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph. </p>
</body>
</html>
Exercise 1:
Change the color of all paragraphs in the page below using both External Styling and
Internal Styling.
This
This is a is a
paragrap
This is
h.
also
paragrap This is a
h. centered
paragrap
h. is a
This
different
paragrap
h.
7
Web-based System Development (HTML with CSS)
University of Yangon
