Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
11 views46 pages

Module 2-1

This document provides an overview of CSS3 and its application in responsive web design, detailing the basics of CSS, its integration methods (inline, internal, external), and various selectors. It explains CSS properties related to fonts, colors, and styles, along with examples of how to implement them in HTML. The content is aimed at helping web developers create visually appealing and accessible web pages.

Uploaded by

ujwalujwalhb181
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
11 views46 pages

Module 2-1

This document provides an overview of CSS3 and its application in responsive web design, detailing the basics of CSS, its integration methods (inline, internal, external), and various selectors. It explains CSS properties related to fonts, colors, and styles, along with examples of how to implement them in HTML. The content is aimed at helping web developers create visually appealing and accessible web pages.

Uploaded by

ujwalujwalhb181
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/ 46

WEB APPLICATION DEVELOPMENT

MODULE 2
CSS3 AND RESPONSIVE WEB DESIGN
CSS3 BASICS

Introduction to CSS3

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML
documents. It allows web developers to apply styles such as colors, fonts, spacing, and positioning to HTML
elements, creating visually appealing and consistent web pages.

Each property in CSS has a name-value pair, and each property is separated by a semicolon (;).

Why Use CSS?

• Separation of Content and Design: CSS separates the structure (HTML) from the design, making it
easier to manage and update styles.
• Improved Accessibility: Allows customization for different devices and screen sizes.
• Efficiency: Enables reusable styles across multiple pages, reducing code redundancy.
• Enhanced User Experience: Creates visually attractive and interactive web pages.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1{
color:white;
background-color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>MULTIMEDIA</h1>
<p>This is about to learn to create webpages. </p>
</body>
</html>

HAREESHA C, ASSISTANT PROFESSOR 40


WEB APPLICATION DEVELOPMENT

Levels of style sheets

CSS can be integrated into an HTML document in three main ways:

1. Inline CSS: Directly within an HTML element using the style attribute.
2. Internal CSS: Inside a <style> tag within the <head> section of the HTML document.
3. External CSS: Through a separate .css file linked to the HTML document.

1. Inline CSS:

Inline CSS is applied directly within an HTML element using the style attribute. It is useful for quick styling
of a single element but is not recommended for large projects due to poor maintainability.

Syntax: <p slyle--"color: red;” This text is red></p>

Ex: <p style="color: blue; font-size: 16px;">This is a blue paragraph.</p>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">Web Technology</h1>
</body>
</html>s

2. Internal or Embedded CSS:

Internal CSS is defined within a <style> tag inside the <head> section of an HTML document. It is useful for
styling a single web page without affecting other pages.

In the following example, we have used the inline CSS in <p> and <h1> tag.

Ex: <head>
<style>
p{
color: blue;
font-size: 18px;
}
</style>
</head>

HAREESHA C, ASSISTANT PROFESSOR 41


WEB APPLICATION DEVELOPMENT

PROGRAM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal CSS Example</title>
<style>
body {
background-color: skyblue;
}
h1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>Web Technology</h1>
</body>
</html>

3. External CSS:

External CSS is written in a separate .css file and linked to an HTML document using the <link> tag. It is the
best practice for large projects as it keeps styles separate from content.

<head>

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

</head>

EX:

This file saves with .css extension.

For Ex: style.css

HAREESHA C, ASSISTANT PROFESSOR 42


WEB APPLICATION DEVELOPMENT

body {
background-color: lightblue;
}
h1 {
color: red;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External CSS Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>

Creating an External Style Sheet

• Open a new blank document in Notepad


• Type style declarations
• h1 {color:red; font-family:sans-serif;}
• Do not include <style> tags
• Save the document as filename.css

Linking Style Sheets to HTML file

• Open an HTML file


• Between <head> and </head> add
o <link href=URL rel=“relation_type” type=“link_type”>
• Save this file and the .css file in the same web server directory

HAREESHA C, ASSISTANT PROFESSOR 43


WEB APPLICATION DEVELOPMENT

An example of an external style sheet with an original html file

html file Text file named stylesheet.css

<!DOCTYPE html>

<html lang="en"> h1 {font-family: sans-serif;


color: orange}
<head>
b {color: blue}
<title>Getting Started</title>

<link href=“scraps.css” rel=“stylesheet” type=“text/css” />

</head>

<body>

….

</body>

</html>

CSS Selectors

CSS selectors define the elements to which a set of CSS rules apply. They allow you to target HTML elements
based on attributes, relationships, or positions within the document.

There are several different types of selectors in CSS.

1. CSS Element Selector


2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1. The CSS element Selector

This selects all elements of a particular type. The element selector selects HTML elements based on the
element name.

Syntax:

element {
property: value;
}

HAREESHA C, ASSISTANT PROFESSOR 44


WEB APPLICATION DEVELOPMENT

For example, to select all paragraphs in the document, use the selector p.

p{
text-align: center;
color: red;
}
Ex:

<html lang="en">
<head>
<style>
p{
text-align: center; color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style. </p>
<p id="para1">My name is Hareesha </p>
<p>Department of Computer Applications</p>
</body>
</html>

2. CSS id Selector

The ID selector in CSS is used to target a specific HTML element with a unique id attribute. 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.

Syntax:

#id-name {
property: value;
}

Program:

<!DOCTYPE html>
<html lang="en">

HAREESHA C, ASSISTANT PROFESSOR 45


WEB APPLICATION DEVELOPMENT

<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

3. CSS class Selector

The class selector in CSS is used to target multiple elements that share the same class name. Unlike the ID
selector (#), which applies to only one unique element, a class (.) can be reused across multiple elements.

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

Syntax:

.class-name {
property: value;
}
Program:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>

HAREESHA C, ASSISTANT PROFESSOR 46


WEB APPLICATION DEVELOPMENT

</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph. </p>
</body>
</html>

4. CSS Universal Selector

The universal selector (*) in CSS selects all elements on a webpage. It is useful when you want to apply a
style to every element or reset default styles.

Syntax:

*{
property: value;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

HAREESHA C, ASSISTANT PROFESSOR 47


WEB APPLICATION DEVELOPMENT

5. CSS Group Selector

The group selector in CSS is used to apply the same style to multiple elements at once. It reduces redundancy
and makes your CSS cleaner and more efficient.

Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.

Syntax:

h1, h2, p {
color: blue;
font-family: Arial, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1, h2, p {
text-align: center;
color: blue; }
</style>
</head>
<body>
<h1>Web Technology</h1>
<h2>Web Technology (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>

Properties

Font

CSS provides various properties to control the appearance of text, including font family, size, weight, style,
spacing, and more.

These are some important font attributes:

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:

HAREESHA C, ASSISTANT PROFESSOR 48


WEB APPLICATION DEVELOPMENT

1. By a color name
Predefined color names (e.g., red, blue, green)
2. By hexadecimal value (#RRGGBB)
A six-digit hex code (values from 00 to FF for Red, Green, and Blue).
3. By RGB
Defines colors using Red, Green, and Blue values (0–255).

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>

CSS Font Family

In CSS, the font-family property defines the typeface (font) of the text. It allows you to specify a list of fonts,
ensuring a fallback if the preferred font is unavailable.

CSS font family can be divided in two types:

1. Generic family: It includes Serif, Sans-serif, and Monospace.

Serif: Serif fonts include small lines at the end of characters. Example of serif: Times new roman, Georgia etc.

HAREESHA C, ASSISTANT PROFESSOR 49


WEB APPLICATION DEVELOPMENT

Sans-serif: A sans-serif font doesn't include the small lines at the end of characters. Example of Sans-serif:
Arial, Verdana etc.

2. Specific Font family: Specific fonts should be used in a font stack with generic families as a fallback.

It specifies the font family name like Arial, New Times Roman etc.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>

CSS Font Size

The font-size property in CSS defines the size of text. It plays a key role in typography and affects readability,
accessibility, and design consistency.

Syntax:

p{
font-size: 16px;
}
For example: font-size: 10pt

HAREESHA C, ASSISTANT PROFESSOR 50


WEB APPLICATION DEVELOPMENT

<!DOCTYPE html>
<html lang="en">
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
</body>
</html>

HAREESHA C, ASSISTANT PROFESSOR 51


WEB APPLICATION DEVELOPMENT

CSS Font Style

Font styles

The font-style property in CSS defines the style of the text, such as normal, italic, or oblique.

Syntax:

p{
font-style: italic;
}
For example: font-style: italic

<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>

HAREESHA C, ASSISTANT PROFESSOR 52


WEB APPLICATION DEVELOPMENT

CSS Font Variant

CSS font variant property specifies how to set font variant of an element. It may be normal and small-caps.

<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>

CSS Font Weight

The font-weight property in CSS controls the thickness or boldness of text.

Syntax:

p{
font-weight: bold;
}

Colors

The color property in CSS is used to set the color of HTML elements. Typically, this property is used to set the
background color or the font color of an element.

In CSS, we use color values for specifying the color. We can also use this property for the border-color and
other decorative effects.

We can define the color of an element by using the following ways:

1. RGB format.
2. RGBA format.

HAREESHA C, ASSISTANT PROFESSOR 53


WEB APPLICATION DEVELOPMENT

3. Hexadecimal notation.
4. HSL.
5. HSLA.
6. Built-in color

1. RGB Format

RGB format is the short form of 'RED GREEN and BLUE' that is used for defining the color of an HTML
element simply by specifying the values of R, G, B that are in the range of 0 to 255.

Syntax

color: rgb(R, G, B);

2. RGBA Format

It is almost similar to RGB format except that RGBA contains A (Alpha) that specifies the element's
transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0 is for fully transparent, and 1.0 is for
not transparent.

Syntax

color:rgba(R, G, B, A);

3. Hexadecimal notation

Hexadecimal can be defined as a six-digit color representation. This notation starts with the # symbol
followed by six characters ranges from 0 to F. In hexadecimal notation, the first two digits represent the red
(RR) color value, the next two digits represent the green (GG) color value, and the last two digits represent
the blue (BB) color value.

The black color notation in hexadecimal is #000000, and the white color notation in hexadecimal is #FFFFFF.
Some of the codes in hexadecimal notation are #FF0000, #00FF00, #0000FF, #FFFF00, and many more.

Syntax

color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);

3. Short Hex codes

It is a short form of hexadecimal notation in which every digit is recreated to arrive at an equivalent
hexadecimal value.

For example, #7B6 becomes #77BB66 in hexadecimal.

The black color notation in short hex is #000, and the white color notation in short hex is #FFF. Some of the
codes in short hex are #F00, #0F0, #0FF, #FF0, and many more.

HAREESHA C, ASSISTANT PROFESSOR 54


WEB APPLICATION DEVELOPMENT

4. HSL

It is a short form of Hue, Saturation, and Lightness.

Where,

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.

Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is white

Syntax

color:hsl(H, S, L); // Ex: hsl(0, 100%, 50%)

5. HSLA

It is entirely similar to HSL property, except that it contains A (alpha) that specifies the element's
transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0 indicates fully transparent, and 1.0
indicates not transparent.

Syntax

color:hsla(H, S, L, A);

6. Built-in Color

As its name implies, built-in color means the collection of previously defined colors that are used by
using a name such as red, blue, green, etc.

Syntax: color: color-name;

Box model

Box Model is a Fundamental concept in CSS that defines how elements are structured and positioned on a
webpage. It is used to develop the design and structure of a web page.

The box model in CSS is a container that contains various properties, including borders, margins, padding,
and the content itself. These properties collectively determine the dimensions and spacing of an element.

The key components:

1. Content:

In the CSS Box Model, the content is the innermost part of an element where text, images, or other media are
displayed.

HAREESHA C, ASSISTANT PROFESSOR 55


WEB APPLICATION DEVELOPMENT

It is affected by width and height but can be styled using CSS properties like color, font-size, background, etc.

2. Padding:

Padding is the space between the content and the border of an element. It creates inner spacing within the
element, making content more readable.

3. Border:

A border is the outer edge of an element that surrounds the padding and content. It helps in defining
boundaries and improving visual structure.

4. Margin:

The margin is the outermost space in the CSS Box Model. It creates space between an element and its
neighbouring elements, preventing them from touching.

1. Content Area

• Contains the actual data, such as text, images, or other media.

• Sized using the width and height properties.

• Bounded by the content edge.

2. Padding Area

• Surrounds the content area.

• Space within the border box.

• Dimensions are determined by the width and height of the padding box.

HAREESHA C, ASSISTANT PROFESSOR 56


WEB APPLICATION DEVELOPMENT

3. Border Area

• Lies between the padding and margin.

• Width and height are defined by the border.

4. Margin Area

• Separates the element from adjacent elements.

• Dimensions specified by the margin-box width and height.

<head>
<title>CSS Box Model</title>
<style>
.main
{
font-size:25px;
font-weight:bold;
Text-align:center;
}
.gfg
{
margin-left:50px;
border:50px solid skyblue;
width:300px;
height:200px;
text-align:center;
padding:50px;
}
.cbx
{
font-size:40px;
font-weight:bold;
color:black;
margin-top:60px;
background-color:lightgreen;
}
.ctxt
{
font-size:20px;
font-weight:bold;
background-color:white;
}

</style>
</head>
<body>

HAREESHA C, ASSISTANT PROFESSOR 57


WEB APPLICATION DEVELOPMENT

<div class = "main">CSS Box-Model Property</div>


<div class = "gfg">
<div class = "cbx">BOX Model</div>
<div class = "ctx">It is used to develop the design and structure of a web page.</div>
</div>
</body>
</html>

Layout

CSS Layout is essential for defining the visual structure, organization, and responsiveness of a website. CSS
website layout divides a webpage into multiple sections like header, navigation bar, content area, and footer,
making it easier to organize content and build the site.

Structure of Webpage Layout

HAREESHA C, ASSISTANT PROFESSOR 58


WEB APPLICATION DEVELOPMENT

1. Header Section

A header is usually located at the top of the website (or right below a top navigation menu). It often contains
a logo or the website name.

Example

.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}

2. Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website.

/* The navbar container */


.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

HAREESHA C, ASSISTANT PROFESSOR 59


WEB APPLICATION DEVELOPMENT

3. Content

The layout in this section, often depends on the target users. The most common layout is one (or combining
them) of the following:

1-column (often used for mobile browsers)

2-column (often used for tablets and laptops)

3-column layout (only used for desktops)

Ex:

/* Create three equal columns that floats next to each other */


.column {
float: left;
width: 33.33%;
padding: 15px;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h2>Column 1</h2>
<p>Column 1 content is present in this div tag.</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p>Column 2 content is present in this div tag.</p>
</div>
<div class="column">
<h2>Column n</h2>
<p>Add any number of Column by using n number of div tag.</p>
</div>
</div>

HAREESHA C, ASSISTANT PROFESSOR 60


WEB APPLICATION DEVELOPMENT

Unequal Columns

The main content is the biggest and the most important part of your site.

It is common with unequal column widths, so that most of the space is reserved for the main content. The
side content (if any) is often used as an alternative navigation or to specify information relevant to the main
content. Change the widths as you like, only remember that it should add up to 100% in total:

.column {
float: left;
padding: 10px;
}

/* Left and right column */


.column.side {
width: 25%;
}

/* Middle column */
.column.middle {
width: 50%;
}

/* Clear floats after the columns */


.row::after {
content: "";
display: table;
clear: both;
}

</style>
</head>
<body>
<div class="row">
<div class="column side">
<h2>Side</h2>
<p>Left Column occupies 25%..</p>
</div>

<div class="column middle">


<h2>Main Content</h2>
<p>Main content occupies 50%.</p>

HAREESHA C, ASSISTANT PROFESSOR 61


WEB APPLICATION DEVELOPMENT

</div>

<div class="column side">


<h2>Side</h2>
<p>Right column occupies 25%..</p>
</div>
</div>

4. Footer

The footer is placed at the bottom of your page. It often contains information like copyright and contact info.

.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}

Layout Example

<html lang="en">
<head>
<title>CSS Website Layout</title>
<style>
*{
box-sizing: border-box;
}

body {
margin: 0;
}

/* Style the header */


.header {
background-color: pink;
padding: 20px;
text-align: center;
}

/* Style the top navigation bar */

HAREESHA C, ASSISTANT PROFESSOR 62


WEB APPLICATION DEVELOPMENT

.topnav {
overflow: hidden;
background-color: skyblue;
}

/* Style the topnav links */


.topnav a {
float: left;
display: block;
color: red;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change color on hover */


.topnav a:hover {
background-color: yellow;
color: black;
}

/* Create three unequal columns that floats next to each other */


.column {
float: left;
padding: 10px;
}

/* Left and right column */


.column.side {
width: 25%;
}

/* Middle column */
.column.middle {
width: 50%;
}

/* Clear floats after the columns */


.row::after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other
*/
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}

/* Style the footer */


.footer {
background-color: lightblue;
padding: 10px;

HAREESHA C, ASSISTANT PROFESSOR 63


WEB APPLICATION DEVELOPMENT

text-align: center;
}
</style>
</head>
<body>

<div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="topnav">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>

<div class="row">
<div class="column side">
<h2>Side</h2>
<p>The layout in this section, often depends on the target users.</p>
</div>

<div class="column middle">


<h2>Main Content</h2>
<p>Unequal Columns
The main content is the biggest and the most important part of your site.

It is common with unequal column widths, so that most of the space is reserved for the main content..
</p>
</div>

<div class="column side">


<h2>Side</h2>
<p>The layout in this section, often depends on the target users.</p>
</div>
</div>

<div class="footer">
<h1>Footer</h1>
</div>
</body>
</html>

HAREESHA C, ASSISTANT PROFESSOR 64


WEB APPLICATION DEVELOPMENT

Positioning

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:

Position Property Description

Default positioning method. Elements with position: static are positioned


Static Positioning
according to the normal flow of the document.

Elements with position: relative are positioned relative to their normal position in
Relative Positioning the document flow. Other elements will not fill the gap left by this element when
adjusted.

Positioned concerning its nearest non-static ancestor. Elements with position:


Absolute Positioning
absolute are taken out of the normal document flow.

An element with position: fixed property remains in the same position relative to
Fixed Positioning
the viewport even when the page is scrolled.
Combines features of position: relative and position: fixed. The element is treated
Sticky Positioning as position: relative until it reaches a specified threshold, then it becomes position:
fixed.

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will
not work unless the position property is set first. They also work differently depending on the position value.

Syntax

position: static;

position: relative;

position: absolute;

position: fixed;

position: sticky;

1. Static Positioning

HTML elements are positioned static by default. It does not accept properties like top, left, right, or bottom.
An element with position: static; is not positioned in any special way.

HAREESHA C, ASSISTANT PROFESSOR 65


WEB APPLICATION DEVELOPMENT

<head>
<style>
div.static {
position: static;
border: 3px solid red;
}
</style>
</head>

2. Relative Positioning

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

<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid red;
}
</style>
</head>

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).

<style>
div.relative {

HAREESHA C, ASSISTANT PROFESSOR 66


WEB APPLICATION DEVELOPMENT

position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>

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.

<html>
<head>
<style>
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightgreen;
padding: 20px;
border: 2px solid black;
}
.content {

HAREESHA C, ASSISTANT PROFESSOR 67


WEB APPLICATION DEVELOPMENT

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>

5. Sticky Positioning

A sticky element toggles between relative and fixed, depending on the scroll position. The sticky element
stays at the top of the viewport as you scroll but only within its containing element.

<html>
<head>
<!--Driver Code Ends-->
<style>
.sticky {
position: sticky;
top: 0;
background-color: yellow;
padding: 10px;
}
</style>
<!--Driver Code Starts-->

HAREESHA C, ASSISTANT PROFESSOR 68


WEB APPLICATION DEVELOPMENT

</head>
<body>
<div class="sticky">I am sticky</div>
<p>Scroll down to see the effect.</p>
<div style="height: 1000px;"></div>
</body>
</html>

Flexbox

CSS Flexbox, short for the Flexible Box Layout module, is a powerful layout tool designed to simplify web
page layouts by arranging items in rows or columns with ease.

The Flexible Box Layout module introduces a one-dimensional layout system that handles space distribution
and item alignment effectively. It works seamlessly for horizontal (row) or vertical (column) arrangements,
making it a go-to solution for responsive designs.

Flexbox eliminates the need for floats or complex positioning, enabling responsive and dynamic layouts.

It aligns items efficiently, distributing space within a container, even when their sizes are dynamic or
unknown.

Flexbox is supported in all modern browsers, making it a reliable choice for creating flexible designs.

Features

1. Alignment: Easily aligns items along the main axis (row/column) or cross-axis (perpendicular
direction).
2. Space Distribution: Distributes space among items or gaps dynamically within a container.
3. Responsive Design: Adapts to screen sizes without extra effort, perfect for modern web layouts.

Before the Flexbox Model

• Block: Sections in web pages


• Inline: Text
• Table: Two-dimensional table data
• Positioned: Explicit position of an element

HAREESHA C, ASSISTANT PROFESSOR 69


WEB APPLICATION DEVELOPMENT

Flexbox Components

1. Flex Container: The parent div containing various divisions.


2. Flex Items: The items inside the container div.

Flexbox Axes

Flexbox operates on two axes:

1. Main Axis: Runs from left to right by default.


2. Cross Axis: Perpendicular to the main axis, runs from top to bottom.

Flex Direction Properties

1. Left to Right: flex-direction: row;


2. Right to Left: flex-direction: row-reverse;
3. Top to Bottom: flex-direction: column;
4. Bottom to Top: flex-direction: column-reverse;
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: lightblue;
padding: 10px;
}
.flex-item {
background-color: pink;
color: red;
margin: 5px;
padding: 20px;
text-align: center;

HAREESHA C, ASSISTANT PROFESSOR 70


WEB APPLICATION DEVELOPMENT

flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>

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.

Syntax

.class {
display: grid;
}

CSS Grid Layout Properties

Property Description

Defines the amount of space between columns in a multi-column layout, often used
column-gap
with column-count in CSS Grid.
Specifies the spacing (also called gutter) between rows and columns in CSS Grid
gap
and Flexbox layouts.
A grid-based layout system in CSS that provides rows and columns, simplifying the
grid
design without using floats or positioning.
Defines the size and location of a grid item within a CSS grid layout by specifying
grid-area
the start and end lines.
Sets the size of columns that are automatically generated in a CSS Grid layout when
grid-auto-columns
more content is added.

HAREESHA C, ASSISTANT PROFESSOR 71


WEB APPLICATION DEVELOPMENT

<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: auto auto;
gap: 15px;
}

.grid-item {
background-color: lightgray;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Row 1</div>
<div class="grid-item">Row 2</div>
</div>
</body>
</html>

<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

.grid-item {
background-color: lightgray;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>

HAREESHA C, ASSISTANT PROFESSOR 72


WEB APPLICATION DEVELOPMENT

<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
</body>
</html>

HAREESHA C, ASSISTANT PROFESSOR 73


WEB APPLICATION DEVELOPMENT

RESPONSIVE WEB DESIGN

Media queries

The @media rule, introduced in CSS2, made it possible to define different style rules for different media
types. CSS Media Queries are used to apply CSS styles according to the screen size.

Media queries can be used to check many things, such as:

• width and height of the viewport


• orientation of the viewport (landscape or portrait)
• resolution

Syntax:

@media mediatype and (condition) {

/* CSS styles */

Media Types in CSS

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

Media Type Description

all Suitable for all media devices.

print Used for printers.

screen Targeted at computer screens, tablets, smartphones, etc.

speech Designed for screen readers that read the content aloud.

Common Media Features

Here are some commonly used media features:

Value Description
orientation Orientation of the viewport. Landscape or portrait
max-height Maximum height of the viewport
min-height Minimum height of the viewport
height Height of the viewport (including scrollbar)
max-width Maximum width of the viewport
min-width Minimum width of the viewport
width Width of the viewport (including scrollbar)

HAREESHA C, ASSISTANT PROFESSOR 74


WEB APPLICATION DEVELOPMENT

<html>
<head>
<style>
body {
background-color: pink;
}

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


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

<h1>Resize the browser window to see the effect!</h1>


<p>The media query will only apply if the media type is screen and the viewport is 480px wide or
wider.</p>

</body>
</html>

Responsive Web Design

Responsive Web Design is designing websites that contain flexible layouts that can scale itself according
to the screen size of the device it is being viewed on. A Responsive Web Design enlarges, shrinks, resizes, or
hides content present as per the screen size of the device. Using websites that look bad on the screen can be
displeasing for the users and they might just close and stop using that specific website.

How to Create a Responsive Web Design?

Step 1: Use Fluid Grids

Instead of using fixed-width layouts, use fluid grid systems. This means the layout of your website will adjust
smoothly based on the screen size.

Step 2: Use Flexible Images

Make sure images and other media content can scale within their containers.

Step 3: Apply Media Queries

HAREESHA C, ASSISTANT PROFESSOR 75


WEB APPLICATION DEVELOPMENT

Use media queries in your CSS to apply different styles for different screen sizes and orientations.

Step 4: Prioritize Touchscreens

Make buttons and other interactive elements large enough for finger tapping. Place navigational elements in
easily accessible areas.

Step 5: Test Responsiveness

Continuously test your website on different devices and browsers to make sure it looks and functions well
everywhere.

CSS Fluid Layouts

CSS fluid layouts (also known as liquid layouts) are designed to adapt gracefully to different screen sizes
and devices, ensuring optimal viewing experiences across a wide range of viewports. They contrast with
fixed layouts, which maintain rigid dimensions regardless of screen size.

Key Principles of Fluid Layouts


• Proportional Sizing: Elements are sized relative to the viewport or parent container, allowing them
to expand or contract based on the screen size

• Responsive Units: Utilizing units such as percentages, viewport units, and ems instead of fixed pixels

• Reflowing Content: Content reflows to fit the available space, preventing horizontal scroll bars and
ensuring readability

• Nesting Layouts: Complex designs can be achieved by nesting fluid layout regions within each other

Flexible Images
The flexible images are responsive web design’s second pillar. They allows us to provide image solutions with
no restrictions to a fixed display size.

Syntax:

img {
width: 100%;
height: auto;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

HAREESHA C, ASSISTANT PROFESSOR 76


WEB APPLICATION DEVELOPMENT

img {
width: 100%;
height: auto;
}
</style>
</head>
<body>

<img src="1.jpg" width="460" height="345">


<p>Resize the browser window to see how the image will scale.</p>

</body>
</html>

Mobile-first design approach

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

This method is crucial because most people today use their smartphones and tablets to go online rather than
laptops or computers. Mobile-first designs ensure that your website not only looks good but also works
seamlessly across different devices, providing the best user experience. This approach helps
increase website traffic and ensures that your site adjusts to different screen sizes effectively.

HAREESHA C, ASSISTANT PROFESSOR 77


WEB APPLICATION DEVELOPMENT

CSS FRAMEWORKS

Introduction to Bootstrap

Bootstrap is a framework that is suitable for mobile-friendly web development. it is a popular front-end
framework for building responsive and mobile-first websites.

It provides pre-designed CSS, JavaScript components, and utility classes to quickly create modern and
consistent user interfaces.

Why Bootstrap?

• Faster and Easier Web Development.


• It creates Platform-independent web pages.
• It creates Responsive Web-pages.
• It is designed to be responsive to mobile devices too.
• It is Free! Available on www.getbootstrap.com

How to use Bootstrap 4 on a webpage:


There are two ways to include Bootstrap on the website.
1. Include Bootstrap from the CDN link.
2. Download Bootstrap from getbootstrap.com and use it.

BootStrap from CDN: This method of installing Bootstrap is easy. It is highly recommended to follow this
method.
• Go to www.getbootstrap.com and click Getting Started. Scroll down and copy the Bootstrap CDN for
CSS, JS, Popper.js, and jQuery links.
Bootstrap CSS Library:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">

containers

In Bootstrap, containers are fundamental building blocks for structuring your webpage’s content. They help
to organize and encapsulate content within a defined device or viewport. By using containers, you ensure
that your website is responsive, with elements aligned properly, and adaptable to different screen sizes for a
smooth and consistent layout presentation.

HAREESHA C, ASSISTANT PROFESSOR 78


WEB APPLICATION DEVELOPMENT

There are two container classes in Bootstrap:

Class Description
Fixed-width layout for webpage content, ensuring consistent padding and
.container
alignment.
.container-fluid Fluid-width layout for webpage content, spanning the full width of the viewport.

1 .container: Fixed-Width Layout

The .container class creates a fixed-width layout that adjusts its size based on the current viewport or device.
This class ensures that content within it is aligned and padded appropriately, providing a visually consistent
presentation across different screen sizes.

2 .container-fluid: Full-Width Layout

The .container-fluid class provides a fluid-width layout, meaning the container stretches to occupy the full
width of the viewport. This makes it ideal for layouts that need to cover the entire screen, ensuring that the
content adjusts seamlessly across all devices and screen sizes.

Components of Bootstrap
Bootstrap components are pre-styled UI elements like buttons, forms, navbars, and more, built with HTML,
CSS, and JavaScript. They provide a consistent and responsive design framework, facilitating rapid
development of web applications with minimal customization required.

Component Description

It simply puts extra attention to particular content or information by making it larger


Jumbotron
and more eye-catching.

Alerts It is a popup with a predefined message that appears after a particular action.

Customized buttons used to perform an action in forms, dialogue boxes, etc. They
Buttons
come in multiple states, sizes, and predefined styles.

Button group A group of buttons aligned in a single line, arranged vertically or horizontally.

Badge A labelling component used to add additional information.

Used to show the progress of a particular operation with a custom progress bar. It
Progress Bar
may have text labels, stacked bars, and animated backgrounds.

Displays the loading state of websites or projects. Built with HTML and CSS, doesn't
Spinner
require JavaScript.

Keeps updating the navigation bar to the currently active link based on the scroll
Scrollspy
position in the viewport.

HAREESHA C, ASSISTANT PROFESSOR 79


WEB APPLICATION DEVELOPMENT

List group Displays an unordered series of content in a proper way.

Card Provides a customizable, extensible, and flexible content container.

Dropdown Drops the menu in the format of a list of links. Contextual and toggleable overlays.

Navs Creates a basic and simple navigation menu with a .nav base class.

Navbar The navigation bar at the top of a website or webpage.

Used to take multiple inputs at once from the user. Bootstrap has two layouts
Forms
available: stacked and inline.
Extend form controls by adding a button, button group, or text on either side of
Input groups
inputs.
Provides the location of the current page in a navigational hierarchy and adds
Breadcrumb
separators through CSS.

Carousel A slideshow of image or text content built with CSS 3D and JavaScript.

Displays a message for a small amount of time, usually a few seconds. Alert messages
Toast
designed to imitate push notifications popular in desktop and mobile systems.

Tooltip Provides small information about the element/link when the mouse hovers over it.

Popovers Displays extra information about the element/link when clicked on it.

Collapse A JavaScript plugin used to show or hide content.

Modal A small popup window positioned over the actual window.

Used to easily navigate between different pages, typically presented as a large block
Pagination
of connected links for accessibility.

Used for repetitive and complex components like tweets or blogs. Images or videos
Media Object
are placed/aligned to the left or right of the content.

Alerts
The alert messages are highlighted texts that are important to take into consideration while performing a
process. Bootstrap allows showing these alert messages on the website using predefined classes.
The .alert class followed by contextual classes are used to display the alert message on website.

The alert classes are:


.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light and .alert-
dark.

HAREESHA C, ASSISTANT PROFESSOR 80


WEB APPLICATION DEVELOPMENT

Syntax:
<div class="alert> Contents... <div>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Alerts</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="alert alert-success">
<strong>Success alert!</strong>
</div>
<div class="alert alert-info">
<strong>Info alert!</strong>
</div>
<div class="alert alert-warning">
<strong>Warning alert!</strong>
</div>
</div>
</body>
</html>

HAREESHA C, ASSISTANT PROFESSOR 81


WEB APPLICATION DEVELOPMENT

Buttons

Bootstrap provides different styles of buttons:

Now, buttons, and links can all look alike with Bootstrap, anything that is given that class of btn will inherit
the default look of a grey button with rounded corners. Adding extra classes will add colors to the buttons.

The following table shows different buttons:

Component Description Component

btn Standard gray button with gradient

Provides extra visual weight and identifies the primary action


btn btn-primary
in a set of buttons

btn btn-info Used as an alternative to the default styles

btn-success Indicates a successful or positive action

btn btn-warning Standard gray button with gradient

btn btn-danger Indicates a dangerous or potentially negative action

Alternate dark gray button, not tied to a semantic action or


btn btn-inverse
use

Deemphasize a button by making it look like a link while


btn btn-link
maintaining button behavior

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Buttons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script>
</head>
<body style="text-align:center;">
<div class="container mt-3">
<h2>Buttons</h2>

HAREESHA C, ASSISTANT PROFESSOR 82


WEB APPLICATION DEVELOPMENT

<button type="button" class="btn btn-primary"> Primary</button>


<button type="button" class="btn btn-secondary"> Secondary</button>
<button type="button" class="btn btn-danger"> Danger</button>
</div>
</body>
</html>

Navs
Nav Menu: The .nav, .nav-item and .nav-link classes are used to create navigation menu. The .nav, .nav-
item and .nav-link classes are used with <ul>, <li> and link element respectively.

<html lang="en">
<head>
<title>Nav menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<linkrel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
</head>
<body style="text-align:center;">
<div class="container">
<h2>Navigation Menu</h2>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
</div>
</body>
</html>

HAREESHA C, ASSISTANT PROFESSOR 83


WEB APPLICATION DEVELOPMENT

Dropdowns
Dropdowns are one of the most important parts of an interactive website. A dropdown menu is the collection
of menu items that allow users to choose a value from the list. The .dropdown class is used to design the drop-
down menu.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dropdowns</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h2>Dropdown List</h2>
<div class="dropdown">
<button type="button"
class="btn btn-success dropdown-toggle"
data-toggle="dropdown">
Select MCA Subjects
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Operating System
</a>
<a class="dropdown-item" href="#">
Web Technologies
</a>
</div>
</div>
</div>
</body>
</html>

HAREESHA C, ASSISTANT PROFESSOR 84


WEB APPLICATION DEVELOPMENT

Bootstrap Utilities
Bootstrap provides a lot of utilities to make a stylish, mobile-friendly, and responsive front-end website
without using any CSS code. The utility layout is used for showing, hiding, aligning, and spacing content.

1. Changing display: Bootstrap provides some display properties for setting the display. Some display
properties like set to display responsive and display toggling, etc.
2. Flexbox options: The Flexible Box Layout Module in bootstrap is used for designing the flexible and
responsive layout structure.
3. Margin and padding: Bootstrap use the margin and padding (spacing) utility to set the space and size of
an element.

HAREESHA C, ASSISTANT PROFESSOR 85

You might also like