UNIT-2

HTML FORMS

FORMS: web form or HTML form on a web page allows a user to enter data that is sent to

a server for processing.

 The HTML <form> element is used to create an HTML form for user input:

 The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.

FORM TAG: This tag is used to prepare the form in the web – browser. The beginning and

ending tags for form creation are < FORM > and </ FORM >. The Syntax is

FORM ATTRIBUTES
All of the values assigned to items between these tags are uploaded to the server when a

user submits a form. It contains the following attributes.

1. Action: The form tags inform the web browser location of the server to which the

form input is to be submitted. The value is either URL or any HTML form or file.

2. Method: It can specify the protocol to transfer the set of values from the web browser

to the web server. It contains the following two values.

 Get: All input values at a time from the web browser to the web server all input

values are placed at the end of the URL. The URL and the set of values are separated

using the symbol ‘?’ The values are separated using the symbol ‘&’.

 Post: The post value transfers one value at a time from the web browser to the web

server it user the proto call HTTP to transfer the values.

***
 FORM ELEMENTS

An HTML file is made of elements. These elements are responsible for

creating web pages and define content in that webpage. An element in HTML usually consist
of a start tag <tag name>, close tag </tag name> and content inserted between
them. Technically, an element is a collection of start tag, attributes, end tag.

The HTML <form> element can contain one or more of the following form elements:
1. <input> 2. <label> 3. <select>
4. <textarea> 5. <button> 6. <option>

1) THE <INPUT> ELEMENT

The HTML <input> element is the most used form element. An <input> element can be
displayed in many ways, depending on the type attribute. Here are some examples:

Syntax: < Input type = “type” Name = “Value’’ Size =“Value’’

Maxlength =“Value’’ Value =“Value’’>

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

The Forms using checkboxes, radio buttons, input buttons and text fields. The forms allow

the user to create interactive web pages.

2) THE <BUTTON > TAG

 The <button> tag defines a clickable button.
 Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.).
 That is not possible with a button created with the <input> element!
 Always specify the type attribute for a <button> element, to tell browsers what type of button it is.
 Syntax : <button type="button">Click Me!</button>

 Example : <button type="button" Onclick="alert('Hello World!')">Click Me!</button>

3) THE <LABEL> ELEMENT
 The <label> element defines a label for several form elements.
 The <label> element is useful for screen-reader users, because the screen-reader will
read out loud the label when the user focuses on the input element.
 The <label> element also help users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.
 The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.

4) SELECT TAG or OPTION TAG:

Select tag is used to specify the list of items, the user can be choose

anyone item from the list of items are displayed using the dropdown list or popup menu.

The select tag is

Select tags contain the following set of attributes:

1. Name: It is used to specify the variable name to transfer the values to the web server.

2. Size: It specifies how many numbers of options are displayed on the screen.

3. Multiple: It allows the user to select more than. One option (continuous options) In

this case the select tag behaves like a group of check boxes. An option tag contains the

following attribute. 1. Value 2. Selected.

 Value: It allows the user to specify the content to be assigned when any option is

selected for example. < Option value = H20 > Water.

 Selected: This attribute is used to pre select an item.

5) TEXT AREA TAG:

The text area tag can specify a multiple row text field this is useful to receive comments

are sharp messages. It contains the following set of attributes.

 Name: This attributes is used to specify the variable name for the text area.

 Cols and rows: These attributes can specify the size of the text area.

 Maxlength: It can specify the maximum number of characters a user can enter into

the text area.

 Wrap: This attributes is used to type the text continuously without hitting the return

key. The text automatically wraps at the end of the field.

Ex: < Text area cols = 15 Rows = 10 Maxlength = 1000 wrap>

It can display comments or short message.

.............................

.............................

< /Text area >

HTML ATTRIBUTES
An attribute is used to define the characteristics of an HTML element and is placed
inside the element's opening tag. All attributes are made up of two parts − a name and
a value. Attribute names and attribute values are case-insensitive.

 The name is the property you want to set. For example, the paragraph <p> element in
the example carries an attribute whose name is align, which you can use to indicate the
alignment of paragraph on the page.
 The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left,
center and right.

