WIDT UNIT-II

UNIT-II
HTML forms: HTML form elements, input types, input attributes, HTML5, HTML
graphics, HTML media – video, audio, plug INS, you tube.
HTML API’S: Geo location, Drag/drop, local storage, HTML SSE.
CSS: CSS home, introduction, syntax, colours, back ground, borders, margins,
padding, height/width, text, fonts, icons, tables, lists, position, over flow, float,
CSS combinators, pseudo class, pseudo elements, opacity, tool tips, image gallery,
CSS forms, CSS counters, CSS responsive.
1) HTML Forms:
This element is used to create a form on html page. Which is a logical grouping of controls available on
the page. Form contains controls such as text fields, email field, password fields, checkboxes, button,
radio buttons, submit button, menus etc.
Attribute of form tag
 name: are used for provide a name to the form
 action: are used for specify the page to which the data of current page has to be submitted.
 method: are used for specify which method to use for submitting this page to server (get
or post).
Form tag are used for get the information from user, for example when you fill the registration form
lot of information given by use and these information server get from web page using form element.
Syntax of form tag
Syntax
<form>
//input controls e.g. textfield, checkbox, button, radiobutton
</form>
HTML Form Elements
The HTML <form> element can contain one or more of the following form elements:
 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>
<input> Element
One of the most used form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.
<html>
<body>
<h2>The input Element</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<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 focus 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.
<select> Element
The <select> element defines a drop-down list:
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
Visible Values:
Use the size attribute to specify the number of visible values:
Use the multiple attribute to allow the user to select more than one value:
<html>
<body>
<h2>Allow Multiple Selections</h2>
<p>Use the multiple attribute to allow the user to select more than one value.</p>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
</body>
</html>
<textarea> Element
The <textarea> element defines a multi-line input field (a text area):
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.

<html>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>
</body>
</html>
<button> Element
The <button> element defines a clickable button:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.

<html>
<body>
<fieldset>
<legend>Personalia:</legend>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</fieldset>
</form>
</body>
</html>
2) HTML Input Types
 <input type="text">
 <input type="password">
 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="time">
 <input type="url">
 <input type="week">
Input Type Text
<input type="text"> defines a single-line text input field:
<html>
<body>
<h2>Text field</h2>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
</form>
</body>
</html>
Input Type Password
<input type="password"> defines a password field:
<html>
<body>
<h2>Password field</h2>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
</form>
</body>
</html>
Input Type Submit
<input type="submit"> defines a button for submitting form data to a form-handler.
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default values:
Input Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
<html>
<body>
<h2>Radio Buttons</h2>
<p>The <strong>input type="radio"</strong> defines a radio button:</p>
<p>Choose your favorite Web language:</p>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
</form>
</body>
</html>
Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
</form>
</body>
</html>
Input Type Button
<input type="button"> defines a button:
Input Type Color
The <input type="color"> is used for input fields that should contain a color.
Input Type Date
The <input type="date"> is used for input fields that should contain a date.
Input Type Email
The <input type="email"> is used for input fields that should contain an e-mail address.
Input Type File
The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
3) Input Attributes
value Attribute
The input value attribute specifies an initial value for an input field:
readonly Attribute
The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text
from it).
The value of a read-only input field will be sent when submitting the form!
disabled Attribute
The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
size Attribute
The input size attribute specifies the visible width, in characters, of an input field.
The default value for size is 20.
maxlength Attribute
The input maxlength attribute specifies the maximum number of characters allowed in an input field.
min and max Attributes
The input min and max attributes specify the minimum and maximum values for an input field.
The min and max attributes work with the following input types: number, range, date, datetime-local,
month, time and week.
pattern Attribute
The input pattern attribute specifies a regular expression that the input field's value is checked against,
when the form is submitted.
The pattern attribute works with the following input types: text, date, search, url, tel, email, and
password.
required Attribute
The input required attribute specifies that an input field must be filled out before submitting the form.
The required attribute works with the following input types: text, search, url, tel, email, password,
date pickers, number, checkbox, radio, and file.
autofocus Attribute
The input autofocus attribute specifies that an input field should automatically get focus when the page
loads.
autocomplete Attribute
The input autocomplete attribute specifies whether a form or an input field should have autocomplete
on or off.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser
should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel,
email, password, datepickers, range, and color.
4) HTML Graphics
HTML Canvas Graphics
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the
graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to
define the size of the canvas. To add a border, use the style attribute.
Add a JavaScript
After creating the rectangular canvas area, you must add a JavaScript to do the drawing.
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html
HTML SVG Graphics
 SVG stands for Scalable Vector Graphics
 SVG is used to define graphics for the Web
 SVG is a W3C recommendation
