Scribd
Upload
5 views

UNIT-1-HTML_CSS

The document outlines a syllabus for a Web Technologies course, covering topics such as HTML, CSS, and various web programming languages and technologies. It details the structure of HTML documents, including elements, attributes, and the creation of lists, tables, and forms. Additionally, it discusses the use of hyperlinks and image tags, providing syntax examples and explanations for each concept.

Uploaded by

karthikareddyjavini503
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
5 views

UNIT-1-HTML_CSS

The document outlines a syllabus for a Web Technologies course, covering topics such as HTML, CSS, and various web programming languages and technologies. It details the structure of HTML documents, including elements, attributes, and the creation of lists, tables, and forms. Additionally, it discusses the use of hyperlinks and image tags, providing syntax examples and explanations for each concept.

Uploaded by

karthikareddyjavini503
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/ 91

Web Technologies

3CSE-B
2024-25
Prepared BY
Dr.M.Gangappa

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 1


Syllabus
Introduction to Web Programming: HTML - List, Tables, images,
forms, Frames.

CSS: Introduction, syntax, selectors, how to add CSS, backgrounds,


borders, margins, padding, Box model, links, lists, tables, display,
position, z-index, overflow, float, inline-block, dropdowns, Navigation
Bar, Website layout.

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 2


HTML:
S.No Topic Slide no
1 Lists 16
2 Images 21
3 Tables 23
4 Frames 27
5 Forms 32

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 3


CSS
S.No Topic Slide No

1 Introduction to CSS, syntax 41


2 Selectors 46
3 how to add CSS 49
4 backgrounds 66
5 borders, margins, padding, Box model 68
6 Links 73
7 Lists
8 Tables
9 display
10 position
11 z-index
12 Overflow
13 Float
14 Inline-block
15 Dropdowns
16 Navigation bar
17 Web-site layout

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 4


Markup Languages

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 5


Web Technologies
Some of the most popular websites, ranging from Google to YouTube and from Amazon to twitter are built
using client and server-side technologies.

According to Microsoft, Web technologies include the following:


a) Markup languages (HTML, CSS, XML, CGI, and HTTP )
b) Programming languages (Perl, C#, Java, Visual Basic, and .NET)
c) Web server and server technologies (Apache Tomcat Server, Microsoft's Internet Information Server
(IIS) and nginx (pronounced engine X)
d) Databases(Microsoft Access, IBM DB2,Oracle RDBMS, MySQL)

The top website technologies:


➢ HTML5(CSS)
➢ JavaScript
➢ PHP
➢ Python
➢ Ruby
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 6
Mark-up Language:
➢ It is a computer language that uses tags to define elements within a document (hyper text).
➢ The codes enclosed in angle-brackets (<>) are mark-up instructions (also known as tags), and the text
between these instructions is the actual document text.
➢ The purpose of Mark-up language is to process the information, which give instructions on how a
document (hyper text) should appear.
➢ HTML, and XML are the important markup languages

HTML-HyperText Markup Language:


➢ HyperText Markup Language is the primary language of the Web and the most common one you will
work with as a web designer.
➢ All web pages are written in a flavour of HTML.
➢ Note : IT is not a programming language like java
➢ This language includes elements to connect the documents (hypertext) and make your web documents
interactive.
➢ It is based upon SGML (Standard Generalized Markup Language). It is a language that uses tags to
define the structure of your text. Elements and tags are defined by the < and > characters.
HTML versions:
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 7
HTML document Structure
Basic structure of an HTML document:
An HTML document has two main parts:
1. head. The head element contains title and meta data of a web document.
2. body. The body element contains the information that you want to display on a web page.

Refer to the text book:


Web Programing
Building Internet Application
By
Chris Bates.

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 8


Understanding elements
The most fundamental piece of building block of HTML is the elements. The element refers to the structure of the
HTML document. Every element has a name such as head, title, p, i, and b.
•
In HTML, an element refers to two different things:
1. element of structure of a document (for example, paragraph, web page title, etc.).
2. element in the sense of a tag (for example, <p>, <title>)
An element becomes a tag when we use the angled brackets around it.

Examples:
Examples of elements of
structure of a document head body p

Examples of elements as
<head> <body> <p>
tags

A tag instructs the browser what specific instruction to execute.

The <b>World Wide Web Consortium</b> (W3C)