HTML GRAPHICS
Graphics are representations used to make web-page or applications visually
appealing and also for improving user experience and user interaction.
Some examples of graphics are photographs, flowcharts, bar graphs, maps, engineering
drawings, constructional blueprints, etc.
The following technologies are used in web graphics with HTML5 Canvas API, WebCGM,
CSS, SVG, PNG, JPG, etc.
Canvas API:
 Has no DOM and uses vector based methods to create objects, graphics and shapes.
 Canvas API applications can be standalone or integrated with HTML or SVG.
 Widely used for games
 Client-side scripting with native modern browser support.
 This can write in body section.
Example:
<body>
<canvas id="canvas1" width="400" height="200"
style="border:2px solid green; border-radius:35px">
Your browser does not support the canvas element.
</canvas>
</body>

WebCGM (Web Computer Graphics Metafile)

 Very similar to SVG when it comes to graphical features.
 CGM is the ISO standard for vector image definition.
 Used in aeronautics, automotive engineering, technical illustration, etc.
 They are not widely used traditionally. More modern approaches have been to use SVGs,
Canvas, etc.

SVG (Scalable Vector Graphics)

 These are images created by a markup language that are reusable, simple, high-quality
standalone images that can be exported and imported as well.
 They are cross-browser friendly and can be used both on the client-side and server-side
of the application.
 They can be manipulated to create animations, hybrid images, etc by editing the
markup language or by editing using a style sheet.
 Files come with a .svg extension.
<svg width="550" height="50" viewBox="0055050"
fill="green" xmlns="http://www.kcdc.org">
<text x="0" y="20">I love India </text>
</svg>

PNG (Portable Network Graphics)

 They are portable, static and lossless with proper indexed-color control.
 Files come with a .png or .PNG extension.
 Cross-browser friendly and have streaming capabilities.
Example: <img src="https://kcdc/divakar/kclogo.png">
JPG or JPEG (Joint Photographic Experts Group)
 compressed with an adjustable degree of compression.
 Used mainly with digital photography and can achieve a compression of 10:1.
 Files come with a .jpg or jpeg extension.
Example: <img src= "https://kcdc/vamsi/logo.jpg">

CSS (Cascading Style Sheets):

 This is a type of language mainly used for designing and HTML and SVG elements by
using code.
 They are scalable and give more space for creativity to the user.
 Files usually come with a .css extension.
Example: <head> <link rel="stylesheet" href="styles.css"></link> </head>

CASCADING STYLE SHEETS (CSS)

Introduction:

 CSS is the language we use to style a Web page.

 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen, paper, or in other

media

 CSS saves a lot of work. It can control the layout of multiple web pages all at once

 External style sheets are stored in CSS files

 CSS is the language we use to style an HTML document.

 CSS describes how HTML elements should be displayed.

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

Example
In this example all <p> elements will
be center-aligned, with a red text
color:
p{
color: red;
text-align: center;
}
 The selector points to the HTML element you want to style.

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

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

 Multiple CSS declarations are separated with semicolons, and declaration blocks are

surrounded by curly braces.

CSS COMMENTS
 CSS comments are not displayed in the browser, but they can help document your

source code.

 Comments are used to explain the code, and may help when you edit the source code

at a later date.

 Comments are ignored by browsers.

 A CSS comment is placed inside the <style> element, and starts with /* and ends

with */

Example

/* This is a single-line comment */

p{

color: red;

CSS COLOR

 Colors are specified using predefined colour names, or RGB, HEX, HSL, RGBA, HSLA

values.

 In CSS, a color can be specified by using a predefined color name like

 We can you use colors for text and background for HTML elements.

Example:
For background : <h1 style="background-color:DodgerBlue;">Hello World</h1>
For text : <h1 style="color:Tomato;">Hello World</h1>
RGB Value

 An RGB color value represents RED, GREEN, and BLUE light sources.

 In CSS, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

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

and 255.

 For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value

(255) and the others are set to 0.

HEX Colors

 A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and

BB (blue) hexadecimal integers specify the components of the color.

 In CSS, a color can be specified using a hexadecimal value in the form: #rrggbb

 Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff

(same as decimal 0-255).

 For example, #ff0000 is displayed as red, because red is set to its highest value (ff)

and the others are set to the lowest value (00).

HSL Value

 HSL stands for hue, saturation, and lightness.

 In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue, saturation, lightness)

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

