JWD_Unit 4_Using CSS for Web Designing_PPT

7/27/2019 JWD_Unit 4_Using CSS for Web Designing_PPT

1/16


2/16

C o n f i d e n t i a l

2

Using CSS for Web Designing

HOME NEXTPREVIOUS

Unit-4 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.


3/16


3

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

HOME NEXTPREVIOUS



4/16


4

Introduction

HOME NEXTPREVIOUS

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.



5/16


5

Cascading Style Sheets (CSS)

HOME NEXTPREVIOUS

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.



6/16


6

Benefits of CSS

HOME NEXTPREVIOUS


Savestime

Reducesuseof JavaScript

Reducesdownload time

Reduces code

complexity

Separates content

from presentation

Benefits


7/16C o n f i d e n t i a l

7

Working with CSS

HOME NEXTPREVIOUS


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;}



8

Methods of Applying Style

HOME NEXTPREVIOUS


Example

This is a red page

Example

body {background-color: #FF0000;}

My document

Inline method:

Internal method:

Link to stylesheet:



9

Web Page Editing with CSS

HOME NEXTPREVIOUS


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

.center{ text-align:center;}

Center-aligned heading

Center-aligned

paragraph.



10

Formatting the Text

HOME NEXTPREVIOUS


Text indention p.align {text-indent: 30px;}

Text alignment p.aligntext { text-align: centre}

Text decoration .decoration {text-decoration: underline;}

Letter space p.spacing{ letter-spacing: 3px;}

Text transformation .transform { text-transform: uppercase;}

Margins .fixmargin{ margin-top: 100px;

margin-right: 40px;

margin-bottom: 10px;

margin-left: 70px;}



11

Using Colours with CSS

HOME NEXTPREVIOUS


Colour property .redcolour{color:red;}

Background colour

body { background-color: grey;}

h1 { background-color: blue;}

p { background-color: green;}



12

Positioning Elements with CSS

HOME NEXTPREVIOUS


Absolute positioning p { position:absolute;

left:100px;

top:150px;}

Relative positioning h1{position:relative;

left: 350px;

top: 150px;}

h2{position:relative;

left: 150px;

top: 150px;}

h3{position:relative;left: 50px;

top: 150px;}


13/16


14/16



15

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. body { background-color: blue;}

HOME NEXTPREVIOUS




16

Activity

1. Search on Web, and find out why many designers prefer CSS layout

over HTML table layout.

HOMEPREVIOUS


Documents

JWD_Unit 4_Using CSS for Web Designing_PPT