Scribd
Upload
18 views31 pages

Web Technology U2 Part2

Web technology

Uploaded by

jafaaa0001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views31 pages

Web Technology U2 Part2

Web technology

Uploaded by

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

Block-level Elements

A block-level element always starts on a new line, and the browsers automatically
add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the
left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

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

The <p> element is a block-level element.

The <div> element is a block-level element.


Example

<p>Hello World</p>
<div>Hello World</div>
Try it Yourself »

Here are the block-level elements in HTML:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
CSS Tables



Tables in CSS are used to style HTML table elements, allowing data to be presented
in a structured, organized format with rows and columns. CSS provides a variety of
properties that can be applied to tables to enhance their appearance and
functionality.
CSS Table Properties
1. Border
The border property defines the appearance of borders around table elements (e.g.,
table, tr, td, th). It specifies the border’s width, style, and color.
Syntax:
border: table_width table_color;
Example 1: This example describes the CSS Table to apply the border property.
HTML

<!DOCTYPE html>
<html>

<head>
<style>
body {
text-align: left;
}

h1 {
color: green;
}

table,
th,
td {

/* Styling the border. */


border: 1.5px solid blue;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h2>Add border to table:</h2>
<table>
<tr>
<th>Roll No.</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>

</html>

2. Border Collapse
The border-collapse property controls whether the borders of adjacent cells are
merged into a single border or kept separate.
Syntax:
border-collapse: collapse/separate;
Example 2: This example describes the CSS Table by applying the border-collapse
property.
HTML

<!DOCTYPE html>
<html>

<head>
<style>
body {
text-align: left;
}

h1 {
color: green;
}

table.one {

/* Styling border collapse for table one. */


border-collapse: collapse;
}

table.two {

/* Styling border separate for table two. */


border-collapse: separate;
}

table,
td,
th {
border: 1.5px solid blue;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h2>borders collapsed:</h2>
<table class="one">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
<br>
<br>
<h2>borders separated:</h2>
<table class="two">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>

</html>

3. Border Spacing
Border Spacing property specifies the distance between the borders of adjacent
cells when border-collapse is set to separate.
Syntax:
border-spacing: value;
Example 3: This example describes the CSS Table by applying the border-spacing
property.
HTML

<!DOCTYPE html>
<html>

<head>
<style>
body {
text-align: left;
}

h1 {
color: green;
}

table.one {
border-collapse: separate;

/* Styling the border-spacing


between adjacent cells. */
border-spacing: 10px;
}

table.two {
border-collapse: separate;

/* Styling the border-spacing


between adjacent cells. */
border-spacing: 10px 30px;
}

table,
td,
th {
border: 1.5px solid blue;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h2>border spacing:</h2>
<table class="one">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
<br>
<br>
<h2>border spacing:</h2>
<table class="two">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>

</html>

4. Caption Side
Caption Side property specifies the placement of the table caption relative to the
table.
Syntax:
caption-side: top/bottom;
Example 4: This example describes the CSS Table by applying the caption-side
property to control the placement of the Table caption.
HTML

<!DOCTYPE html>
<html>

<head>
<style>
body {
text-align: left;
}

h1 {
color: green;
}

table.one {
border-collapse: separate;
border-spacing: 10px;

/* Controlling the placement of caption. */


caption-side: top;
}

table.two {
border-collapse: separate;
border-spacing: 10px;

/* Controlling the placement of caption. */


caption-side: bottom;
}

table,
td,
th {
border: 1.5px solid blue;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h2>Caption on top:</h2>
<table class="one">
<caption>Caption at the top of the table.</caption>
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
<br>
<br>
<h2>Caption at bottom:</h2>
<table class="two">
<caption> Caption at the bottom of the table </caption>
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>

</html>

5. Empty cells
Empty cells property specifies whether or not to display borders and background
on empty cells in a table.
Syntax:
empty-cells:show/hide;
Example 5: This example describes the CSS Table by applying the empty-cell
property that specifies whether to display the borders or not in the empty cells in a
table.
HTML

<!DOCTYPE html>
<html>

<head>
<style>
body {
text-align: left;
}

h1 {
color: green;
}

table.one {
border-collapse: separate;
border-spacing: 10px;

/* Hiding empty cells border */


empty-cells: hide;
}

table.two {
border-collapse: separate;
border-spacing: 10px;

/* Display empty cells border */


empty-cells: show;
}

table,
td,
th {
border: 1.5px solid blue;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h2>empty cells hide:</h2>
<table class="one">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
<br>
<br>
<h2>empty cells show:</h2>
<table class="two">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>

</html>

6. Table layout
The Table layout property is used to set up the layout algorithm used for the table.
Syntax:
table-layout:auto/fixed;
Example 6: This example describes the CSS Table by applying the table layout
property.
HTML

<!DOCTYPE html>
<html>

<head>
<style>
body {
text-align: left;
}

h1 {
color: green;
}

table.one {
width: 80px border-collapse: separate;
border-spacing: 10px;

/* Layout of table is auto. */


table-layout: auto;
}
table.two {
width: 80px border-collapse: separate;
border-spacing: 10px;
/* Layout of table is fixed. */
table-layout: fixed;
}

table,
td,
th {
border: 1.5px solid blue;
width: 80px;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h2>auto table layout:</h2>
<table class="one">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
<br>
<br>
<h2>fixed table layout:</h2>
<table class="two">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>

</html>

CSS provides a range of properties to enhance the styling and functionality of HTML
tables. By understanding and applying properties like border, border-collapse,
border-spacing, caption-side, empty-cells, and table-layout, web developers can
create well-structured and visually appealing tables.
CSS Lists
The List in CSS specifies the listing of the contents or items in a particular manner
i.e., it can either be organized orderly or unorder way, which helps to make a clean
webpage. It can be used to arrange the huge with a variety of content as they are
flexible and easy to manage. The default style for the list is borderless.
Currently Active Property:
list-style-type: decimal;
Types of Lists in CSS
The list can be categorized into 2 types:
 Unordered List: In unordered lists, the list items are marked with bullets i.e.
small black circles by default.
 Ordered List: In ordered lists, the list items are marked with numbers and an
alphabet.
Properties of CSS List
We have the following CSS lists properties, which can be used to control the CSS
lists:
 list-style-type: This property is used to specify the appearance (such as disc,
character, or custom counter style) of the list item marker.
 list-style-image: This property is used to set the images that will be used as
the list item marker.
 list-style-position: It specifies the position of the marker box with respect to
the principal block box.
 list-style: This property is used to set the list style.
Now, we will learn more about these properties with examples.
List Item Marker
This property specifies the type of item marker i.e. unordered list or ordered.
The list-style-type property specifies the appearance of the list item marker (such
as a disc, character, or custom counter style) of a list item element. Its default value
is a disc.
Syntax:
list-style-type: value;
The following value can be used:

CSS List Style Type Description

none No bullet or marker is shown for the list items.

circle Displays a hollow circle as the marker, commonly used for unordered lists.

decimal Numbers the list items sequentially, starting from 1 (e.g., 1, 2, 3…).

decimal-leading-zero Similar to decimal, but adds leading zeroes (e.g., 01, 02, 03…).

lower-roman Uses lowercase Roman numerals for list markers (e.g., i, ii, iii…).

upper-roman Shows uppercase Roman numerals as markers (e.g., I, II, III…).

lower-alpha Assigns lowercase alphabet letters (e.g., a, b, c…) for ordered list markers.

upper-alpha Marks ordered list items with uppercase letters (e.g., A, B, C…).

square Displays a solid square as the marker for unordered lists.

CSS Lists Examples


Example 1: Custom List Styles
This example demonstrates how to style lists using the list-style-type property with
the values set to square for unordered lists and lower-alpha for ordered lists,
providing custom markers for each list. These values give a unique appearance to
the list items.
HTML
<!DOCTYPE html>
<html>

<head>
<style>
ul.a {
list-style-type: square;
}

ol.c {
list-style-type: lower-alpha;
}
</style>
</head>

<body>
<h2>
GeeksforGeeks
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="b">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<p> Ordered Lists </p>
<ol class="c">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ol class="d">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</body>

</html>
Example 2: Using Custom Images for List Markers
This example illustrates how to use the list-style-image property to replace default
list markers with a custom image. In this case, the list items are styled with an
image URL, providing a unique visual representation for each bullet in an unordered
list.
HTML

<!DOCTYPE html>
<html>

<head>
<title> CSS list-style-image Property </title>
<style>
ul {
list-style-image:
url("https://contribute.geeksforgeeks.org/wp-content/uploads/listitem-
1.png");
}
</style>
</head>

<body>
<h1>
GeeksforGeeks
</h1>
<p> Unordered lists </p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>

</html>

Example 3: Styling Unordered Lists with Multiple Properties


This example showcases how to apply multiple CSS styling properties to an
unordered list. The list-style is set to square, while the background color is styled
with pink, and padding is added to create space around the list items, enhancing
the overall visual appeal.
HTML

<!DOCTYPE html>
<html>

<head>
<style>
ul.a {
list-style: square;
background: pink;
padding: 20px;
}
</style>
</head>

<body>
<h2>
GeeksforGeeks
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>

</html>

CSS Colors
CSS Color Names
In CSS, a color can be specified by using a predefined color name.

CSS Background Color


You can set the background color for HTML elements

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS Text Color


You can set the color of text:

Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS Border Color


You can set the color of borders:

Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS Color Values


In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and
HSLA values:

Same as color name "Tomato":

Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>


<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

CSS grouping selector is used to select multiple elements and style them
together. This reduces the code and extra effort to declare common styles for
each element. To group selectors, each selector is separated by a space.

In this article, we will be understanding how to apply grouping selectors in CSS.

Applying Grouping Selectors in CSS


We have applied grouping selector using element name and using id of the
element.

 We have used div and article element as grouping selector to


apply background-color, color and text-align properties to div and article
tag making it center aligned with green background and white text-color.
 We have also used id1 and id2 id selectors as group selectors to
apply padding and border to h4 and span element.

Example

Here is the complete example code implementing above mentioned steps to


apply grouping selectors.

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
<title>Grouping Selector in CSS</title>
<style>
div, article {
background-color: #04af2f;
color: white;
text-align: center;
font-size: 20px;
}
#id1, #id2 {
padding: 5px;
border: 2px solid black;
}
</style>
</head>
<body>
<h2>
Grouping Selector in CSS
</h2>
<p><strong>
In this example, both div and article
element have same background-color, text
color and aligned to center using
grouping selector.
</strong></p>
<div>
This is a div element
</div>
<br>
<article>
This is an article element.
</article>
<p><strong>
In this example, both h4 and span
element have same padding, and
border properties using grouping
selector.
</strong></p>
<h4 id="id1">
This h4 element has padding and border
properties.
</h4>
<span id="id2">
This span element also has padding and
border properties.
</span>
</body>
</html>

Use of some different display values:

p.ex1 {display: none;}


p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

Definition and Usage


The display property specifies the display behavior (the type of rendering box)
of an element.

The position property specifies the type of positioning method used for an
element (static, relative, fixed, absolute or sticky).

The position Property


The position property specifies the type of positioning method used for an
element.

There are five different position values:

 static
 relative
 fixed
 absolute
 sticky

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.
position: static;
HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right
properties.

An element with position: static; is not positioned in any special way; it is


always positioned according to the normal flow of the page:

This <div> element has position: static;

Here is the CSS that is used:

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

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

Setting the top, right, bottom, and left properties of a relatively-positioned


element will cause it to be adjusted away from its normal position. Other
content will not be adjusted to fit into any gap left by the element.

This <div> element has position: relative;

Here is the CSS that is used:

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

CSS Align
Last Updated : 23 Jul, 2024



CSS alignment techniques are essential for positioning items and


distributing space between content. These techniques include
horizontal and vertical alignment using various properties such as
margin: auto, position: absolute, text-align, and padding. This article
covers multiple methods to achieve alignment in CSS.
Methods of Aligning in CSS:
1. Center Align Using Margin:
The margin: auto property centers a block element horizontally.
Note: Using margin: auto will not work in IE8 unless a !DOCTYPE is
declared.
Example 1: This example describes the CSS align using the margin:
auto property.
HTML
<!DOCTYPE html>
<html>

<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>

<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Center Align Elements</h2>
<div class="center">
This is div element on which
margin auto is used to horizontally
align it into center
</div>
</body>

</html>

2. Align Using Position:


The position: absolute property aligns elements relative to their
containing block.
Note: The position properties top, bottom, left, and right will not
work unless the position property is set first.
Example 2: This example describes the CSS align using
the position: absolute; property.
HTML
<!DOCTYPE html>
<html>

<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>

<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Right Align</h2>
<div class="right">
<p>
Absolute positioned elements
can overlap other elements.
</p>
</div>
</body>

</html>

3. Text Align:
The text-align: center property centers text within its container
Example 3: This example describes the CSS align using the text-
align: center; property.
HTML
<!DOCTYPE html>
<html>

<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>

<body>
<h1 style="color:green;
text-align: center;">
GeeksforGeeks
</h1>
<h2>BOTH TEXTS ARE AT CENTER</h2>
<div class="center">
<p>This text is centered.</p>
</div>
</body>

</html>

4. Vertical Align Using Padding:


The padding property can be used to center elements vertically.
Example 4: This example describes the CSS align using
the padding property.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>

<body>
<h1 style="color:green;
text-align:center;">
GeeksforGeeks
</h1>
<h2>Center Vertically</h2>
<div class="center">
<p>This is vertically centered.</p>
</div>
</body>

</html>

5. Combined Vertical and Horizontal Align:


Combining padding and text-align: center to center
elements both vertically and horizontally.
Example 5: This example describes the CSS align using the
padding & text-align properties.
HTML
<!DOCTYPE html>
<html>

<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>

<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
Here we use padding and
text-align to center the
div element vertically
and horizontally:
</p>

<div class="center">
<p>
This text is vertically
and horizontally centered.
</p>
</div>
</body>

</html>
Output:

CSS alignment techniques provide a range of options for positioning


elements and managing the space between them. Understanding
and using properties like margin, position, text-align,
and padding effectively can significantly enhance the layout and
design of web pages.

CSS Pseudo-classes

What are Pseudo-classes?


A pseudo-class is used to define a special state of an element.

For example, it can be used to:

 Style an element when a user moves the mouse over it


 Style visited and unvisited links differently
 Style an element when it gets focus
 Style valid/invalid/required/optional form element
Syntax
The syntax of pseudo-classes:

selector:pseudo-class {
property: value;
}

Anchor Pseudo-classes
Links can be displayed in different ways:

Example
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */


a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}
Navigation Bars
Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation
bars.

Navigation Bar = List of Links


A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

A navigation bar is basically a list of links, so using the <ul> and <li> elements
makes perfect sense:

Example
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

Image Sprites
An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates
multiple server requests.

Using image sprites will reduce the number of server requests and save
bandwidth.

Image Sprites - Simple Example


Instead of using three separate images, we use this single image
("img_navsprites.gif"):

With CSS, we can show just the part of the image we need.

In the following example the CSS specifies which part of the "img_navsprites.gif"
image to show:

Example
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}

Example explained:

 <img id="home" src="img_trans.gif"> - Only defines a small


transparent image because the src attribute cannot be empty. The
displayed image will be the background image we specify in CSS
 width: 46px; height: 44px; - Defines the portion of the image we
want to use
 background: url(img_navsprites.gif) 0 0; - Defines the
background image and its position (left 0px, top 0px)

This is the easiest way to use image sprites, now we want to expand it by using
links and hover effects.

Image Sprites - Create a Navigation


List
We want to use the sprite image ("img_navsprites.gif") to create a navigation
list.
We will use an HTML list, because it can be a link and also supports a
background image:

Example
#navlist {
position: relative;
}

#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

#navlist li, #navlist a {


height: 44px;
display: block;
}

#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}

#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}

#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}

You might also like