RGBA Value

 RGBA color values are an extension of RGB color values with an alpha channel -

which specifies the opacity for a color.

 An RGBA color value is specified with: rgba(red, green, blue, alpha)

 The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not

transparent at all).
HSLA Color Values

 HSLA color values are an extension of HSL color values with an Alpha channel -

which specifies the opacity for a color.

 An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha)

 The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not

transparent at all).

BACKGROUNDS
 The CSS background properties are used to add background effects for elements.

 The background-color property specifies the background color of an element.

Example: The background color of a page is set like this:

body {
background-color: lightblue;
}
With CSS, a color is most often specified by:

 a valid color name - like "red" Example: Here, the <h1>, <p>, and <div>
 a HEX value - like "#ff0000" elements will
 an RGB value - like have different background colors:
"rgb(255,0,0)" h1 { background-color: green;}
div { background-color: lightblue;}
p { background-color: yellow; }

CSS BORDERS
The border properties allow you to specify how the border of the box representing an

element should look. There are three properties of a border you can change

border-color border-style border-width

Now, we will see how to use these properties with examples.

1. Border-color Property: The border-color property allows you to change the color of

the border surrounding an element. You can individually change the color of the bottom,

left, top and right sides of an element's border using the properties − border-bottom-color,

border-top-color, border-left-color, border-right-color.

Example: <body>
<html>
<p class = "example1">
<head>
This example is showing all borders
<style type = "text/css">
in different colors.
p.example1 {
</p>
border:1px solid;
</body>
border-bottom-color:#009900; /* Green */
</html>
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
</style>
</head>

2. Border-style Property: The border-style property allows you to select one of the

following styles of border – none, solid, dotted, dashed, double, groove, ridge, inset, outset,

hidden..

You can individually change the style of the bottom, left, top, and right borders of an

element using the following properties − border-bottom-style, border-top-style, border-

left-style, border-right-style.

The following example shows all these border styles –

<p style = "border-width:4px; border-style:none;">

3. Border-width Property: The border-width property allows you to set the width of an

element borders. You can individually change the width of the bottom, top, left, and right

borders of an element using the following properties − border-bottom-width, border-top-

width, border-left-width, border-right-width.

The following example shows all these border width –

<p style = "border-width:4px; border-style:solid;">

****
 CSS -MARGINS
The margin property defines the space around an HTML element. It is possible
to use negative values to overlap content. The values of the margin property are not
inherited by the child elements. We have the following properties to set an element margin.

margin, margin-bottom, margin-top, margin-left, margin-right.

margin Property: The margin property allows you set all of the properties for the four
margins in one declaration. Here is the syntax to set margin around a paragraph –
<p style = "margin: 15px; border:1px solid black;">

all four margins will be 15px </p>

margin-bottom Property: The margin-bottom property allows you set bottom margin of
an element. It can have a value in length, % or auto.
<p style = "margin-bottom: 15px; border:1px solid black;">

This is a paragraph with a specified bottom margin </p>

margin-top Property: The margin-top property allows you set top margin of an element.
It can have a value in length, % or auto.
<p style = "margin-top: 15px; border:1px solid black;">

This is a paragraph with a specified top margin </p>

margin-left Property: The margin-left property allows you set left margin of an element.
It can have a value in length, % or auto. Here is an example –
<p style = "margin-left: 15px; border:1px solid black;">

This is a paragraph with a specified left margin </p>

The margin-right Property: The margin-right property allows you set right margin of an
element. It can have a value in length, % or auto. Here is an example –
<p style = "margin-right: 15px; border:1px solid black;">

This is a paragraph with a specified right margin </p>

***
 CSS PADDING
The padding property allows you to specify how much space should appear between the

content of an element and its border. The value of this attribute should be either a length, a

percentage, or the word inherit. The padding on each side of the box using the following

properties –

padding-bottom, padding-top, padding-left, padding-right

padding-bottom Property: The padding-bottom property sets the bottom padding (space)
of an element. This can take a value in terms of length of %. Here is an example −

<p style = "padding-bottom: 15px; border:1px solid black;">

This is a paragraph with a specified bottom padding </p>

padding-top Property The padding-top property sets the top padding (space) of an
element. This can take a value in terms of length of %. Here is an example −

<p style = "padding-top: 15px; border:1px solid black;">

This is a paragraph with a specified top padding </p>

padding-left Property The padding-left property sets the left padding (space) of an
element. This can take a value in terms of length of %. Here is an example −

<p style = "padding-left: 15px; border:1px solid black;">

This is a paragraph with a specified left padding </p>

padding-right Property The padding-right property sets the right padding (space) of an

element. This can take a value in terms of length of %. Here is an example −

<p style = "padding-right: 15px; border:1px solid black;">

This is a paragraph with a specified right padding </p>

Padding Property: The padding property sets the left, right, top and bottom padding

(space) of an element. This can take a value in terms of length of %. Here is an example −

<p style = "padding: 15px; border:1px solid black;">

all four padding will be 15px </p>

****
 CSS HEIGHT, WIDTH & MAX-WIDTH

 The CSS height and width properties are used to set the height and width of an
element.
 The CSS max-width property is used to set the maximum width of an element.
 This element has a height of 50 pixels and a width of 100%.
 CSS Setting height and width
 The height and width properties are used to set the height and width of an element.
 The height and width properties do not include padding, borders, or margins. It sets
the height/width of the area inside the padding, border, and margin of the element.

height and width Values

The height and width properties may have the following values:
 auto - This is default. The browser calculates the height and width
 length - Defines the height/width in px, cm etc.
 % - Defines the height/width in percent of the containing block
 initial - Sets the height/width to its default value
 inherit - The height/width will be inherited from its parent value
Set the height and width of a <div> element:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}