HTML <svg> Element
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
SVG Star
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
5) HTML Multimedia
Multimedia comes in many different formats. It can be almost anything you can hear or see, like images,
music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
HTML Video
The HTML <video> element is used to show a video on a web page.
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the page
might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser may choose from.
The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not support
the <video> element.
HTML Audio
<audio> Element
To play an audio file in HTML, use the <audio> element:
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
HTML Plug-ins
Plug-ins are computer programs that extend the standard functionality of the browser.
Plug-ins
Plug-ins were designed to be used for many different purposes:
 To run Java applets
 To run Microsoft ActiveX controls
 To display Flash movies
 To display maps
 To scan for viruses
 To verify a bank id
<object> Element
The <object> element is supported by all browsers.
The <object> element defines an embedded object within an HTML document.
It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players) in web pages, but
can also be used to include HTML in HTML:
<html>
<body>
<object data="audi.jpeg"></object>
</body>
</html>
<embed> Element
The <embed> element is supported in all major browsers.
The <embed> element also defines an embedded object within an HTML document.
Web browsers have supported the <embed> element for a long time. However, it has not been a part
of the HTML specification before HTML5.
<html>
<body>
<embed src="audi.jpeg">
</body>
</html>
HTML YouTube
To play your video on a web page, do the following:
 Upload the video to YouTube
 Take a note of the video id
 Define an <iframe> element in your web page
 Let the src attribute point to the video URL
 Use the width and height attributes to specify the dimension of the player
 Add any other parameters to the URL
You can let your video start playing automatically when a user visits the page, by adding autoplay=1 to
the YouTube URL. However, automatically starting a video is annoying for your visitors!
Add mute=1 after autoplay=1 to let your video start playing automatically (but muted).
<html>
<body>
<iframe width="420" height="345"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
</body>
</html>
YouTube Playlist
A comma separated list of videos to play (in addition to the original URL).
YouTube Loop
Add loop=1 to let your video loop forever.
Value 0 (default): The video will play only once.
Value 1: The video will loop (forever).
YouTube Controls
Add controls=0 to not display controls in the video player.
Value 0: Player controls does not display.
Value 1 (default): Player controls display.
6) HTML Geolocation API

The HTML Geolocation API is used to locate a user's position. The HTML Geolocation API is used to
get the geographical position of a user.
The getCurrentPosition() method is used to return the user's position.
The example below returns the latitude and longitude of the user's position:
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Example explained:
 Check if Geolocation is supported
 If supported, run the getCurrentPosition() method. If not, display a message to the user
 If the getCurrentPosition() method is successful, it returns a coordinates object to the
function specified in the parameter (showPosition)
 The showPosition() function outputs the Latitude and Longitude
7) Drag and Drop API
In HTML, any element can be dragged and dropped. Drag and drop is a very common feature.
It is when you "grab" an object and drag it to a different location.
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336"
height="69">
</body>
</html>
First of all: To make an element draggable, set the draggable attribute to true:
<img draggable="true">
Then, specify what should happen when the element is dragged.
In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data
to be dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
In this case, the data type is "text" and the value is the id of the draggable element ("drag1").
The ondragover event specifies where the dragged data can be dropped.
By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the
default handling of the element.
This is done by calling the event.preventDefault() method for the ondragover event:
event.preventDefault()
When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event):
function drop(ev) {
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
 Call preventDefault() to prevent the browser default handling of the data (default is open as
link on drop)
 Get the dragged data with the dataTransfer.getData() method. This method will return any
data that was set to the same type in the setData() method
 The dragged data is the id of the dragged element ("drag1")
 Append the dragged element into the drop element.
8) HTML Web Storage API

