JWD - Unit 4 - Using CSS For Web Designing - PPT

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
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
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
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
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
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
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
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
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
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
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
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
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
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
Activity
1.
Search on Web, and find out why many designers prefer CSS layout over HTML table layout.
16
PREVIOUS HOME
Confidential

JWD - Unit 4 - Using CSS For Web Designing - PPT

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

JWD - Unit 4 - Using CSS For Web Designing - PPT

Caricato da

Copyright:

Formati disponibili

Program Semester Subject Code Subject Name Unit number

: MBA : IV : MI0041 : Java and Web Design :4

: Using CSS for Web Designing

Unit-4 Using CSS for Web Designing

Using CSS for Web Designing

To analyse the working of CSS.

Unit-4 Using CSS for Web Designing

Formatting the Text

Unit-4 Using CSS for Web Designing

recommendation for CSS1 (Cascading Style Sheet 1) in 1996.

Unit-4 Using CSS for Web Designing

Cascading Style Sheets (CSS)

Unit-4 Using CSS for Web Designing

Separates content from presentation

Reduces code complexity

Reduces use of JavaScript

Reduces download time

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.

Unit-4 Using CSS for Web Designing

Methods of Applying Style

Unit-4 Using CSS for Web Designing

Web Page Editing with CSS

Unit-4 Using CSS for Web Designing

Formatting the Text

p.aligntext { text-align: centre}

Unit-4 Using CSS for Web Designing

Using Colours with CSS

Unit-4 Using CSS for Web Designing

Positioning Elements with CSS

Unit-4 Using CSS for Web Designing

Page Layout with CSS

Unit-4 Using CSS for Web Designing

CSS is a set of guidelines and properties defining

the appearance of Web page on a Web browser.

CSS class selector specifies style for a group of HTML elements.

Unit-4 Using CSS for Web Designing

Check Your Learning

Ans. CSS is a set of guidelines and properties defining the appearance of

body { background-color: blue;}</style></head>

Unit-4 Using CSS for Web Designing

Potrebbero piacerti anche