Program Semester Subject Code Subject Name Unit number
: MBA : IV : MI0041 : Java and Web Design :4
Unit Title
Lecture Number Lecture Title
: Using CSS for Web Designing
:4 : Using CSS for Web Designing
HOME
C onfidential NEXT
Unit-4 Using CSS for Web Designing
Using CSS for Web Designing
Objectives :
To explain why CSS is useful.
To analyse the working of CSS.
To use CSS for organising content on Web pages. To create Web page layout with CSS.
2
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Lecture Outline
Introduction Cascading Style Sheets (CSS)
Benefits of CSS
Working with CSS Methods of Applying Style Web Page Editing with CSS
Formatting the Text
Using Colours with CSS Positioning Elements with CSS Page Layout with CSS
Summary
Check Your Learning Activity
3
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Introduction
The World Wide Web Consortium (W3C) released the first official
recommendation for CSS1 (Cascading Style Sheet 1) in 1996.
CSS1 is also known as core CSS.
CSS2 and CSS3 could not replace CSS1 but acts as supplements.
In this session, we will learn the benefits of CSS, and also the techniques of formatting a Web page using CSS.
4
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Cascading Style Sheets (CSS)
CSS helps in the presentation of content on the Web page. It is a set of guidelines and properties defining the appearance of Web page, on a Web browser.
It is possible to control the font colour, size and various other design aspects on a Web page, using CSS.
5
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Benefits of CSS
Separates content from presentation
Saves time
Reduces code complexity
Benefits
Reduces use of JavaScript
Reduces download time
6
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Working with CSS
To work with CSS the following points has to be considered:
Define a set of rules in the style sheet.
Establish a link between content in HTML document and style sheet.
Browser then applies style defined in CSS to the content and displays it
on Web page. Basic syntax of CSS: selector {property: value;}
7
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Methods of Applying Style
Inline method:
<html> <head> <title>Example</title> </head> <body style="background-color: #FF0000;"> <p>This is a red page</p> </body> </html>
Link to stylesheet:
<head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head>
Internal method:
<head> <title>Example</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head>
8
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Web Page Editing with CSS
CSS class selector: It specifies style for a group of HTML elements.
<html> <head> <style type="text/css"> .center { text-align:center;} </style> </head> <body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> </body> </html>
9
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Formatting the Text
Text indention p.align {text-indent: 30px;}
Text alignment
Text decoration Letter space Text transformation Margins
p.aligntext { text-align: centre}
.decoration {text-decoration: underline;} p.spacing{ letter-spacing: 3px;} .transform { text-transform: uppercase;} .fixmargin{ margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px;}
10
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Using Colours with CSS
Colour property
.redcolour{color:red;}
Background colour
<head> <style> body { background-color: grey;} h1 { background-color: blue;} p { background-color: green;} </style> </head>
11
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Positioning Elements with CSS
Absolute positioning
p { position:absolute; left:100px; top:150px;} h1{position:relative; left: 350px; top: 150px;} h2{position:relative; left: 150px; top: 150px;} h3{position:relative; left: 50px; top: 150px;}
Relative positioning
12
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Page Layout with CSS
<html> <head> <title>CSS layout</title> <style type="text/css"> #leftcontent { position: absolute; left:10px; width:190px;} #centercontent { margin-left: 190px; margin-right:190px;} #rightcontent { position: absolute; right:10px; width:190px;} #banner{text-align: centre;} </style> </head> <body> <div id="banner"> A banner that sits at the top of the page. </div> <div id="rightcontent"> A column on the right of the page. </div> <div id="leftcontent"> A column on the left of the page. </div> <div id="centercontent"> A column in the center of the page. </div> </body> </html> 13
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Summary
CSS is a set of guidelines and properties defining
the appearance of Web page on a Web browser.
selector {property: value;} is the basic syntax of CSS.
CSS class selector specifies style for a group of HTML elements.
The elements in CSS can be positioned using absolute and relative positioning.
14
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Check Your Learning
1. What is CSS?
Ans. CSS is a set of guidelines and properties defining the appearance of
Web page on a Web browser. 2. List any three benefits of CSS.
Ans. The three benefits of CSS are: it reduces download time, separates
content from presentation, and saves time. 3. Write the code to add a blue background colour to your Web page.
Ans. <head><style>
body { background-color: blue;}</style></head>
15
PREVIOUS HOME
CNEXT onfidential
Unit-4 Using CSS for Web Designing
Activity
1.
Search on Web, and find out why many designers prefer CSS layout over HTML table layout.
16
PREVIOUS HOME
Confidential