CSS TEXT
CSS Text is a module of CSS that defines how to perform text manipulation, like line

breaking, justification and alignment, white space handling, and text transformation.

The following are the formatting of CSS text-

1.Text Color: The following example demonstrates how to set the text color. Possible value

could be any color name in any valid format.

<p style = "color:red;"> This text will be written in red. </p>

2.Text Direction: The following example demonstrates how to set the direction of a text.

Possible values are ltr or rtl.

<p style = "direction:rtl;"> This text will be rendered from right to left </p>
3.Space between Characters: The following example demonstrates how to set the space

between characters. Possible values are normal or a number specifying space.

<p style = "letter-spacing:5px;"> This text is having space between letters. </p>

4.Space between Words: The following example demonstrates how to set the space between

words. Possible values are normal or a number specifying space.

<p style = "word-spacing:5px;"> This text is having space between words. </p>

5.Text Indent: The following example demonstrates how to indent the first line of a

paragraph. Possible values are % or a number specifying indent space.

<p style = "text-indent:1cm;"> this is done by CSS text-indent property. </p>

6.Text Alignment: The following example demonstrates how to align a text. Possible values

are left, right, center, justify.

<p style = "text-align:right;"> This will be right aligned. </p>

7. Decorating the Text : The following example demonstrates how to decorate a text.

Possible values are none, underline, overline, line-through, blink.

<p style = "text-decoration:underline;"> This will be underlined </p>

8.Text Cases: The following example demonstrates how to set the cases for a text. Possible

values are none, capitalize, uppercase, lowercase.

<p style = "text-transform:capitalize;"> This will be capitalized </p>

9.White Space between Text: The following example demonstrates how white space inside an

element is handled. Possible values are normal, pre, nowrap.

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

This text has a line break and the white-space pre setting </p>

10.Text Shadow: The following example demonstrates how to set the shadow around a text.

This may not be supported by all the browsers.

<p style = "text-shadow:4px 4px 8px blue;">

If your browser supports the CSS text-shadow property </p>

***
 CSS FONT
CSS font properties allow us to modify the appearance of text. The following properties help

us style text.

 font-family: This property is used to set the font face for an element.

 font-size: The font-size property sets the size of the font.

 font-stretch: Some fonts have additional faces like condensed, bold, etc. The font-

stretch property is used to specify these.

 font-style: To italicize the text by an angle, the font-style property is used.

 font-variant: font-variant allows us to specify whether an element should be

displayed in small caps or not.

 font-weight: The boldness of characters is specified by the font-weight property. We