With web storage, web applications can store data locally within the user's browser.
HTML web storage provides two objects for storing data on the client:
 window.localStorage - stores data with no expiration date

 window.sessionStorage - stores data for one session (data is lost when the browser tab is
closed)
The localStorage Object
The localStorage object stores the data with no expiration date. The data will not be deleted when the
browser is closed, and will be available the next day, week, or year.
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web
Storage...";
}
</script>
</body>
</html>
The sessionStorage Object
The sessionStorage object is equal to the localStorage object, except that it stores the data for only
one session. The data is deleted when the user closes the specific browser tab.
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web
storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>
9) HTML SSE API

Server-Sent Events (SSE) allow a web page to get updates from a server.
Server-Sent Events - One Way Messaging
A server-sent event is when a web page automatically gets updates from a server.
This was also possible before, but the web page would have to ask if any updates were available. With
server-sent events, the updates come automatically.
Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.
Receive Server-Sent Event Notifications
The EventSource object is used to receive server-sent event notifications:
<html>
<body>
<h1>Getting server updates</h1>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-
sent events...";
}
</script>
</body>
</html>
Server-Side Code Example

For the example above to work, you need a server capable of sending data updates (like PHP or ASP).
The server-side event stream syntax is simple. Set the "Content-Type" header to "text/event-stream".
Now you can start sending event streams.
Code in PHP (demo_sse.php):
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
10) Style sheet :

It is a set of formatting instructions that can be applied to a piece of text.
Style are defined with the help of rules,
Rule contains two parts
A selector and a declaration:
A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element we 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.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
CSS Selector:
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set.
CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector
The element selector selects the HTML element by name.

<style>
p{
text-align: center;
color: blue;
}
</style>
2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id is always
unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
3) CSS Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a period
character . (full stop symbol) followed by the class name.
<style>
.center {
text-align: center;
color: blue;
}
</style>
CSS Class Selector for specific element
If you want to specify that only one specific HTML element should be affected then you should use the
element name with class selector.
<style>
p.center {
text-align: center;
color: blue;
}
</style>
4) CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the pages.
<style>
*{
color: green;
font-size: 20px;
}
</style>
5) CSS Group Selector
The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are used to separate each selector in
grouping.
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
11) CSS Background

CSS background property is used to define the background effects on element. There are 5 CSS
background properties that affects the HTML elements:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
1) CSS background-color
The background-color property is used to specify the background color of the element.
body {
background-color: lightblue;
}
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p{
background-color: yellow;
}
2) CSS background-image
The background-image property is used to set an image as a background of an element. By default the
image covers the entire element.
body {
background-image: url("paper.gif");
}
3) CSS background-repeat
By default, the background-image property repeats the background image horizontally and vertically.
Some images are repeated only horizontally or vertically.
The background looks better if the image repeated horizontally only.
background-repeat: repeat-x;
background-repeat: repeat-y;
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
</body>
</html>
4) CSS background-attachment
The background-attachment property is used to specify if the background image is fixed or scroll with
the rest of the page in browser window. If you set fixed the background image then the image will not
move during scrolling in the browser
1. background: white url('bbb.gif');
2. background-repeat: no-repeat;
3. background-attachment: fixed;
5) CSS background-position
The background-position property is used to define the initial position of the background image. By
default, the background image is placed on the top-left of the webpage.
You can set the following positions:
1. center 2. Top 3. Bottom 4. Left 5. Right
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
12) CSS Border

The CSS border is a shorthand property used to set the border on an element.
The CSS border properties are use to specify the style, color and size of the border of an element. The
CSS border properties are given below
border-style: The Border style property is used to specify the border type which you want to display
on the web page.
nnone It doesn't define any border.
ddotted It is used to define a dotted border.
ddashed It is used to define a dashed border.
ssolid It is used to define a solid border.
ddouble It defines two borders wIth the same border-width value.
ggroove It defines a 3d grooved border. effect is generated according to border-color

value.
riridge It defines a 3d ridged border. effect is generated according to border-color value.
I inset It defines a 3d inset border. effect is generated according to border-color value.
ooutset It defines a 3d outset border. effect is generated according to border-color value.

