L

Course Title: CSS Framework

Course Code: to be decided later
Credit Units: 3
Course Level: UG
Course Type:

Course Title

Course Objectives:
The objective of the course is to :
Describe how CSS is used to control the
presentation style of a Web page.
Describe the elements and operation of CSS.
Outline the key CSS properties and selectors
Skills
Use simple inline styles to control web page
appearance
Include internal CSS style sheets in a web page
Implement an external and imported style sheets
in a website Attitude
Acquire confidence in use of CSS. 8. Express a
preference for CSS-based website style
specification
Prerequisites:

HTML
Student Learning Outcomes:
Understand fundamentals of Internet
Write a Script to design web pages.
Use the CSS framework to create, Dynamic web
pages
Understand design techniques for
information and entertainment
Course Contents / Syllabus:
4 Module I: Basic Web page designing

P/S

SW/FW

15%
Weightage

Web design and development today ,Introduction

and overview, History of the Web, How the Web
works, Web authoring & publishing, Tools
Browsers, editors, authoring & publishing tools

Module II: Introduction to a CSS framework

15%
Weightage

TOTAL
CREDIT
UNITS
3

HTML-simple ,HTML tags-forms-frames-tables listDHTML-Introduction- styles sheet-cascading style

sheet-layers,MS font page-front page editor-various
forms-normal ,HTML-preview menus-creating web
pages with font page editor templates-using font page
components-forms crating frame pages with font
pages, A Basic HTML page Students will design
(with minimal CSS). ,WW operations, Web standards,
HTML -concept and version; Naming scheme for
HTML documents; HTML editor; Explanation of the
structure of the homepage; Elements in HTML
documents; Style sheet Language ,Tips for designing
web pages
6

Module III Basic Web Design -HTML

20%
Weightage

Design of a basic HTML page (with minimal CSS).

7

Module IV: Basic Web Design -CSS

25%
Weightage

W3C validation, separation between presentation and

content; templates; good and bad design
Linking with anchor tag including internal links,
absolute & relative referencing of web resources,
borders & margins, imagery, Unicode fonts, div &
span tags, HTML table tags, html form tags,
positioning & floating, Introduction to CSS:
typography, consistency, types of styles, specifying
class within html document

Module IV CSS Framework

10%

Introduction to Framework, Why we use CSS Framework

,Types of CSS framework ( front end, back end )
Framework classification .Simple frame work, responsive
framework.
9

Module V: Bootstrap CSS Framework

Introduction to Bootstarp,Why use Bootstrap,Basic of

15%
Weightage

Bootstrap Framework, Bootstrap Basic Structure,

Bootstrap CSS, Bootstrap
Layout Components and Bootstrap Plugins
10

Pedagogy for Course Delivery:

By demonstrating CSS in class room setting. Identifying
problems, illustrating the design, creation and
implementation of scripts through examples. Defining
new problems and perpetuating students to learn and
retain information using hands on approach. By creating
a structure for students that will foster peer to peer
support and depict upon knowledge from external source

11 List of Experiments:
1 Change your CV web page created in Topic 2 to use the
following CSS properties:
body text is Tahoma or Trebuchet MS or sans serif
Use 9point text of the web page.
Background color is #ffff80
Provide the following colors for hyperlinks:
o Non-visited link
#00c
o Visited link
#c0c
o Hover over link
#f60
o Active link
#fc0
2 Create a simple web page with a tiled background
image using an external style sheet. Ensure the doctype
declaration is properly inserted.
3. Create a table within a web page and attach a nonrepeating background image to this table using an
external style sheet. Ensure the doctype declaration is
properly inserted
4. Create a document in which paragraphs are grouped
under elements then use the id attribute to assign unique
background colour to each You may borrow text from a
preexisting document such as a report.
5. Create an HTML document that implements two

external style sheets where one is used to control style

when the document is viewed on a computer screen while
the other controls the appearance when the document is
printed
6 Write CSS code to insert an image called image.jpg
as a centred background image on a web page.
7 Create an HTML document that implements two
external style sheets where one is used to control style
when the document is viewed on a computer screen while
the other controls the appearance when the document is
printed
8 What is the effect of inserting the following CSS inline
property in a paragraph:
<p style=display: none,>Background specification can
be rather tricky but has three key properties: color,
background image and whether the image is repeated or
not repeated. The following example illustrates the use of
the background properties </p>
9 Write inline CSS to create a grey border around a
paragraph of text
10 What is the effect of adding the following styles to
your style sheet assuming the style sheet controls the
style of the entire document:
a:link {color: blue}
a:active {color: red; font-weight: bold}
a:visited {color: green}
a:hoover { color: yellow}

12 Assessment/ Examination Scheme

Theory Assessment (L&T):
Theory
L/T (%)
66.67

Lab/Practical/Studio (%)

End Term
Examination

33.33

100

Theory Assessment
Continuous
Assessment/Internal
Assessment
Components
(Drop down
Weightage
(%)

End Term
Examination

CT

HA V A

10

10

70

Lab/ Practical/ Studio Assessment

Continuous
Assessment/Internal
Assessment
Components
(Drop down
Weightage
(%)

End Term
Examination

LR CT PR V A
10

10

10

Experiment

Viva

40

20

Text Books
Harvey M. Deitel and Paul J. Deitel (2007). Internet & World Wide Web: How to
Program (4th Edition). Prentice Hall( ISBN-10: 0131752421, ISBN-13: 9780131752429)
References:
Learning Web Design, Jennifer Niederst Robbins, 2007, 3rd Edition, OReilly,
ISBN-10: 0-596-52752-7 ISBN-13: 978-0-596-52752-5[C]

Web designing in Nut Shell (Desktop Quick Reference), Jennifer Niederst

Robbins, OReilly ISBN: 1-56592-515-7 [M]

Designing web navigation, James Kalbach, 2007, OReilly publication, IS BN10: 0-596- 52810-8 IS BN-13: 978-0-596-52810-2[L]

Web Design E-Books

Web Design: http://yensdesign.com/2009/01/four-free-ebooks-web-developers/

Web Style Guide: http://www.webstyleguide.com

Remarks and Suggestions: