DATABASES, VISUAL BASIC AND SOFTWARE

ENGINEERING (CSC2243)

Cascading Style Sheets (CSS)

PREPARED BY: NGIRUWONSANGA ALBERT

MARCH 28, 2020

University of Rwanda-College of Education

Cascading Style Sheets (CSS)

Table of Contents
What is CSS? ............................................................................................................................................... 2
Including Styles in Tags.............................................................................................................................. 2
Example 1: Using CSS at the top of the page ........................................................................................... 3
Example 2: ................................................................................................................................................... 4
Example 3: Using CSS from an external file “EX1.css” .......................................................................... 5
Codes for EX1.css.................................................................................................................................... 5
Codes for EX1.html ................................................................................................................................ 6
Example 4: controlling the page layout..................................................................................................... 6
Examples of some commonly used properties in CSS and some of the values that can be attributed
to them: ........................................................................................................................................................ 8
Example 5: using frames ............................................................................................................................ 9
Codes for “frameindex.html” page........................................................................................................ 9
Codes for “header.html” page ............................................................................................................. 10
Codes for “menu.html” page................................................................................................................ 10
Codes for “main.html” page ................................................................................................................ 11
Codes for “footer.html” page ............................................................................................................... 11
Example 6: Using CSS to set frame borders........................................................................................... 12
References .................................................................................................................................................. 13

1
What is CSS?

Cascading Style Sheets are used to control the look and feel of your pages. Cascading Style Sheets
(CSS) enable you to apply advanced formatting to HTML tags.

The advantage of CSS is that it can be used at varying levels of specificity. For example you can
put all your styles into a separate file and link to that file from your web page. That way, if you
want to change the appearance of your site, you can simply edit your CSS file and make changes
that span every page that links to your style sheet.

Or if you prefer, you can include styles at the top of your page so that they apply only to that page.
You can also include styles inside the tags themselves using the style attribute.

CSS can be used to control the appearance and layout of your pages, it will help you to control a
number of properties like color both fore and background, font size, font style, font weight,
margins, etc.

Including Styles in Tags

You’ve already seen how HTML pages are created using tags. I want to stop briefly and discuss
attributes, as well. An attribute is an additional bit of information that somehow affects the
behavior of a tag. Attributes are included inside the opening tag in a pair. Here’s an example:

<tag attribute=“value”>
Some attributes can be used with nearly any tag; others are highly specific. One attribute that can
be used with nearly any tag is style. By including the style attribute in a tag, you can include one
or more style rules within a tag itself. Here’s an example using the <h1> tag:

<h1 style=”font-family: algerian; color:green;”>Heading</h1>

2
Example 1: Using CSS at the top of the page

<html>
<title>111</title>
<head>
<style type="text/css">
body{
margin:100px 260px 80px 100px; //top right bottom left margins
padding-left:20em;
}
p{
width:19em;
position:absolute;
font-family:Arial, Calibri,monotype corsiva;
font-weight:bold;
font-size:15px;
color:normal;
border-width:thick;
border-style:groove;
text-decoration:line-through;
font-style:italic;
font-weight:bolder;
background-color:silver;
left:2em;
}
</style>
</head>
<body>
<p>Cascading Style Sheet sdjlkjdklselksj wsklj lk
3
wjlwjklwe we lwkej lew we lwejl wejlkew we lwekjlewk
jklewe ewl et sdjlkjdklselksj wsklj lkwjlwjklwe we lwkej l
ew we lwejl wejlkew we lwekjlewkjklewe ewl<br>

Database and Internet programming<br>

Database, Visual Basic and Software Engineering<br>
Artificial Intelligence</p>
Numeric types allow you to specify a display size, which affects
the way MySQL displays results. The display size bears no relation to the internal storage
provided by each data type. In addition, the floating types allow you to optionally specify the
number of digits that follow the decimal point. In such cases, the digits value should be an
integer from 0 to 30 that is at most two less than the display size. If you do make the digits value
greater than two less than the display size, the display size will automatically change to two more
than the digits value.
<p1>
<h1>Appendix C. phpMyAdmin</h1>
About database performance in your applications (and if you're reading this book, you probably
do), benchmarking needs to become part of your development testing process. When you're
testing an upgrade to MySQL or some MySQL configuration changes, run the benchmark tests
you developed while building the application. Look at the results. Make sure they don't surprise
</body>
</html>

Example 2:

<!DOCTYPE html>
<html>
<head>
<title>CSS Examples</title>
<style type="text/css">
.dropcap {font-size: 420%; font-family: Hervetica}
</style>

4
</head>
<body>
<span class="dropcap">O</span>nce upon a time...
</body>
</html>

Example 3: Using CSS from an external file “EX1.css”

Codes for EX1.css

body{
background-image:Penguins.jpg;
}
h1{
color:blue;
background-color:wheat;
font-size:40;
}
p{
color:black;
background-color:silver;
font-size:28;
font-family:monospace;
margin: .5em;
padding:1em;
border:thin solid brown;
white-space: normal;
}

5
NB: This file is to be saved as EX1.css
Codes for EX1.html

<html>
<head>
<title>C plus plus</title>
<link rel="stylesheet" type="text/css" href="EX1.css"/>
</head>
<body background="Penguins.jpg">
<h1>Introduction</h1>
<p>
C++ is an object-oriented language and is one of the most frequently used languages for
development due to its efficiency, relative portability, and its large number of libraries. C++ was
created to add OO programming to another language, C.
</body>
</html>