border-color: There are three methods to set the color of the border.
o Name: It specifies the color name. For example: "red".
o RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
o Hex: It specifies the hex value of the color. For example: "#ff0000".
border-width: The border-width property is used to set the border's width. It is set in pixels. You can
also use the one of the three pre-defined values, thin, medium or thick to set the width of the border.
border-radius: The border-radius property is used to add rounded borders to an element:
p{
border: 2px solid red;
border-radius: 5px;
}
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-width: medium;
}
p.three {
border-width: 1px;
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">Write your text here.</p>
<p class="two">Write your text here.</p>
<p class="three">Write your text here.</p>
</body>
</html>
13)CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined borders.
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
 margin-top
 margin-right
 margin-bottom
 margin-left
All the margin properties can have the following values:
 auto - the browser calculates the margin
 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent element
14)CSS Padding
CSS Padding property is used to define the space between the element content and the element
border.
It is different from CSS margin in the way that CSS margin defines the space around elements. CSS
padding is affected by the background colors. It clears an area around the content.
Top, bottom, left and right padding can be changed independently using separate properties. You can
also change all properties at once by using shorthand padding property.
CSS Padding Properties
Property Description
P padding It is used to set all the padding properties in one declaration.
ppadding-left It is used to set left padding of an element.
ppadding-right It is used to set right padding of an element.
ppadding-top It is used to set top padding of an element.
ppadding-bottom It is used to set bottom padding of an element.

CSS Padding Values
value Description
L length It is used to define fixed padding in pt, px, em etc.
% It defines padding in % of containing element.
<html>
<head>
<style>
p{
background-color: pink;
p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>
15)CSS Height, 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.
CSS 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
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 200px and a width of 50%.</div>
</body>
</html>
16)CSS Text:
Text Color:
The color property is used to set the color of the text. The color is specified by:
Text Alignment:
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Text Decoration:
The text-decoration property is used to set or remove decorations from text.
The value text-decoration: none; is often used to remove underlines from links:
a{
text-decoration: none;
}
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Text Transformation:
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of
each word:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Text Indentation:
The text-indent property is used to specify the indentation of the first line of a text:
Example
p{
text-indent: 50px;
}
Letter Spacing:
The letter-spacing property is used to specify the space between the characters in a text.
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
Line Height:
The line-height property is used to specify the space between lines:
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
Text Direction:
The direction property is used to change the text direction of an element:
p{
direction: rtl;
}
Word Spacing:
The word-spacing property is used to specify the space between the words in a text.
h1 {
word-spacing: 10px;
}
h2 { word-spacing: -5px;
}
17) CSS Fonts:
The CSS font properties define the font family, boldness, size, and the style of a text.
CSS Font Families
In CSS, there are two types of font family names:
generic family - a group of font families with a similar look (like "Serif" or "Monospace")
In CSS there are five generic font families:
1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality
and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and
minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They create a mechanical
look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.
All the different font names belong to one of the generic font families.
font family - a specific font family (like "Times New Roman" or "Arial")
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does not
support the first font, it tries the next font, and so on.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the
generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times
New Roman".
More than one font family is specified in a comma-separated list:
Example
p{
font-family: "Times New Roman", Times, serif;
}
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Font Size
The font-size property sets the size of the text.
Set Font Size With Pixels
Setting the text size with pixels gives you full control over the text size:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p{
font-size: 14px;
}
Font Weight
The font-weight property specifies the weight of a font:
N normalDefines normal characters. This is default
B bold D defines thick characters

B bolder D defines thicker characters
Li lighter D defines lighter characters
1 100
200
3 300
4 400
Defines from thin to thick characters. 400 is the same as normal, and 700 is the
5 500
same as bold
6 600
7 700
8 800
9 900
p.normal {
font-weight: normal;}p.thick { font-weight: bold;}
18) CSS Icons

Icons can easily be added to your HTML page, by using an icon library.
The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.
Add the name of the specified icon class to any inline HTML element (like <i> or <span>).
All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size,
color, shadow, etc.)
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://kit.fontawesome.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://maxcdn.bootstrapcdn.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://fonts.googleapis.com/icon?family=Material+Icons">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
19) CSS Table