21-02-2025 PreparedisByaDr.M.Gangappa,
rule-making VNRbody
VJIET for the Web. 9
Most elements in HTML have three parts:
1. start tag
2. Content
3. end tag.
The start tag is simply the element name surrounded by the angled brackets such as <b>, <body>, and <p>.
The end tag is a element name surrounded by </ and > such as </b>, </body>, and </p>.

A start tag instructs the browser to start a particular instruction. Conversely, an end tag marks the end of that
instruction.

Typically a complete web page contains many tags and sometimes nested tags (tags within other tags), it is necessary to
close all opened tags .
Main points to remember:
1. Every element has a name such as head, title, p, i, and b.
2. A tag is the element name surrounded by the angled brackets. This refers to a start tag such as <p>, <title>, and
<i>
3. Most elements have content, which is placed between the start and the end tags. Example, this is
<b>bold</b>.
4. Some elements have no content. Such elements/tags are known as empty tags.
5. Empty elements do not have end tags.
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 10
Understanding attributes
In HTML, elements (or tags) have attributes or properties. The attributes allow you to add extra instruction to your
tags.
An attribute has two parts:
1. attribute name
2. attribute value.

Example 1:

align="right" is an example of attribute-value pair. The word align is the attribute. The value of this attribute
is right.

Example 2:

<p align="right">This is my paragraph. Normally, text and other object on a web page are left-aligned. Because this
paragraph has an extra instruction (align="right") to start this particular paragraph from the right, the paragraph is
right-aligned.</p>

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 11


Displaying an HTML document

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 12


Working with text
1. Blocks of text of HTML document: A line or a group of lines are called blocks , each block can be formatted
independently using HTML elements such as <p>,<hr> etc.
2. Creating a paragraph

Syntax :
<p [ align = “left”|”center”|”right”] > … </p>

3. Creating headings

Syntax:
<h1 [ align = “left”|”center”|”right”] > … </h1>
<h2 [ align = “left”|”center”|”right”] > … </h2>
<h3 [ align = “left”|”center”|”right”] > … </h3>
<h4 [ align = “left”|”center”|”right”] > … </h4>
<h5 [ align = “left”|”center”|”right”] > … </h5>
<h6 [ align = “left”|”center”|”right”] > … </h6>

4. Creating horizontal line


Syntax:
21-02-2025 <hr [ align = “left”|”center”|”right”] [size=“n”]
Prepared By Dr.M.Gangappa, VNR VJIET [width=“nn%”]> 13
Working with text (continue…)
<b> bold the text </b>
<i> italics </i>
<sub> text subscript </sub>
<sup> text super script</sup>
<br> forces a line break
<pre> pre-formatted text </pre>

The character escape sequences


The following characters are reserved in HTML and must be replaced with their corresponding HTML
entities:
single space is created with &nbsp;
" is replaced with &quot;
& is replaced with &amp;
< is replaced with &lt;
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 14
> is replaced with &gt;
Hyper links
To make other documents easily accessible, a hyperlink is used. A link is created with an <a> tag.

Syntax:
<a href = “URL” title=“title of the link” target = “value”> … </a>

The href attribute is used to specify the destination of the link.

URL-uniform resource locator(address)


It is specified using Absolute path or Relative path.
It has several parts:
•Protocol
•Domain name
•Directory (folder)
•Filename and file extension
The following example shows these parts in a URL

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 15


Hyper links
The target Attribute
The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

• _blank - Opens the linked document in a new window or tab


• _self - Opens the linked document in the same window as it was clicked (this is default)
• _parent - Opens the linked document in the parent frame
• _top - Opens the linked document in the full body of the window.

Linking to specific sections - Creating a Bookmark

<a href = “#target”> … </a>


<a name= “target” > … </a>

program
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 16
Lists
Lists are used to group together related pieces of information so they are clearly
associated with each other and easy to read.

List types
There are three list types in HTML:
➢ unordered list — used to group a set of related items in no particular order
➢ ordered list — used to group a set of related items in a specific order
➢ definition list — used to display name/value pairs such as terms and definitions

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 17