can also use the font property which is a shorthand for all the above properties.

Syntax
Selector {
font:
/*value*/
}
The following examples illustrate CSS font property −

Example #a { font-style: normal; }

<!DOCTYPE html> #b { font-style: italic; }
<html> #c { font-style: oblique 40deg;
<head> font-family: "Harlow Solid Italic";
<style> }
div { </style> </head>
margin: 3px; <body>
float: left; <div id="a"> Normal Demo</div>
font-family: "Matura MT Script <div id="b"> Italic Demo</div>
Capitals"; <div id="c"> Oblique Demo</div>
font-size: 200%; </body> </html>
}

****
 CSS ICONS
An icon is a symbol that is used to represent a specific action or a capability on a webpage.

Icons are used in documents as well as applications and they can be either selectable or

non-selectable. For example, the images that we see on the buttons of an application are all

icons and these buttons are selectable. Similarly, when we use an icon as a company logo, it

is normally non-selectable.

In Windows environment, if we mute the system volume, it will be represented with the

help of an icon, as shown below.

Using web icons, we can represent a loading page, a disabled option, a link, a redirection,

etc. These icons can be flipped, rotated, resized, bordered, inverted, and colored.

Icon Fonts: Icon Fonts contain symbols and glyphs. Once you load a desired font, you can

use any of the icons provided by that font using the class name of the icon. We can also

apply different colors to the icons and resize them using the CSS properties. There are

several icon libraries (fonts) that provide icons. There are three main fonts, namely −

 Font Awesome

 Bootstrap Glyph icons

 Google's Material Icons

Font Awesome Icons : To use the Font Awesome icons, go to fontawesome.com, sign in, and

get a code to add in the <head> section of your HTML page:

<script src=https://jbcollege.com/yourcode.js crossorigin="anonymous"></script>

Bootstrap Icons: To use the Bootstrap glyphicons, add the following line inside

the <head> section of your HTML page:

<link rel="stylesheet" href="https://jbcollege.com/bootstrap/3.3.7/css/bootstrap.min.css">

Google Icons: To use the Google icons, add the following line inside the <head> section of your

HTML page:
<link rel="stylesheet" href="https://jbcollege.com/icon?family=Material+Icons">

****
 CSS TABLES
A table in CSS is used to apply the various styling properties to the HTML

Table elements to arrange the data in rows and columns, or possibly in a more complex

structure in a properly organized manner. Tables are widely used in communication,

research, and data analysis. The table-layout property in CSS can be utilized to display the

layout of the table. This property is basically used to sets the algorithm that is used to

layout <table>cells, rows, and columns.

CSS Table Properties:

Border: It is used for specifying borders in the table.

Syntax: border: table_width table_color;

Border Collapse: The border-collapse property tells us whether the browser should control

the appearance of the adjacent borders that touch each other or whether each cell should

maintain its style.

Syntax: border-collapse: collapse/separate;

Border Spacing: This property specifies the space between the borders of the adjacent cells.

Syntax: border-spacing: value;

Caption Side: Caption side property is used for controlling the placement of caption in the

table. By default, captions are placed above the table.

Syntax: caption-side: top/bottom;

Empty cells: This property specifies whether or not to display borders and background on

empty cells in a table. Syntax: empty-cells:show/hide;

Table layout: The table layout property is used to set up the layout algorithm used for the

table. Syntax: table-layout:auto/fixed;

****
 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 unordered 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. 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.

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;

CSS list properties allow us to:

1. Set the distance between the text and the marker in the list.

2. Specify an image for the marker instead of using the number or bullet point.

3. Control the marker appearance and shape.

4. Place the marker outside or inside the box that contains the list items.

5. Set the background colors to list items and lists.

The CSS properties to style the lists are given as follows:

 list-style-type: This property is responsible for controlling the appearance and shape

of the marker.

 list-style-image: It sets an image for the marker instead of the number or a bullet

point.

 list-style-position: It specifies the position of the marker.

 list-style: It is the shorthand property of the above properties.

 marker-offset: It is used to specify the distance between the text and the marker. It

is unsupported in IE6 or Netscape 7.

****
 CSS POSITION
The CSS position property is used to set position for an element. It is also used to