We can apply style on HTML tables for better look and feel. There are some CSS properties that are
widely used in designing table using CSS:
1. border
2. border-collapse
3. padding
4. width
5. height
6. text-align
7. color
8. background-color
CSS Table Border
We can set border for the table, th and td tags using the CSS border property.
<style>
table, th, td {
border: 1px solid black;
}
</style>
CSS Table Border Collapse

By the help of border-collapse property, we can collapse all borders in one border only.
<style>
table, th, td {
border-collapse: collapse;
}
</style>
CSS Table Padding
We can specify padding for table header and table data using the CSS padding property.
<style>
table, th, td {
}
th, td {
padding: 10px;
}
</style>
CSS Table: Styling even and odd cells

We can style even and odd table cells for better look and feel. In this code, we are displaying different
background colors on even and odd cells. Moreover, we have changed the background-color and color
of <th> tag.
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 10px;
}
table#alter tr:nth-child(even) {
background-color: #eee;
}
table#alter tr:nth-child(odd) {
background-color: #fff;
}
table#alter th {
color: white;
background-color: gray;
}
</style>
</head>
<body>
<table id="alter">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>
20) CSS Lists
There are various CSS properties that can be used to control lists. Lists can be classified as ordered lists
and unordered lists. In ordered lists, marking of the list items is with alphabet and numbers, whereas
in unordered lists, the list items are marked using bullets.
The CSS properties to style the lists are given as follows:
o list-style-type: This property is responsible for controlling the appearance and shape of the
marker.
o list-style-image: It sets an image for the marker instead of the number or a bullet point.
o list-style-position: It specifies the position of the marker.
o list-style: It is the shorthand property of the above properties.
o marker-offset: It is used to specify the distance between the text and the marker. It is
unsupported in IE6 or Netscape 7.
The list-style-type property
It allows us to change the default list type of marker to any other type such as square, circle, roman
numerals, Latin letters, and many more. By default, the ordered list items are numbered with Arabic
numerals (1, 2, 3, etc.), and the items in an unordered list are marked with round bullets (•).
If we set its value to none, it will remove the markers/bullets.
The list-style-position property
It represents whether the appearing of the marker is inside or outside of the box containing the bullet
points. It includes two values.
inside: It means that the bullet points will be in the list item. In this, if the text goes on the second line,
then the text will be wrap under the marker.
outside: It represents that the bullet points will be outside the list item. It is the default value.
The list-style-image property
It specifies an image as the marker. Using this property, we can set the image bullets. Its syntax is
similar to the background-image property. If it does not find the corresponding image, the default
bullets will be used.
The list-style property
It is the shorthand property that is used to set all list properties in one expression. The order of the
values of this property is type, position, and image. But if any property value is missing, then the default
value will be inserted.
Styling Lists with colors
To make the lists more attractive and interesting, we can style lists with colors. The addition of anything
to the <ul> or <ol> tag will affect the entire list, whereas the addition to the individual <li> tag will
affect the items of the corresponding list.
<html>
<head>
<title>CSS Lists</title>
<style>
.order{
list-style: upper-alpha;
background: pink;
padding:20px;
}
.order li{
background: lightblue;
padding:10px;
font-size:20px;
margin:10px;
}
.unorder{
list-style: square inside;
background: cyan;
padding:20px;
}
.unorder li{
background: green;
color:white;
padding:10px;
font-size:20px;
margin:10px;
}
</style>
</head>
<body>
<h1>
Welcome to the javaTpoint.com
</h1>
<h2>
Ordered Lists
</h2>
<ol class="order">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ol>
<h2>
Unordered lists
</h2>
<ul class="unorder">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</body>
</html>
21) 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:
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.
div.relative {
position: relative;
left: 30px;
}
position: fixed;
An element with position: fixed; is positioned relative to the viewport, which means it always stays in
the same place even if the page is scrolled. The top, right, bottom, and left properties are used to
position the element.
A fixed element does not leave a gap in the page where it would normally have been located.
Notice the fixed element in the lower-right corner of the page.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead
of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body,
and moves along with page scrolling.
Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
}
position: sticky;
An element with position: sticky; is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned
relative until a given offset position is met in the viewport - then it "sticks" in place (like
position:fixed).
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
22) CSS Overflow

