Scribd
Upload
4 views60 pages

HTML 2

Uploaded by

jayashree j Gowda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views60 pages

HTML 2

Uploaded by

jayashree j Gowda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 60

Web Application Development MMC205

Module-2 CSS3 and Responsive Web Design

CSS3 Basics

Introduction to CSS3

CSS3, or Cascading Style Sheets Level 3, is the latest evolution of the CSS standard used to
style and layout web pages.

It builds upon previous versions of CSS and introduces a range of new features and
enhancements that make designing modern, responsive, and visually engaging websites
easier and more powerful.

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation of
HTML documents.

It allows developers to separate content (HTML) from design, making websites more
maintainable and flexible.

CSS Syntax

A CSS rule consists of a selector and a declaration block.

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 1


Web Application Development MMC205

Example:

<html>

<head>

<style>

p{

color: red;

text-align: center;

</style>

</head>

<body>

<p>RNSIT</p>

<p><b>MASTER OF COMPUTER APPLICATIONS</b></p>

</body>

</html>

LEVELS OF STYLE SHEETS

The three levels of style sheets, in order from lowest level to highest level, are inline,
document level, and external.

Inline style sheets apply to the content of a single HTML element.

Document-level style sheets apply to the whole body of a document.

External style sheets can apply to the bodies of any number of documents.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.


Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 2
Web Application Development MMC205

The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:

Example

<html>

<body>

<h1 style="color:blue;"><center>Web Programming</center></h1>

<p style="color:red;"><center>Java Programming</center></p>

</body>

</html>

Document-level style sheets or Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue,
and the text color of ALL the <p> elements to red.

In addition, the page will be displayed with a "powderblue" background color:

Example

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 3


Web Application Development MMC205

<html>

<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

<h1>RNSIT</h1>

<p>MCA.</p>

<h1>Web Programming</h1>

<p>Bangalore</p>

</body>

</html>

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

The external style sheet can be written in any text editor.

The file must not contain any HTML code, and must be saved with a .css extension.

It uses the <link> tag on every pages and the <link> tag should be put inside the head
section.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 4


Web Application Development MMC205

Syntax:

<link rel="stylesheet" type="text/css" href="style.css" />

Example

<html>

<head>

<link rel="stylesheet" href="styles.css"/>

</head>

<body>

<h1><center>BANGALORE</center></h1>

<p><b><center>HYDERABAD</center></b></p>

</body>

</html>

styles.css

body

{ background-color: powderblue;}

h1 { color: blue;}

p { color: red;}

The REL attribute is used to define the relationship between the linked file and the HTML
document. REL=StyleSheet specifies a persistent or preferred style.A persistent style is one that
is always applied when style sheets are enabled.

(Hypertext REFerence) The HTML code used to create a link to another page

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 5


Web Application Development MMC205

CSS Selectors

CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule
set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

CSS Element Selector

CSS Id Selector

CSS Class Selector

CSS Universal Selector

CSS Group Selector

The CSS element Selector

The element selector selects HTML elements based on the element name.

Here, all <p> elements on the page will be center-aligned, with a red text color:

Example

<html>

<head>

<style>

p{

text-align: center;

color: red;

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 6


Web Application Development MMC205

</style>

</head>

<body>

<p>RNS INSTITUTE OF TECHNOLOGY.</p>

<p> WEB APPLICATION DEVELOPMENT</p>

<p>RAGHU PRASAD K</p>

</body>

</html>

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique
element.

To select an element with a specific id, write a hash (#) character, followed by the id of the
element.

Example:

<html>

<head>

<style>

#para1

text-align: center;

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 7


Web Application Development MMC205

color: red;

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p id="para1">This paragraph is not affected by the style.</p>

</body>

</html>

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class
name.

Example

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

.rnsit {

text-align: center;

color: blue;

</style>

</head>

<body>

<h1 class="rnsit">Red and center-aligned heading</h1>


Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 8
Web Application Development MMC205

<p class="rnsit">BANGALORE</p>

</body>

</html>

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

*{

text-align: center;

color: blue;

</style>

</head>

<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 9


Web Application Development MMC205

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

Example 1:

<html>

<head>

<style>

h1 {

text-align: center;

color: red;

h2 { text-align: center; color: green; }

p { text-align: center; color: blue; }

</style>

</head>

<body>

<h1>Hello world!</h1>

<h2>Every element on the page will be affected by the style.</h2>

<p>And me!</p>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 10


Web Application Development MMC205

Example 2: It will be better to group the selectors, to minimize the code.

<html>

<head>

<style>

h1, h2, p { text-align: center; color: red; }

</style>

</head>

<body>

<h1>Hello World!</h1>

<h2>Smaller heading!</h2>

<p>This is a paragraph.</p>

</body>

</html>

CSS Font Properties

CSS Font property is used to control the look of texts.

By the use of CSS font property you can change the text size, color, style and more.

Here, you will also know how to resize your font using percentage.

These are some important font attributes:

CSS Font color: This property is used to change the color of the text. (standalone attribute)

CSS Font family: This property is used to change the face of the font.

CSS Font size: This property is used to increase or decrease the size of the font.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 11


Web Application Development MMC205

CSS Font style: This property is used to make the font bold, italic or oblique.

CSS Font variant: This property creates a small-caps effect.

CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.

CSS Font Color

CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS
fonts.

It is used to change the color of the text.

There are three different formats to define a color:

By a color name

By hexadecimal value

By RGB(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and
255.

Example

<style>

body {

font-size: 200%;

h1 { color: red; }

h2 { color: #9000A1; }

p { color:rgb(100, 100, 100); }

</style>

</head>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 12


Web Application Development MMC205

<body>

<h1>RNSIT</h1>

<h2>MCA</h2>

<p>MBA</p>

</body>

</html>

CSS Font Family

In CSS there are five generic font families:

Serif fonts have a small stroke at the edges of each letter. They create a sense of formality
and elegance.

Sans-serif fonts have clean lines (no small strokes attached). They create a modern and
minimalistic look.

Monospace fonts - here all the letters have the same fixed width. They create a mechanical
look.

Cursive fonts imitate human handwriting.

Fantasy fonts are decorative/playful fonts.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 13


Web Application Development MMC205

<style>

body {

font-size: 100%;

h1 { font-family: sans-serif; }

h2 { font-family: serif; }

p { font-family: monospace; }

</style>

</head>

<body>

<h1>RNSIT</h1>

<h2>MCA DEPARTMENT</h2>

<p>MBA DEPARTMENT</p>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 14


Web Application Development MMC205

CSS Font Size

CSS font size property is used to change the size of the font.

CSS Font Style

CSS Font style property defines what type of font you want to display.

It may be italic, oblique, or normal.

CSS Font Variant

CSS font variant property specifies how to set font variant of an element.

It may be normal and small-caps.

CSS Font Weight

CSS font weight property defines the weight of the font and specify that how bold a font is.

The possible values of font weight may be normal, bold, bolder, lighter or number (100,
200..... upto 900).

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 15


Web Application Development MMC205

Font Shorthands: (short.xhtml)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Font Properties</title>

<style>

font-family: 'sarif';

font-weight:bold;

font-size:30pt;

color: purple;

.two

font-family: 'Arial';

color: green;

.three

font:'times new roman';

</style>

</head>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 16


Web Application Development MMC205

<body>

<p class = "one">MASTER OF COMPUTER APPLICATIONS</p>

<h1 class = "two">MASTER OF COMPUTER APPLICATIONS</h1>

<p class = "three">MASTER</p>

</body>

</html>

If more than one font property must be specified, the values can be stated in a list as the
value of the font property.

Pseudo Classes:

Pseudo class selectors are used if the properties are to be changed dynamically.

For example: when mouse movement happens, in other words, hover happens or focus
happens

CSS Text Property

CSS has a lot of properties for formatting text.

Text Color

Text Alignment

Text Decoration

Text Transformation

Text Shadow

Text Spacing

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 17


Web Application Development MMC205

Text Color

The color property is used to set the color of the text.

Example: textcolor.xhtml

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

Example: textalign.xhtml

Text Decoration:

The text-decoration property is used to specify some special features of text.

The available values are line-through, overline, underline, and none, which is the default.

Example :decoration.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Text Decoration</title>

<style >

.one

text-decoration: line-through;

.two

text-decoration: overline;

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 18


Web Application Development MMC205

.three

text-decoration: underline;

</style>

</head>

<body>

<h1 class = "one">Raghu Prasad K</h1> <p>[This is line-through]</p><br/>

<h1 class = "two">Raghu Prasad K</h1> <p>[This is overline]</p><br/>

<h1 class = "three">Raghu Prasad K</h1><p>[This is underline]</p><br/>

</body>

</html>

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first
letter of each word

Example :trans.xhtml

Text Shadow

The text-shadow property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow
(2px).

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 19


Web Application Development MMC205

Example: shadow.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

h1 {

text-shadow: 2px 2px;

</style>

</head>

<body>

<h1>Text-shadow effect!</h1>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 20


Web Application Development MMC205

Text Spacing

CSS Text Indentation, Letter Spacing, Line Height, Word Spacing, and White Space

In this topic, you will learn about the following properties:

 text-indent
 letter-spacing
 line-height
 word-spacing
 white-space

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

Example:(indent.xhtml)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

p{

text-indent: 200px;

</style>

</head>

<body>

<h1>Using text-indent</h1>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 21


Web Application Development MMC205

<p><pre>In my younger and more vulnerable years my father gave me some advice

that I've been turning over in my mind ever since. 'Whenever you feel like

criticizing anyone,' he told me, 'just remember that all the people in this

world haven't had the advantages that you've had.'</pre></p>

</body>

</html>

Letter-spacing

The letter-spacing property is used to specify the space between the characters in a text.

The following example demonstrates how to increase or decrease the space between
characters:

Example: letter.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

h2 {

letter-spacing: 25px;

h3 {

letter-spacing: 20px;

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 22


Web Application Development MMC205

</style>

</head>

<body>

<h1>Using letter-spacing</h1>

<h2>This is heading 1</h2>

<h3>This is heading 2</h3>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 23


Web Application Development MMC205

Line Height

The line-height property is used to specify the space between lines:

Example: line.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

.small

line-height: 3;

.big

line-height: 2;

</style>

</head>

<body>

<p class="small"><pre>

This is a paragraph with a smaller line-height.

This is a paragraph with a smaller line-height.</pre>

</p>

<p class="big"><pre>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 24


Web Application Development MMC205

This is a paragraph with a bigger line-height.

This is a paragraph with a bigger line-height.</pre>

</p>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 25


Web Application Development MMC205

word-spacing

The word-spacing property is used to specify the space between the words in a text.

The following example demonstrates how to increase or decrease the space between words:

Example: wordspace.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

.one

word-spacing: 10px;

.two

word-spacing: 23px;

</style>

</head>

<body>

<p class="one">This is a paragraph with larger word spacing.</p>

<p class="two">This is a paragraph with smaller word spacing.</p>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 26


Web Application Development MMC205

white-space

The white-space property specifies how white-space inside an element is handled.

This example demonstrates how to disable text wrapping inside an element.

The following example demonstrates how white space inside an element is handled. Possible
values are normal, pre.

Example:white.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head>

<body>

<p style = "white-space:pre">

This text has a line break and the white-space pre setting

tells the browser to honor it just like the XHTML pre tag.

</p>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 27


Web Application Development MMC205

The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element.

It consists of margins, borders, padding, and the actual content.

The image below illustrates the box model:

Explanation of the different parts:

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 28


Web Application Development MMC205

Borders: (border.xhtml)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> Table with border effects </title>

<style type = "text/css">

table

border-width:thick;

border-top-color:red;

border-left-color:orange;

border-bottom-color:violet;

border-right-color:green;

border-top-style:dashed;

border-bottom-style:double;

border-right-style:dotted;

</style>

</head>

<body>

<table border = "1">

<tr>

<td> RNSIT </td>

<td> <img src = "image.jpg" alt = "cant display"/></td>

</tr>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 29


Web Application Development MMC205

</table>

</body>

</html>

Border-style

It can be dotted, dashed, double

 Border-top-style
 Border-bottom-style
 Border-left-style
 Border-right-style
 Border-width

It can be thin, medium, thick or any length value

 Border-top-width
 Border-bottom-width
 Border-left-width
 Border-right-width
 Border-color
 Border-top-color
 Border-bottom-color
 Border-left-color
 Border-right-color

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 30


Web Application Development MMC205

Margins and Padding:

The margin properties are named margin, which applies to all four sides of an element:
margin-left, margin-right, margin-top, and margin-bottom.

The padding properties are named padding, which applies to all four sides: padding-left,
padding-right, padding-top, and padding-bottom.

Example: box.model

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

div {

background-color: lightgrey;

width: 400px;

border: 10px solid green;

padding: 50px;

margin: 40px;

</style>

</head>

<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It
consists of: borders, padding, margins, and the actual content.</p>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 31


Web Application Development MMC205

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a
15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>

</html>

BACKGROUND IMAGES

The background-image property is used to place an image in the background of an element.

Example: back.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Background Image</title>

<style>

body {

background-image:url("sun.jpg");

text-align: center;

color:blue;

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 32


Web Application Development MMC205

font-size:25pt;

</style>

</head>

<body>

<p >RNSIT INSTITUTE OF TECHNOLOGY </p>

<mark >MCA DEPARTMENT </mark>

</body>

</html>

Example: full.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

html, body

height: 100%;

.bg

background-image: url("image.jpg");

height: 100%;

background-position: center;

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 33


Web Application Development MMC205

background-size: cover;

</style>

</head>

<body>

<p class="bg"><h1><center>MCA DEPARTMENT</center></h1></p>

</body>

</html>

THE <span> AND <div> TAGS

span tag

The <span> tag is an inline container used to mark up a part of a text, or a part of a
document.

The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id
attribute.

Example: span.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>span</title>

<style>

.rnsit

font-size:25pt;

font-family:'lucida calligraphy';

color:green;

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 34


Web Application Development MMC205

</style>

</head>

<body>

<p >Computer Science, Information Science<div class = "rnsit">

MCA DEPARTMENT</div>, RNSIT INSTITUTE OF TECHNOLOGY </p>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 35


Web Application Development MMC205

div tag

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which is then styled with CSS or
manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Example: div.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>div</title>

<style>

.one

font-size:20pt;

font-family:'lucida calligraphy';

color:yellow;

.two

font-size:25pt;

font-family:'comic sans ms';

color:green;

</style>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 36


Web Application Development MMC205

</head>

<body>

<span class = "one">

<p>Paragragh 1 under division </p>

<p>Paragragh 2 under division 1</p>

<p>Paragragh 3 under division 1</p>

</span>

<div class = "two">

<p>Paragragh 1 under division 2</p>

<p>Paragragh 2 under division 2</p>

<p>Paragragh 3 under division 2</p>

</div>

</body>

</html>

CSS Layout - The position Property

CSS positioning defines how elements are placed within a web page.

It allows you to control the layout, stacking order, and alignment of elements.

The primary positioning types in CSS are:

 Static
 Relative
 Fixed
 Absolute
 Sticky

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 37


Web Application Development MMC205

1. Static Positioning

Static is the default position of an element. It does not accept properties like top, left, right,
or bottom.

Example: static.html

<html>

<head>

<style>

div.static

position: static;

border: 10px solid green;

top: 120px;

left: 100px;

</style>

</head>

<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is always
positioned according to the normal flow of the page:</p>

<div class="static">

This div element has position: static;

</div>
Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 38
Web Application Development MMC205

</body>

</html>

2. Relative Positioning

Relative positioning places an element relative to its normal position. You can move it using
top, left, right, or bottom.

Example: relative.html

<html>

<head>

<style>

div

border: 5px solid green;

padding:10px;

margin: 20px;

.relative

position: relative;

top: 150px;

left: 90px;

</style>

</head>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 39


Web Application Development MMC205

<body>

<div>Box 1</div>

<div class="relative">Box 2</div>

</body>

</html>

3. Absolute Positioning

Absolute positioning removes the element from the document flow and places it relative to
the nearest ancestor with a positioning context (relative, absolute, or fixed).

Example: absolute.html

<html>

<head>

<style>

.parent

position: relative;

width: 300px;

height: 200px;

border: 2px solid black;

margin: 50px auto;

.child

position: absolute;

top: 80px;
Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 40
Web Application Development MMC205

left: 60px;

background-color: red;

padding: 10px;

</style>

</head>

<body>

<div class="parent"><p>Container with Relative Positioning</p>

<div class="child">Absolutely Positioned Element</div>

</div>

</body>

</html>

4. Fixed Positioning

Fixed positioning removes the element from the flow and positions it relative to the
viewport. It remains in place even when the page scrolls.

Example: fixed.html

<html>

<head>

<style>

.fixed {

position: fixed;

top: 10px;

right: 10px;

background-color: lightgreen;

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 41


Web Application Development MMC205

padding: 20px;

border: 2px solid black;

.content {

height: 1200px;

padding: 10px;

</style>

</head>

<body>

<h2>Fixed Positioning Example</h2>

<div class="fixed">Fixed Box</div>

<div class="content">

<p>Scroll down to see that the fixed box stays in place.</p>

<p>This content simulates a long page.</p>

</div>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 42


Web Application Development MMC205

5. Sticky Positioning

Sticky positioning switches between relative and fixed based on the scroll position.

Example: sticky.html

<!DOCTYPE html>

<html>

<head>

<style>

div.sticky

{ position: sticky;

top: 0;

padding: 5px;

background-color: yellow;

border: 2px solid green; }

</style>

</head>

<body>

<h1>RNSIT</h1>

<p><pre>stays in the same place even if the page is scrolled. The top, right, bottom, and left
properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:

Example</pre></p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">

<p>MCA DEPARTMENT</p>

</div>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 43


Web Application Development MMC205

Flexbox and Grid layouts

What is CSS Flexbox?

Flexbox is short for the Flexible Box Layout module.

Flexbox is a layout method for arranging items in rows or columns.

Flexbox makes it easier to design a flexible responsive layout structure, without using float
or positioning.

CSS Flexbox Components

A flexbox always consists of:

a Flex Container - the parent (container) <div> element

Flex Items - the items inside the container <div>

Example:

<!DOCTYPE html>

<html>

<head>

<style>

.flex-container

display: flex;

background-color: green;

.flex-container > div

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 44


Web Application Development MMC205

background-color: red;

margin: 20px;

padding: 50px;

font-size: 30px;

</style>

</head>

<body>

<h1>Create a Flex Container</h1>

<div class="flex-container">

<div>MCA</div>

<div>MBA</div>

<div>CSE</div>

<div>ISE</div>

<div>PUC</div>

</div>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 45


Web Application Development MMC205

CSS Grid Layout

CSS Grid Layout is used to design responsive web layouts with rows and columns.

It allows you to place items exactly where you want, making it easier to create flexible and
modern web pages.

Example: grid.html

<html>

<head>

<style>

.grid-container

display: grid;

grid-template-columns: auto auto auto;

gap: 40px;

color:red;

</style>

</head>

<body>

<div class="grid-container">

<div class="grid-item">MCA</div>

<div class="grid-item">MBA</div>

<div class="grid-item">BE</div>

<div class="grid-item">CSE</div>

<div class="grid-item">ISE</div>

<div class="grid-item">EEE</div>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 46


Web Application Development MMC205

<div class="grid-item">ECE</div>

</div>

</body>

</html>

Responsive Web Design

CSS Media Queries

CSS Media Queries are used to apply CSS styles according to the screen size.

Media queries detect device features like screen width, height, and resolution.

Breakpoints define the screen sizes where the design needs to change.

They ensure a smooth, user-friendly experience across all devices.

Syntax:

@media mediatype and (condition) {

/* CSS styles */

Example:1 mediaquries.html
<html>

<head>

<style>

.abc

color: red;

}
Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 47
Web Application Development MMC205

@media screen and (max-width: 500px)

.abc {

color: green;

</style>

</head>

<body>

<div class="abc"><h1>RNS INSTITUTE OF TECHNOLOGY</h1></div>

</body>

</html>

Syntax:

<style>

.abc

color: black;

@media screen and (max-width: 500px)

.abc {

color: green;

</style>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 48


Web Application Development MMC205

</head>

<body>

<div class="abc">Sample Example of Media Query</div>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 49


Web Application Development MMC205

Media Types in CSS

Media types specify which devices the styles should apply to. Commonly used types include:

Example:2

<html>

<head>

<style>

.gfg {

color: black;

@media screen and (max-width: 800px) {

.gfg {

color: blue;

@media screen and (max-width: 500px)

.gfg {

color: green;

</style>

</head>

<body>

<div class="gfg">Sample Example of Media Query</div>

</body>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 50


Web Application Development MMC205

</html>

For screens 800px or smaller, the text color changes to blue.

For screens 500px or smaller, the text color changes to green.

Responsive design principles

Responsive web design makes your web page look good on all devices.

Responsive web design uses only HTML and CSS.

Responsive web design is not a program or a JavaScript.

Responsive web design is all about creating websites that work well on any device, whether
it's a phone, tablet, or computer.

This approach ensures that your website looks good and is easy to use no matter how
people access it.

What is The Viewport?

The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a
computer screen.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 51


Web Application Development MMC205

Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport, through
the <meta> tag.

You should include the following <meta> viewport element in the <head> section of all your
web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device
(which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the
browser.

Here is an example of a web page without the viewport meta tag, and the same web
page with the viewport meta tag:

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 52


Web Application Development MMC205

Example: responsive.html

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<h2>Responsive Image</h2>

<p>When the CSS width property is set in a percentage value, the image will scale up and
down when resizing the browser window. Resize the browser window to see the effect.</p>

<img src="C:\Users\raghu\Desktop\WEB\Web Autonomous\web practice\image.jpg"


style="width:20%;">

</body>

</html>

Example: responsive1.html

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {

background-color: lightgreen;

@media only screen and (orientation: landscape)

body {

background-color: lightblue;

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 53


Web Application Development MMC205

</style>

</head>

<body>

<p>Resize the browser window. When the width of this document is larger than the height,
the background color is "lightblue", otherwise it is "lightgreen".</p>

</body>

</html>

Responsive Fluid Grid

Grid Layout

A grid is a layout system for rows and columns.

The grid layout makes it easier to design complex and responsive web pages.

Many web pages are based on a grid-view, which means that the page is divided into rows
and columns.

Using a grid-view is very helpful when designing web pages. It makes it easier to place
elements on the page.

Building a Grid View

First ensure that all HTML elements have the box-sizing property set to border-box.

This makes sure that the padding and border are included in the total width and height of
the elements.

Syntax:

* { margin: 0; box-sizing: border-box;}

Example1: fluid.html

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 54


Web Application Development MMC205

<html>

<head>

<style>

.container

width: 80%;

margin: 0 auto;

.box

width: 50%;

float: left;

padding: 10px;

box-sizing: border-box;

</style>

<title>Fluid Layout Example</title>

</head>

<body>

<div class="container">

<div class="box" style="background-color: lightblue;"> Box 1</div>

<div class="box" style="background-color: lightcoral;">Box 2</div>

</div>

</body>

</html>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 55


Web Application Development MMC205

What is a Fluid Layout?

A fluid layout is a design approach where the widths of page elements are set proportionally
to the width of the screen or browser window.

Unlike fixed layouts that use static pixel values, fluid layouts use relative units like
percentages, viewport units (vw, vh), and ems to ensure that the design scales smoothly
across different devices and screen sizes.

Viewport units (vw, vh, vmin, vmax) are another powerful tool for fluid layouts. They allow
elements to scale based on the viewport dimensions.

Example: fluid1.html

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width initial-scale=1.0">

<style>

.header {

height: 10vh;

width: 100vw;

background-color: blue;

color: pink;

text-align: center;

line-height: 10vh; }

</style>

<title>Header Example</title>

</head>

<body>

<div class="header">

<h1>Header Title</h1>

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 56


Web Application Development MMC205

</div>

</body>

</html>

W3.CSS Responsive Classes

Example: fluid2.html

<html>

<title>W3.CSS</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="raghu.css">

<body>

<div class="w3-container">

<h2>Responsive Show/Hide</h2>

<p><strong>Note:</strong> Resize the browser window to understand how it works:</p>

<div class="w3-container w3-hide-small w3-red">

<p>w3-hide-small will be hidden on small screens (phones)</p>

</div>

<div class="w3-container w3-hide-medium w3-green">

<p>w3-hide-medium will be hidden on medium screens (tablets)</p>

</div>

<div class="w3-container w3-hide-large w3-blue">

<p>w3-hide-large will be hidden on large screens (laptops/desktop)</p>

</div>

</div>

</body>

</html>
Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 57
Web Application Development MMC205

flexible images

Responsive images will automatically adjust to fit the size of the screen.

Resize the browser window to see the responsive effect:

Using The width Property

If the width property is set to a percentage and the height property is set to "auto", the
image will be responsive and scale up and down:

Example: image1.html

Using The max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never
scale up to be larger than its original size:

Mobile First Design

Mobile-first design is a way of creating websites that focuses on making them work well
on smartphones and tablets before designing for computers.

This approach is important because most people now use their mobile devices to browse
the internet.

By starting with mobile-friendly design, you ensure your website provides a great user
experience on smaller screens, which can lead to more visitors and better engagement.

Mobile-first design is an approach where you design your website for mobile devices first
and then for desktops.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 58


Web Application Development MMC205

To create a successful mobile-first website, consider the following tips:

Use large fonts and buttons to make navigation easier on small screens.

Keep the text short and to the point to improve readability.

Use high-quality images to make the content visually appealing.

By focusing on these elements, you can create a mobile-first design that enhances user
experience, attracts more visitors, and ensures your website performs well on all devices.

Mobile-First Design Process

The Mobile-First design process involves several key steps to ensure your website is
optimized for mobile devices first. Here’s a simplified and effective approach:

1. Wireframing:

Start by creating wireframes for your layout. Focus on the content and arrange the screen
size to suit your needs. This helps in visualizing the structure and flow of your mobile
design.

2. Content Inventory:

Compile all the elements you plan to include in a spreadsheet or similar document. This
ensures you have a clear overview of all the content.

3. Visual Hierarchy:

Prioritize content items in your inventory to display the most important elements
effectively.

4. Design for Small Screens First:

Begin by designing a mobile wireframe. Use this as a model and then expand to larger
breakpoints

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 59


Web Application Development MMC205

5. Expand Touch Targets:

Fingers are wider than mouse cursors, so make sure your interactive elements are large
enough to tap easily. This improves usability on touch screens.

6. Avoid Relying on Hovers:

Hovers add interactivity, but they don't work on mobile devices. Design interactions that
don’t rely on hover effects to ensure functionality on all devices.

7. Use Smaller Graphics:

Large graphics like landscape images and complex visuals don’t perform well on smaller
screens. Opt for smaller, simpler graphics that display well even on mobile devices.

Mr. Raghu Prasad K, Assistant Professor, MCA Dept | RNSIT Page 60

You might also like