place an element behind another and also useful for scripted animation effect.

You can position an element using the top, bottom, left and right properties. These

properties can be used only after position property is set first. A position element's

computed position property is relative, absolute, fixed or sticky.

Let's have a look at following CSS positioning:

 CSS Static Positioning

 CSS Fixed Positioning

 CSS Relative Positioning

 CSS Absolute Positioning

1) CSS Static Positioning: This is a by default position for HTML elements. It always

positions an element according to the normal flow of the page. It is not affected by the top,

bottom, left and right properties.

2) CSS Fixed Positioning: The fixed positioning property helps to put the text fixed on the

browser. This fixed test is positioned relative to the browser window, and doesn't move even

you scroll the window.

<!DOCTYPE html> </style>

<html> <head> </head>
<style> <body>
p.pos_fixed { <p>Some text...</p><p>Some text...</p><p>Some text...</p
position: fixed; <p class="pos_fixed">This is the fix positioned text.</p>
top: 50px; </body>
right: 5px; </html>
color: blue;
}

3) CSS Relative Positioning: The relative positioning property is used to set the element

relative to its normal position.

4) CSS Absolute Positioning: The absolute positioning is used to position an element relative

to the first parent element that has a position other than static. If no such element is found,

the containing block is HTML. With the absolute positioning, you can place an element

anywhere on a page

.***
 CSS OVERFLOW
The CSS overflow property specifies how to handle the content when it overflows its block

level container.

 We know that every single element on a page is a rectangular box and the size,

positioning and behavior of these boxes are controlled via CSS.

 Let's take an example: If you don't set the height of the box, it will grow as large as the

content. But if you set a specific height or width of the box and the content inside

cannot fit then what will happen.

 The CSS overflow property is used to overcome this problem. It specifies whether to clip

content, render scroll bars, or just display content.

CSS Overflow property values

Value Description
visible It specifies that overflow is not clipped. it renders outside the element's box. this
is a default value.
hidden It specifies that the overflow is clipped, and rest of the content will be invisible.
scroll It specifies that the overflow is clipped, and a scroll bar is used to see the rest of
the content.
auto It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the
content.
inherit It inherits the property from its parent element.
initial It is used to set the property to its initial value.

div.scroll { div.hidden {
background- background-color: #00FF00;
color: #00ffff; width: 100px;
width: 100px; height: 170px;
height: 100px; overflow: hidden;
overflow: scroll; }
}

***
 CSS FLOAT
The CSS float property is a positioning property. It is used to push an element to the

left or right, allowing other element to wrap around it. It is generally used with
images and layouts.

The float property causes an element to be moved to one side of the parent elements

content area, which allows other content to flow around it.

Possible Values

left − The element is floated to the left side of its parent element's content area.

right − The element is floated to the right side of its parent element's content area.

none − The element is not floated.

CSS COMBINATORS
1. CSS combinators are explaining the relationship between two selectors.

2. CSS selectors are the patterns used to select the elements for style purpose.

3. A CSS selector can be a simple selector or a complex selector consisting of

more than one selector connected using combinators.

4. There are four types of combinators available in CSS which are discussed below:

5. CSS Combinators clarifies the relationship between two selectors, whereas the

selectors in CSS are used to select the content for styling.

6. There can be more than one simple selector in a CSS selector, and between

these selectors, we can include a combinator.

7. Combinators combine the selectors to provide them a useful relationship and the

position of content in the document.

8. There are four types of Combinators in CSS that are listed as follows:

General Sibling Selector (~): It uses the tlide (~) sign as the separator between the

elements. It selects the elements that follow the elements of first selector, and both of

them are the children of the same parent. It can be used for selecting the group of

elements that share the common parent element. It is useful when we have to select

the siblings of an element even if they are not adjacent directly.

Syntax div ~ p {
element ~ element { /*style properties*/
/*style properties*/ } }
Adjacent Sibling Selector (+): It uses the plus (+) sign as the separator between the

elements. It matches the second element only when the element immediately follows

the first element, and both of them are the children of the same parent.

 This sibling selector selects the adjacent element, or we can say that the element

which is next to the specified tag. It only selects the element which is just next to

the specified first element.

Syntax p+p{
element + element { /*style properties*/
/*style properties*/ }
}