The overflow property specifies whether to clip the content or to add scrollbars when the content of an
element is too big to fit in the specified 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
overflow: visible
By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's
box:
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
overflow: hidden
With the hidden value, the overflow is clipped, and the rest of the content is hidden:
div {
overflow: hidden;
}
overflow: scroll
Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box.
Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):
div {
overflow: scroll;
}
overflow: auto
The auto value is similar to scroll, but it adds scrollbars only when necessary:
div {
overflow: auto;
}
float Property
The float property is used for positioning and formatting content e.g. let an image float left to the text
in a container.
The float property can have one of the following values:
 left - The element floats to the left of its container
 right - The element floats to the right of its container
 none - The element does not float (will be displayed just where it occurs in the text). This is
default
 inherit - The element inherits the float value of its parent
img {
float: right;
}
img {
float: left;
}
img {
float: none;
}
23) CSS Combinators

A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can
include a combinator.
There are four different combinators in CSS:
 descendant selector (space)
 child selector (>)
 adjacent sibling selector (+)
 general sibling selector (~)
Descendant Selector
The descendant selector matches all elements that are descendants of a specified element.
The following example selects all <p> elements inside <div> elements:
div p {
}
Child Selector (>)
The child selector selects all elements that are the children of a specified element.
The following example selects all <p> elements that are children of a <div> element:
div > p {
}
Adjacent Sibling Selector (+)
The adjacent sibling selector is used to select an element that is directly after another specific element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following".
The following example selects the first <p> element that are placed immediately after <div>
elements:
div + p {
}
General Sibling Selector (~)
The general sibling selector selects all elements that are next siblings of a specified element.
The following example selects all <p> elements that are next siblings of <div> elements:
div ~ p {
}
24) CSS pseudo-classes

A pseudo-class can be defined as a keyword which is combined to a selector that defines the special
state of the selected elements. It is added to the selector for adding an effect to the existing elements
based on their states. For example, The ":hover" is used for adding special effects to an element when
the user moves the cursor over the element.
The names of the pseudo-class are not case-sensitive.
Syntax
A pseudo-class starts with a colon (:). Let's see its syntax.
selector: pseudo-class {
property: value;
}
pseudo-class Description
: active IIt is used to add style to an active element.
: hover I It adds special effects to an element when the user moves the mouse pointer over
t he element.
: link I It adds style to the unvisited link.
: visited I It adds style to a visited link.
: lang I It is used to define a language to use in a specified element.
: focus I It selects the element which is focused by the user currently.
: first-child It adds special effects to an element, which is the first child of another element.
CSS Pseudo-elements
A pseudo-class can be defined as a keyword which is combined to a selector that defines the special
state of the selected elements. Unlike the pseudo-classes, the pseudo-elements are used to style the
specific part of an element, whereas the pseudo-classes are used to style the element.
As an example, a pseudo-element can be used to style the first letter or the first line of an element. The
pseudo-elements can also be used to insert the content after or before an element.
Syntax
Pseudo-element has a simple syntax which is given as follows:
selector::pseudo-element {
property: value;
}
pseudo-element Description
: :first-letter (:first-letter) It selects the first letter of the text.
: :first-line (:first-line) It styles the first line of the text.
: : before (:before) It is used to add something before the element's content.
: :after (:after) I it is used to add something after the element's content.
: :selection I It is used to select the area of an element that is selected by the user.
25) CSS Opacity / Transparency

The opacity property specifies the opacity/transparency of an element.
Transparent Image
The opacity property can take a value from 0.0 - 1.0. The lower the value, the more transparent:
Transparent Hover Effect
The opacity property is often used together with the :hover selector to change the opacity on mouse-
over
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on
mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
26) CSS Tooltip

Basic Tooltip
Create a tooltip that appears when the user moves the mouse over an element:
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Basic Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue
reading on how to position the tooltip in a desirable way.</p>
</body>
</html>
Example Explained
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse
over this <div>, it will show the tooltip text.
The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext".
CSS: The tooltip class use position:relative, which is needed to position the tooltip text
(position:absolute). Note: See examples below on how to position the tooltip.
The tooltiptext class holds the actual tooltip text. It is hidden by default, and will be visible on hover
(see below). We have also added some basic styles to it: 120px width, black background color, white
text color, centered text, and 5px top and bottom padding.
The CSS border-radius property is used to add rounded corners to the tooltip text.
The :hover selector is used to show the tooltip text when the user moves the mouse over the <div>
with class="tooltip".
27) CSS Image Gallery