Example 4: controlling the page layout

<html
<head>
<title>Use of Div tag to set page width</title>
<style type="text/css">
#left
{
width:300px;
margin:30px;
border:thin solid red;
float:left
}

6
 #right
{
width:950px;
margin:30px 0 0 0;
border:thick dotted green;
float:right;
}
</style>
<body>
<div id="left">
Comments <p>
You can put comments into HTML pages to describe the page itself or to provide some
kind of indication of the status of the page. Some source code control programs store the
page status in comments, for example. Text in comments is ignored when the HTML file is
parsed.
</div>
<div id="right">
Lists<p>
Although the tags and the list items can be formatted any way you like in your HTML
code, I prefer to arrange the tags so that the list tags are on their own lines and each new
item starts on a new line. This way, you can easily select the whole list and the individual
elements. In other words, I find the following HTML
<p>Dante’s Divine Comedy consists of three books :< /p>
<ul>
<li>The Inferno</li>
<li>The Purgatorio</li>
<li>The Paradiso</li>
</ul>
</div>
7
</body>
</html>

Examples of some commonly used properties in CSS and some of the values that can be
attributed to them:

1) border-width:
 thin
 medium
 thick

2) border-style:
 None
 Hidden
 Dotted
 Dashed
 Solid
 Double
 Groove

3) border-color:
 Lightblue
 Red
 Mistyrose

4) text-decoration:
 underline
 overline
 line-through
 blink
 none

5) font-style:
 normal
 italic
 oblique
6) font-weight:
 normal
 bold
 bolder
 lighter

8
  100
 900
7) line-height:
 2
 1.5

Changing Frame Borders

A number of attributes can be set to control the appearance of frame borders or prevent them from
appearing altogether. Start with the <frame> tag. The frameborder attribute is used to enable or
disable the default, browser-generated border between frames, which is usually gray and has a
beveled edge. frameborder takes two possible values: 1 (to display borders) or 0 (to turn off the
display of borders).

Example 5: using frames

Frames allow to display many pages on a single window. This example displays four pages on one
window, frameset used first divides the window in three rows. At the top “header.html” is
displayed, in the middle (on the second row of the window), two pages are displayed in two
columns (“menu.html” is displayed on the left having the width of 25% and “main.html” is
displayed next to it on its right, having the remaining percentage width (75%)). The third row of
the window, displays “footer.html” page having 15% height.

You have to create all these four pages displayed as a frame respectively:

1. header.html
2. menu.html
3. main.html
4. footer.html
Codes for “frameindex.html” page

<html>
<head>

9
 <title>Using frames</title>
<frameset rows="15%,70%,*">
<frame src="header.html" scrolling="no" name="header">
<frameset cols="25%,*">
<frame src="menu.html" name="menu" frameborder="0">
<frame src="main.html" name="main" frameborder="0">
</frameset>
<frame src="footer.html" scrolling="no" name="footer">
</frameset>
</head>
</html>

Codes for “header.html” page

<html
<head>
<title>Use of Div tag to set page width</title>
</head>

<body bgcolor=silver>
<table><tr><td>
<img src="UR.jpg"></td>
<td width=750></td><td>
<b>COLLEGE OF EDUCATION<BR></center>
P.O.BOX: 55 RWAMAGANA</td></tr></table>
</body>
</html>
Codes for “menu.html” page

<html
<head>
<title>menu</title>
10
</head>
<body bgcolor=silver>
<a href="registration.html" target="main">Registration of new students</a><br>
<a href="select.php" target="main">Select students</a><br>
<a href="update.php" target="main">Update a student</a><br>
<a href="delete.html" target="main">Delete a student</a><br>
</body>
</html>
Codes for “main.html” page

<html>
<head>
<title>Main page</title>
</head>
<body>
<img src="Rukara_Campus_Administration_Block.jpg">
</body>
</html>

Codes for “footer.html” page

<html
<head>
<title>footer</title>
</head>
<body bgcolor=silver>
<center>Copyright &copy; UR-CE, All rights reserved
<br><a href="mailto:school_education.ce@ur.ac.rw">Send us e-mail</a></center>
</body>
</html>
…………………………….END OF Example 5: using frames……………………………..

11
Taking it further: Using frames in CSS

Frames can be styled using Cascading Style Sheets (CSS), so if you want to add your own border
to a frame, disable the browser-supplied borders using the frameborder attribute and add your own
using the CSS border property.

Example 6: Using CSS to set frame borders

<!DOCTYPE html>
<html>
<head>
<title>The FRAME Tag</title>
<style type="text/css" media="screen">
frame.middle {
border-top: 3px solid #cc3333;
border-bottom: 3px solid #cc3333;
}
</style>
</head>
<frameset rows="*,*,*">
<frame frameborder="0" src="document1.html">
<frame frameborder="0" class="middle" src="document2.html">
<frame frameborder="0" src="document3.html">
</frameset>
</html>

12
References

Lemay, L., & Colburn, R. (2011). Web Publishing with HTML and CSS (in one hour a day). 800
East 96th Street, Indianapolis, Indiana 46240: Sams Publishing.

W3C. (1998, May 12). Cascading Style Sheets, level 2.

W3C. (2001, July 16). CSS Techniques for Web Content Accessibility Guidelines 2.0.

13