Child Selector (>): It uses the greater than (>) sign as the separator between the

elements. It selects the direct descendant of the parent. This combinator only matches

the elements that are the immediate child in the document tree. It is stricter as

compared to the descendant selector because it selects the second selector only when

the first selector is its parent.

 The parent element must always be placed at the left of the ">". If we remove the

greater than (>) symbol that designates this as a child combinator, then it will

become the descendant selector.

Syntax
element > element {
/*style properties*/
}

Descendant Selector (space): It uses the space as the separator between the elements.

The CSS descendant selector is used to match the descendant elements of a particular

element and represent it using a single space. The word descendant indicates nested

anywhere in the DOM tree. It can be a direct child or deeper than five levels, but it

will still be referred to as a descendant.

It combines two selectors in which the first selector represents an ancestor (parent,

parent's parent, etc.), and the second selector represents descendants. The elements

matched by the second selector are selected if they have an ancestor element that

matches the first selector.

Syntax
element element {
/*style properties*/
}
****

CSS - OPACITY
 The CSS opacity property is used to specify the transparency of an element.

 It specifies the clarity of the image.

 The opacity in CSS is the property of an element that describes the

transparency of the element.

 It is the opposite of transparency & represents the degree to which the

content will be hidden behind an element.

 Image Opacity: The opacity property is used in the image to describe the

transparency of the image.

 The value of opacity lies between 0.0 to 1.0 where a low value represents high

transparency and a high value represents low transparency. The percentage of

opacity is calculated as Opacity% = Opacity * 100.

Example: This example describes the opacity property by applying it to the image.

<html> <head> font-weight: bold;

<title>Opacity property</title> margin-bottom: 5px; }
<style> .opacity { text-align: center; }
.forest { opacity: 0.5; } </style>
p{ </head>
font-size: 25px;
 CSS TOOLTIPS
CSS Tooltips are a great way to display extra information about something when the

user moves the mouse cursor over an element. By using tooltips, you can display the

position of the tooltip information in four ways:

1. Top Tooltip: It will be displayed on the top of the element.

2. Bottom Tooltip: It will be displayed on the bottom of the element.

3. Left Tooltip: It will be displayed on the left side of the element.

4. Right Tooltip: It will be displayed on the right side of the element.

Example:

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

CSS IMAGES
The Images are an important part of any web application. CSS helps us to

control the display of images in web applications.

There are multiple CSS properties such as Border property, height property,

width property, etc. that helps us to style an image.

Example

<div class = "KCGallery">

<a target = "_blank" href="https://www.jbcollege.com/dlsimage.jpg">

<img src = "https://www.jbcollege.com/siri_image.jpg" alt="3D Animation Tutorial"

width="600" height="500"> </a> </div>

***

CSS -COUNTERS
CSS counters are "variables" maintained by CSS whose values can be incremented by

CSS rules (to track how many times they are used). Counters let you adjust the

appearance of content based on its placement in the document.

Automatic Numbering With Counters: CSS counters are like "variables". The variable

values can be incremented by CSS rules (which will track how many times they are

used).
To work with CSS counters we will use the following properties:

 counter-reset - Creates or resets a counter

 counter-increment - Increments a counter value

 content - Inserts generated content

 counter() or counters() function - Adds the value of a counter to an element

To use a CSS counter, it must first be created with counter-reset.

The following example creates a counter for the page (in the body selector), then

increments the counter value for each <h2> element and adds "Section <value of the

counter>:" to the beginning of each <h2> element:

Example

body { counter-reset: section; }

h2::before { counter-increment: section;

content: "Section " counter(section) ": "; }

RESPONSIVE WEB DESIGN

 Responsive web design makes your web page look good on all devices.
 Responsive web design uses only HTML and CSS.
 Responsive web design is not a program or a JavaScript.
 Web pages can be viewed using many different devices: desktops, tablets, and
phones. Your web page should look good, and be easy to use, regardless of the
device.
 Web pages should not leave out information to fit smaller devices, but rather
adapt its content to fit any device:

Desktop Tablet phone

It is called responsive web design when you use CSS and HTML to resize, hide,

shrink, enlarge, or move the content to make it look good on any screen.

End of UNIT-2