The following image gallery is created with CSS:
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
</div>
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
</div>
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
</div>
</body>
</html>
28) CSS Forms

Styling Input Fields
Use the width property to determine the width of the input field:
input {
width: 100%;
}
The example above applies to all <input> elements. If you only want to style a specific input type, you
can use attribute selectors:
 input[type=text] - will only select text fields
 input[type=password] - will only select password fields
 input[type=number] - will only select number fields
 etc..
Padded Inputs
Use the padding property to add space inside the text field.
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Bordered Inputs
Use the border property to change the border size and color, and use the border-radius property to
add rounded corners:
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
Colored Inputs
Use the background-color property to add a background color to the input, and the color property to
change the text color:
input[type=text] {
background-color: #3CBC8D;
color: white;
}
Focused Inputs
By default, some browsers will add a blue outline around the input when it gets focus (clicked on).
You can remove this behavior by adding outline: none; to the input.
Use the :focus selector to do something with the input field when it gets focus:
input[type=text]:focus {
border: 3px solid #555;
}
Styling Input Buttons
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
29) CSS Counters

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.
Nesting Counters
The following example creates one counter for the page (section) and one counter for each <h1>
element (subsection). The "section" counter will be counted for each <h1> element with "Section
<value of the section counter>.", and the "subsection" counter will be counted for each <h2> element
with "<value of the section counter>.<value of the subsection counter>":
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>W3.CSS</h2>
<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>
<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>
</body>
</html>

WIDT UNIT-II

Uploaded by

Copyright:

Available Formats

WIDT UNIT-II

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WIDT UNIT-II

Uploaded by

Copyright:

Available Formats

UNIT-II

HTML Form Elements

The <textarea> element defines a multi-line input field (a text area):

The cols attribute specifies the visible width of a text area.

The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

6) HTML Geolocation API

8) HTML Web Storage API

 window.localStorage - stores data with no expiration date

The sessionStorage Object

9) HTML SSE API

Server-Side Code Example

10) Style sheet :

A CSS rule-set consists of a selector and a declaration block:

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

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

The element selector selects the HTML element by name.

11) CSS Background

12) CSS Border

nnone It doesn't define any border.

ddotted It is used to define a dotted border.

ddashed It is used to define a dashed border.

ssolid It is used to define a solid border.

ddouble It defines two borders wIth the same border-width value.

ggroove It defines a 3d grooved border. effect is generated according to border-color

riridge It defines a 3d ridged border. effect is generated according to border-color value.

I inset It defines a 3d inset border. effect is generated according to border-color value.

ooutset It defines a 3d outset border. effect is generated according to border-color value.

P padding It is used to set all the padding properties in one declaration.

ppadding-left It is used to set left padding of an element.

ppadding-right It is used to set right padding of an element.

ppadding-top It is used to set top padding of an element.

ppadding-bottom It is used to set bottom padding of an element.

L length It is used to define fixed padding in pt, px, em etc.

% It defines padding in % of containing element.

<p class="padding">This is a paragraph with specified paddings.</p>

15)CSS Height, Width

In CSS there are five generic font families:

B bold D defines thick characters

18) CSS Icons

19) CSS Table

CSS Table Border Collapse

CSS Table: Styling even and odd cells

21) Position Property

22) CSS Overflow

23) CSS Combinators

24) CSS pseudo-classes

: active IIt is used to add style to an active element.

: link I It adds style to the unvisited link.

: visited I It adds style to a visited link.

: lang I It is used to define a language to use in a specified element.

: focus I It selects the element which is focused by the user currently.

: :first-letter (:first-letter) It selects the first letter of the text.

: :first-line (:first-line) It styles the first line of the text.

: : before (:before) It is used to add something before the element's content.

: :after (:after) I it is used to add something after the element's content.

25) CSS Opacity / Transparency

26) CSS Tooltip