Ordered List
Ordered (numbered) lists are used to display a list of items that should be in a specific
order. An example would be cooking instructions:
1. Gather ingredients
2. Mix ingredients together
3. Place ingredients in a baking dish
4. Bake in oven for an hour
5. Remove from oven
6. Allow to stand for ten minutes
7. Serve
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 18
Ordered List
Syntax :
< ol type = 1 | A | a |I |i start = “Specifies the start value” > … </ol>
You can use the start attribute as shown below:
<ol>
<li>Fasten your seatbelt</li>
<ol start="10">
<li>Starts the car's engine</li>
<li>Mix ingredients</li>
<li>Look around and go</li>
<li>Bake in oven for an hour</li>
</ol>
<li>Allow to stand for ten minutes</li>
</ol>

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 19


Example

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 20


21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 21
Image tag
The <img> tag is an empty tag, which means that, it can
contain only list of attributes and it has no closing tag.

<img [ src = "Image URL" ] [alt = "Test Image“ ]


[width = “nn“] [height = “nn“] />

Image as a link

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 22


Image map
There are three HTML elements used to create image maps:
➢ img: specifies the location of the image to be included in the
map.
➢ map: is used to create the map of clickable areas.
➢ area: is used within the map element to define the clickable
areas.
Syntax :
<img src=“URL" usemap="#map_area" />
<map name=“map_area">
<area shape="rect“|”circle”|”poly” coords=“ string"
href="home.html" />
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 23
</map> Example
Tables

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 24


Tables

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 25


Example1: Example 5:Table Border color

Example2:

Example 3 : Cellpadding and cell spacing Attributes


Example 6:Table Back grounds

Example 4 : Colspan and Rowspan Attributes

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 26


Table Header, Body, and Footer

The three elements for separating the head, body, and foot of a
table are −

<thead> − to create a separate table header.


<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.

Example:

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 27


HTML - Frames
➢ HTML frames are used to divide your browser window into multiple
sections where each section can load a separate HTML document.
➢ A collection of frames in the browser window is known as a
frameset.

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 28


Note : Frames do not have <body> tag
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 29
Example1 : creating vertical columns Example 3: Mixing Columns and Rows

Example2 : Creating Horizontal Rows

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 30


Example 4: Example 5:

https://html.com/frames/

Named Frames

<a href=“ URL" target=“test">linked text</a>


<frame src=“URL" name="test">
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 31
FORMS

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 32


HTML Form Controls or elements
There are different types of form controls that
you can use to collect data using HTML form −

➢ Text Input Controls


➢ Checkboxes Controls
➢ Radio Buttons Controls
➢ Select Box Controls
➢ Submit and Reset Button

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 33


Creating HTML elements
Creating HTML elements such as text , password , checkbox, radio
button , submit and reset button etc.,

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 34


21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 35
Checkbox
Checkboxes are used when more than one option is required to be
selected. They are also created using HTML <input> tag but type
attribute is set to checkbox..
Attributes
Following is the list of attributes for <checkbox> tag.
1 type
Indicates the type of input control and for checkbox input control it will be set
to checkbox..
2 name
Used to give a name to the control which is sent to the server to be recognized and get
the value.
3 value
The value that will be used if the checkbox is selected.
4 checked
Set to checked if you want to select itPrepared
21-02-2025 by default.
By Dr.M.Gangappa, VNR VJIET 36
Radio buttons
Radio buttons are used when out of many options, just one option is
required to be selected. They are also created using HTML <input> tag
but type attribute is set to radio.
Select Box Control
A select box, also called drop down box which provides option to list
down various options in the form of drop down list, from where a user
can select one or more options.
Attributes Sr.No Attribute & Description
1 name
Used to give a name to the control which is sent to the server to be recognized and get
the value.
2 size
This can be used to present a scrolling list box.
21-02-2025 3 multiple Prepared By Dr.M.Gangappa, VNR VJIET 37
Following is the list of important attributes of <option> tag −
Sr.N Attribute & Description
o
1 value
The value that will be used if an option in the select box box is selected.
2 selected
Specifies that this option should be the initially selected value when the
page loads.
3 label
An alternative way of labeling options

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 38


Example 1: Example 3:

Example 2: Example4:

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 39


Example 5: Example 6:

END of HTML

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 40


Cascading Style Sheets (CSS)
❑ CSS stands for cascading style sheets ,which allow us to
specify the rules that say how the content of elements within
our document should appear.

❑ It is the World Wide Web Consortium (W3C) standard for


defining the presentation of documents written in HTML

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 41
Engineering, VNRVJIET, Hyderabad
Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 42
Engineering, VNRVJIET, Hyderabad
Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 43
Engineering, VNRVJIET, Hyderabad
CSS Rule

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 44
Engineering, VNRVJIET, Hyderabad
Syntax

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 45
Engineering, VNRVJIET, Hyderabad
CSS selectors

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 46
Engineering, VNRVJIET, Hyderabad
The universal selector set a value for all elements in the HTML document
syntax:
* { property: value1; Property: value2;}
Example:
* { font-size: 32px;}
3. Grouped selectors
The selector rule has the same effect to more than one selector at a time.

H1,H2,p { font-size : 14px;}


Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 47
Engineering, VNRVJIET, Hyderabad
4. Class selector
The .class selector selects elements with a specific class attribute.
.class {
css declarations;
}
Example :

.hometown {
background: yellow; }

<p class="hometown">I live in Hyderabad.</p>

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 48
Engineering, VNRVJIET, Hyderabad
5. id selector
The .id selector uses the id attribute of an HTML element to select
a specific element.
#myid{
css declarations;
}
Example : #para1 {
text-align: center;
color: red; Id selector is given the
} most priority.

<p id=“para1">I live in Hyderabad.</p>


Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 49
Engineering, VNRVJIET, Hyderabad
How to add CSS to HTML page
or
CSS Types

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 50
Engineering, VNRVJIET, Hyderabad
Inline CSS
<!DOCTYPE html> Output:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline style sheet</title>
</head>
<body>
<h1> Inline CSS Demo</h1>
<h1 style="background-color: chartreuse;text-align: center"> VNR VJIET </h1>
<h1 style="background-color: chartreuse;text-align: center"> Good morning</h1>
<h1 style="background-color: chartreuse;text-align: center"> Good afternoon</h1>
<h1 style="background-color: chartreuse;text-align: center"> Good evening</h1>

</body>
</html>
Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 51
Engineering, VNRVJIET, Hyderabad
Inline CSS
➢ We can write CSS inside of an HTML tag, using the style attribute.
➢ When CSS is written using the style attribute , it is called an “inline style
sheet”.
INLINE STYLE SYNTAX :

< HTML_element_Name style = “ property : value ; “ >


Content goes here…
< /HTML_element_Name >
❑ The inline CSS helps you apply style rules to specific HTML element.
❑ The style attribute specifies properties and values as shown in the syntax.
❑ The inline CSS is limited. For elaborate projects, you should consider other
options: internal CSS and external CSS methods.
Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 52
Engineering, VNRVJIET, Hyderabad
Internal CSS
<!DOCTYPE html>
Output :
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Basics </title>
<style>
h1 {
background-color: orange;
color:white;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<h1> Inline CSS Demo</h1>
<h1> VNR VJIET </h1>
<h1 style="background-color: chartreuse;text-align: center"> Good
morning</h1>
<h1 style="background-color: chartreuse;text-align: center"> Good
afternoon</h1>
<h1 style="background-color: chartreuse;text-align: center"> Good evening</h1>

</body>
</html>

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 53
Engineering, VNRVJIET, Hyderabad
Internal CSS or Embedded style sheet
➢ You can integrate internal CSS stylesheets by placing the <style> element
in the <head> section of a page.
➢ Internal styles apply to whole page but not to multiple HTML documents.
Syntax:
<head>
<style>
selector {
property : value;
}
</style>
</head>
Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 54
Engineering, VNRVJIET, Hyderabad
External Style sheet
Suppose there are Four web pages which need the same theme. Then, we
will use external CSS.

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 55
Engineering, VNRVJIET, Hyderabad
External Style sheet
❑ With an external style sheet, you can change the look of an entire website by
changing just one file!
❑ Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 56
Engineering, VNRVJIET, Hyderabad
Practice Problems
Example1 : inline style sheet Example2 : internal style sheet

Example 3: external style sheet Example 4 : class selector

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 57
Engineering, VNRVJIET, Hyderabad
Example5 : id selector Example 6 : class selector

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 58
Engineering, VNRVJIET, Hyderabad
Divisions
HTML elements are of two types :
1. Block level
2. inline element
Block level lements:
✓ Block elements appear on the screen as if they have a line break
before and after them.
✓ For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>,
<ol>, <dl>, <pre>, <hr/>, <blockquote>, and <address> elements are
all block level elements.
Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 59
Engineering, VNRVJIET, Hyderabad
Divisions
Inline Elements
✓ Inline elements can appear within sentences and do not insert a line break.
✓ The <b>, <i>, <u>, <sup>,<sub>elements are all inline elements.

To change the appearance of block elements , we use <div>


tag, for inline element : <span> tag

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 60
Engineering, VNRVJIET, Hyderabad
<div> tag and <span> tag
➢ <div> tag
➢ This is the very important block level tag which plays a big role in grouping
various other HTML tags and applying CSS on group of elements.

<span> tag
HTML <span> tag is used as a generic container of inline elements.
Demo
Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 61
Engineering, VNRVJIET, Hyderabad
CSS UNITS
CSS has several different units for expressing a length. There are two types of
length units: absolute and relative.
Absolute units
Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 62
Engineering, VNRVJIET, Hyderabad
CSS UNITS
Relative length units specify a length relative to another length property.

Uni Description Example


t
% Defines a measurement as a percentage relative p {font-size: 16pt;
to another value. line-height: 125%;}
em A relative measurement for the height of a font in p {letter-spacing:
em spaces. 7em;}

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 63
Engineering, VNRVJIET, Hyderabad
Font Properties
Property Name Value
font-family Identifies the name of the specific font
“times”,” courier”,”arial” etc
font-style “normal “ | “ italic “ | “oblique”
font-weight sets how thick or thin characters. “normal” | “ bold “ | “
bolder” | “ lighter”

font-size sets the size of a font. “small” | “medium” | “large “ |


<length> | percentage

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 64
Engineering, VNRVJIET, Hyderabad
Text Properties
Property Name Value
color to set the color of the text. The color is specified by:
a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
text-align to set the horizontal alignment of a text.
left | right | center.
text-decoration is used to decorate text
none | underline | overline | line-through
text-transformation capitalize | uppercase | lowercase | none
Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 65
Engineering, VNRVJIET, Hyderabad
CSS Links
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouse over it
a:active - a link the moment it is clicked

Back grounds
background-color : “color name”
background-image : “url”
background-repeat : repeat-x| repeat-y |no-repeat
background-position : top right bottom left center
Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 66
Engineering, VNRVJIET, Hyderabad
Box model
The “CSS box model” is a set of rules that determine the dimensions
of every element in a web page. It gives four properties for each HTML
element.
1. Content – The text, image, or other media content in the
element.
2. Padding – The space between the box’s content and its
border.
3. Border – The line between the box’s padding and margin.
4. Margin – The space between the box and surrounding
boxes.
Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 67
Engineering, VNRVJIET, Hyderabad
Box model

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 68
Engineering, VNRVJIET, Hyderabad
p{
padding: 20px 0 20px 10px;
/* Top Right Bottom Left */
}
Example:
The code above gives us 20 pixels on the
top and bottom of each paragraph, 10
pixels on the left, but none on the right.

Box Size CSS Properties


Total Width width + padding-left + padding-right + border-left +
border-right + margin-left + margin-right
Total Height height + padding-top + padding-bottom + border-top +
border bottom + margin-top + margin-bottom
Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 69
Engineering, VNRVJIET, Hyderabad
CSS Border Properties

1.The border-style property specifies what kind of border to


display.
The following values are allowed:
➢ dotted - Defines a dotted border
➢ dashed - Defines a dashed border
➢ solid - Defines a solid border
➢ double - Defines a double border
2.The border-width property specifies the width of the four borders.
3.The border-color property is used to set the color of the four
borders.
Dr.M.Gangappa,Department of Computer Science &
February 21, 2025 70
Engineering, VNRVJIET, Hyderabad
CSS Border Properties

4.The border-radius property is used to add rounded borders to an


element

Margin – properties

CSS has properties for specifying the margin for each side of an
element:
❑ margin-top
❑ margin-right
❑ margin-bottom
❑ margin-left

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 71
Engineering, VNRVJIET, Hyderabad
CSS Padding
The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.

CSS has properties for specifying the padding for each side of an
element:
❑ padding-top
❑ padding-right
❑ padding-bottom
❑ padding-left

Dr.M.Gangappa,Department of Computer Science &


February 21, 2025 72
Engineering, VNRVJIET, Hyderabad
CSS LINKS
A link is a connection from one web page to another web page. CSS
property can be used to style the links in various different ways.
States of Link: Before discussing CSS properties, it is important to know
the states of a link. Links can exist in different states and they can be
styled using pseudo-classes.
There are four states of links given below:
a:link => This is a normal, unvisited link.
a:visited => This is a link visited by user at least once
a:hover => This is a link when mouse hovers over it
a:active
21-02-2025 => This is a link that is just
Prepared clicked.
By Dr.M.Gangappa, VNR VJIET 73
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 74
<!DOCTYPE html> a:hover {
<html> color: orange;
}
<head>
<title>Link color property</title> /*when the link is clicked, it will appear black*/
<style> a:active {
p{ color: black;
font-size: 20px; }
text-align: center; </style>
} </head>

/*unvisited link will appear green*/ <body>


a:link { <p>
color: red; <a href="https://www.geeksforgeeks.org/">
} GeeksforGeeks
</a>
/*visited link will appear blue*/ This link will change colours with different states.
a:visited { </p>
color: blue; </body>
}
</html>
/*when mouse hovers over link it will appear Prepared
21-02-2025 orange*/By Dr.M.Gangappa, VNR VJIET 75
The list's default style is borderless. The list may be divided into two categories:
1.Unordered List: By default, the list elements in unordered lists are denoted with
bullets, which are tiny black circles.
2.Ordered List: The list elements in ordered lists are identified by numbers and letters.

The following CSS list properties are available for usage in controlling the CSS lists:
•List-style-type:This property is used to determine the look of the list item marker, such
as a disc, character, or custom counter style.
•List-style-image: The pictures that will serve as list item markers may be specified using
this parameter.
•List-style-position: It describes where the marker box should be about the main block
box.
21-02-2025
•List-style: The list style is configured with this attribute.
Prepared By Dr.M.Gangappa, VNR VJIET 76
List-style-type property
The default list type of marker may be changed to a variety of other types, including square, circle,
Roman numerals, Latin letters, and many more. The entries in an unordered list are denoted by
round bullets (•), while the items in an ordered list are numbered by default using Arabic numerals
(1, 2, 3, etc.).
The markings or bullets will be removed if we set their value to none.

Syntax:
list-style-type:value;

We may use the value as follows:


1.circle
2.decimal, e.g.:1,2,3, etc
3.decimal-leading-zeroes , eg :01,02,03,04,etc
4.lower-roman
5.upper-roman
6.lower-alpha, e.g., a,b,c, etc
7.upper-alpha, e.g., A, B, C, etc
8.square
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 77
<body>
<!DOCTYPE html> <li>two</li>
<h1>
<html> <li>three</li>
Welcome to the course
<head> </ul>
</h1>
<title>Example for CSS Lists</title> <ul class="disc">
<h2>
<style> <li>one</li>
Ordered Lists
.num{ <li>two</li>
</h2>
list-style-type:decimal; <li>three</li>
<ol class="num">
}
<li>one</li>
.alpha{ </body>
<li>two</li>
list-style-type:upper-alpha; </html>
<li>three</li>
}
</ol> output
<ol class="alpha">
.circle{
<li>one</li>
list-style-type:circle;
<li>two</li>
}
<li>three</li>
.square{
</ol>
list-style-type:square;
}
<h2>
.disc{
Unordered lists
list-style-type:disc;
</h2>
}
<ul class="circle">
</style>
<li>one</li>
</head>21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 78
padding:20px; </style>
Lists styled with colour width: 90px; </head>
We may decorate lists with colors to } <body>
.order li{ <h1>
make them more visually appealing and background: pink; Welcome to the course
padding: 20px; </h1>
engaging. Anything added to the <ul> font-size:10px; <h2>
or <ol> tags will affect the whole list. margin:10px; Ordered Lists
} </h2>
However, anything added to a specific .unorder{ <ol class="order">
list-style: circle inside; <li>ONE</li>
<li> tag will only affect that list's items. background: lightblue; <li>TWO</li>
padding:20px; </ol>
width: 90px; <h2>
<!DOCTYPE html> } Unordered lists
<html> .unorder li{ </h2>
<head> background: pink; <ul class="unorder">
<title>Example for CSS Lists</title> color:black; <li>ONE</li>
<style> padding:10px; <li>TWO</li>
.order{ font-size:10px; </ul>
list-style: lower-alpha; margin:10px;
background: lightblue; } </body>
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 79
</html>
We can apply style on HTML tables for better CSS Table Border
look and feel. There are some CSS properties We can set border for the table, th and td
that are widely used in designing table using tags using the CSS border property.
CSS:
❑ border <style>
table, th, td {
❑ border-collapse border: 1px solid black;
❑ padding }
</style>
❑ width
❑ height
❑ text-align
❑ color
❑ background-color
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 80
<style>
CSS Table Border Collapse
table, th, td {
By the help of border-collapse property, we border: 1px solid black;
border-collapse: collapse;
can collapse all borders in one border only. }
th, td {
padding: 10px;
<style> }
table, th, td { </style>
border: 2px solid black;
border-collapse: collapse;
}
</style>

CSS Table Padding


We can specify padding for table header and
table data using the CSS padding property.

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 81


CSS Layout : CSS Display
CSS display is the most important property of CSS which is used to control the layout of
the element. It specifies how the element is displayed.

Syntax
display:value;

CSS display values


There are following CSS display values which are commonly used.
display: inline;
display: inline-block;
display: block;
display: run-in;
display: none;
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 82
CSS Layout: POSITION
The position property specifies the type of positioning method used for an element (static,
relative, fixed, absolute or sticky).

The position Property Elements are then positioned using the


The position property specifies the type of top, bottom, left, and right properties.
positioning method used for an element. However, these properties will not work
There are five different position values: unless the position property is set first.
❑ static They also work differently depending on
❑ relative the position value.
❑ fixed
❑ absolute
❑ sticky
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 83
position: static;
It is always positioned according to the normal flow of the page.

div.static {
position: static;
border: 3px solid #73AD21;
}

position: relative;

An element with position: relative; is positioned relative to its normal position.

div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 84


CSS Layout: The z-index Property
The z-index property specifies the stack order of an element (which element should be

placed in front of, or behind, the others). An element can have a positive or negative
stack order:

Set the z-index for an image, so that it is displayed behind the text:
<!DOCTYPE html> <h1>The z-index Property</h1>
<html>
<head> <img src="w3css.gif" width="100" height="140">
<style>
img { <p>Because the image has a z-index of -1, it will be placed behind the
position: absolute; text.</p>
left: 0px;
top: 0px; </body>
z-index: -1; </html>
}
</style>
</head>
<body> 21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 85
CSS Layout: OVERFLOW
The CSS overflow property controls what happens to content that is too big to fit into an
area.

The overflow property has the following values:

❑ visible - Default. The overflow is not clipped. The content renders outside the element's
box
❑ hidden - The overflow is clipped, and the rest of the content will be invisible
❑ scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
❑ auto - Similar to scroll, but it adds scrollbars only when necessary

CSS Layout - float and clear


The CSS clear property specifies what elements can float beside the cleared element and
on which side.
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 86
CSS Layout - display: inline-block
Compared to display: inline, the major difference is that display: inline-block allows to set
a width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings are respected, but
with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add
a line-break after the element, so the element can sit next to other elements.

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 87


CSS Navigation Bar
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.

Vertical Navigation Bar <p>A background color is added


} to the links to show the link
<!DOCTYPE html>
</style> area.</p>
<html>
</head> <p>Notice that the whole link
<head>
<body> area is clickable, not just the
<style>
text.</p>
ul {
<ul>
list-style-type: none;
<li><a href="#home">Home</a></li> </body>
margin: 0;
<li><a href="#news">News</a></li> </html>
padding: 0;
<li><a href="#contact">Contact</a></li>
}
<li><a href="#about">About</a></li>
</ul>
li a {
display: block;
width: 60px;
background-color:
21-02-2025 #dddddd; Prepared By Dr.M.Gangappa, VNR VJIET 88
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Inline List Items
One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to
the "standard" code from the previous page:

li {
display: inline;
}

Floating List Items


Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a
layout for the navigation links:
li {
float: left;
}

a {
display: block;
padding: 8px;
background-color: #dddddd;
21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 89
}
CSS Dropdowns
Basic Dropdown
Create a dropdown box that appears when the user moves the mouse over an element.

Dropdown Menu
Create a dropdown menu that allows the user to choose an option from a list:

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 90


CSS Website Layout
A website is often divided into headers, menus, content and a footer:

21-02-2025 Prepared By Dr.M.Gangappa, VNR VJIET 91

You might also like