Scribd
Upload
56 views

Global Attributes: The Attributes of An Element Which Is Common To The All HTML Elements. Some of The Global Attributes Are

The document defines various global HTML attributes such as accesskey, class, contenteditable, data-*, dir, hidden, id, style, tabindex, and title. It also covers common document structure tags like <head> and <body>. Additionally, it discusses text formatting tags, block level tags like <div> and <span>, different types of lists, links, images, and image maps.

Uploaded by

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

Global Attributes: The Attributes of An Element Which Is Common To The All HTML Elements. Some of The Global Attributes Are

The document defines various global HTML attributes such as accesskey, class, contenteditable, data-*, dir, hidden, id, style, tabindex, and title. It also covers common document structure tags like <head> and <body>. Additionally, it discusses text formatting tags, block level tags like <div> and <span>, different types of lists, links, images, and image maps.

Uploaded by

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

Global Attributes: The attributes of an element which is common to the all html elements.

Some of the global attributes are:

accesskey: Provides a hint for Specifies a shortcut key to activate/focus a current element. This
attribute consists of a space-separated list of characters. The browser should use the first one
that exists on the computer keyboard layout.

Syntax:<element accesskey="character">

Example: Hyperlink specified accesskey


<a href="https://www.google.com" accesskey="g">Google</a><br>
<a href="https://www.onlinekhabr.com" accesskey="n">News</a>

Note: In internet explorer, chrome and safari used Alt + accesskey

class: The class attribute specifies one or more class names for an element . Classes allows CSS
and JavaScript to select and access specific elements via the tag.

Syntax: <element class="classname">

Example:

<html>
<head>
<style>
h1.intro {
    color: blue;
}

.mark {
    background-color: yellow;

p.highlight {
    color: green;
}
</style>
</head>
<body>

<h1 class="intro">Header one</h1>
<p>A paragraph.</p>
<p class="highlight">Note that this is an highlight paragraph. :)</p>

<h1 class="intro mark">Header Highlight</h1>


</body>
</html>

Contenteditable: An enumerated attribute indicating if the element should be editable by the


user. If so, the browser modifies its widget to allow editing. The attribute must take one of the
following values:

 true or the empty string, which indicates that the element must be editable;
 false, which indicates that the element must not be editable.

The contenteditable attribute specifies whether the content of an element is editable or not.

Syntax: <element contenteditable="true|false">

Example:

<html>

<body>

<p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>

</body>

</html>

Data-* : Used to store custom data private to the page or application. This attribute is ability to
embed custom data attributes on all HTML elements.

Syntax: <element data-*="somevalue">

Example:

<ul>
  <li data-animal-type="bird">Sparrow</li>
  <li data-animal-type="fish">Dalphin</li>
</ul>
dir: This attribute specifies the text direction of the element's content. There are three different
value of attribute should be assign. That are ltr, rtl and auto.

ltr- for left to right text direction

rtl-for right to left text direction

auto- text direction define by browser.

Syntax: <element dir="ltr|rtl|auto">

Example:

<html>

<body>

<p dir="rtl">Write this text from right-to-left.</p>

</body>

</html>

hidden: This is the boolean attribute indicates that the element is not yet, or is no
longer, relevant. It can be used to hide elements of the page that can't be used until the login
process has been completed.

Syntax: <element hidden>

Example:

<p hidden>This paragraph should be hidden.</p>

id: The id attribute specifies a unique id for an HTML element. It most be used to point to a
style in a style sheet, and by JavaScript to define the element with the specific id.

Syntax: <element id="id">

Example: copy

Style: The style attribute specifies an inline style for an element.

This attribute will override any style set globally.


Syntax: <element style="style_definitions">

Example:

<h1 style="color:blue;text-align:center">This is a header</h1>

<p style="color:green">This is a paragraph.</p>

Tabindex: This attribute define the order of an element for the navigation.

Syntax: <element tabindex="number">

Example:

<a href="https://www.google.com/" tabindex="2">google</a>
<a href="http://www.msn.com/" tabindex="1">Msn</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

Title: This attribute is used for extra information of the element when the mouse is over that
element.

Syntax: <element title="text">

Example:

<p><abbr title="Information Tecnology">IT</abbr> is important for every sector.</p>

Document Structure Tags:

HTML document have basic two containers that are head and body.

 the <head> tag, which contains information, or metadata, about the web page, such as a


title for the page, javascripts, styles (CSS), meta information, and more. Whatever is
inside the <head> tag does not display on the web page itself.
 the <body> tag, containing the content that actually displays in a browser

<html>
<head>
<title> The title of your Web page goes here</title>
</head>
<body>
The text and images on your Web page go here
</body>
</html>
Page structure
<p> ….</p> paragraph:
<div>...</div> division: enables you do designate sections of text for styling; will insert
an extra line
<span>...</span> span: enables you to designate sections of text for styling without
inserting any extra space.
<center> …..</center> center the content like text and image
<blockquote>……</blockquote> indents text from the left margin
Heading: Heading is also define by heading tag (e.g., <h1> <h2>….<h6>)

Text level formatting:

Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <u>- Underline
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <big>- Big text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

Block Level Formatting:

Block level formatting is mainly used for containing the block of element and some text.
It can be appear in the body of an html page. Block level elements begin on new lines.

The <div> element is often used as a container for other HTML elements.


The <div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of content:

<div style="background-color:black; color:white; padding:20px;">


</div>

The <span> element is often used as a container for some text.


The <span> element has no required attributes, but style, class and id are common.
When used together with CSS, the <span> element can be used to style parts of the text:

<h1>My <span style="color:red">Important</span> Heading</h1>

List Tags:
List is the piece of short information, which is used for listing the data.

Unordered HTML List


An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered HTML List


An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
HTML Links
Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and
images. Thus you can create hyperlinks using text or images available on a webpage.

A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the
opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part
to reach to the linked document
<a href="https://www.news.com”> Visit our NEWS</a>

The target attribute specifies where to open the linked document.


The target attribute can have one of the following values:
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab as it was clicked (this is
default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
framename - Opens the linked document in a named frame
<a href="https://www.news.com” target="_blank"> Visit our NEWS</a>

HTML Images Syntax


In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url">

The alt attribute provides an alternate text for an image, if the user for some reason cannot
view it (because of slow connection, an error in the src attribute, or if the user uses a screen
reader).
<img src="img_chania.jpg" alt="Flowers in Chania">

Client Side Image


Images in a sub-folder or in client side. You must then include the folder name in
the src attribute:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Server-Side Image
Some web sites store their images on image servers.
<img src="https://www.abc.com/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Image Maps

The <map> tag defines an image-map. An image-map is an image with clickable areas. The idea
behind an image map is that you should be able to perform different actions depending on
where in the image you click.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

The usemap value starts with a hash tag # followed by the name of the image map, and is used
to create a relationship between the image and the image map.

A clickable area is defined using an <area> element.

Shape

You must define the shape of the area, and you can choose one of these values:

 rect - defines a rectangular region


 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By
default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

<table> element to define a table


 <tr> element to define a table row
<td> element to define a table data
<th> element to define a table heading
<caption> element to define a table caption
border property to define a border
border-collapse property to collapse cell borders
padding property to add padding to cells
text-align property to align cell text
border-spacing property to set the spacing between cells
colspan attribute to make a cell span many columns
rowspan attribute to make a cell span many rows
id attribute to uniquely define one table

There are attribute of table element some of them are the global attributes to.
Align: It is define the table aligned inside the contacting document.
Left: Table is displayed on the left side of the document
Center: on the center of the document
Right: on the right side of the document
Bgcolor: This attribute define the background color of the table. For color, 6 digit hexadecimal
code and prefixed is denoted by #. Black--#000000, red--#ff0000, white--#ffffff
Border: the size of the frame surrounding the table.
<table border="1|0">
Cellpadding: The cellpadding attribute specifies the space, in pixels, between the cell wall and
the cell content.
<table cellpadding="10">
cellspacing : The cellspacing attribute specifies the space, in pixels, between cells.

<table cellspacing="10">
Frame: The frame attribute specifies which parts of the outside table borders that should be
visible.
Syntax
<table frame="value">

 void: It is used to hide the outside border.


 above: It is used to display the top outside border.
 below: It is used to display the bottom outside border.
 hsides: It is used to display the top and bottom outside border.
 vsides: It is used to display the left and right outside border.
 lhs: It is used to display the left outside border.
 rhs: It is used to display the right outside border.
 box: It is used to display all sides outside border.
 border: It is used to display all outside border.

<table frame="box">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

rules : The rules attribute specifies which parts of the inside borders that should be visible.
The styling of the rules is browser dependent and cannot be modified.
Syntax:
<table rules="value">
Attribute Values
Value Description
none No lines
groups Lines between row groups (defined by the <thead>, <tbody>, <tfoot>) and
column groups (defined by the <col>, <colgropus>).
rows Lines between rows
cols Lines between columns
all Lines between rows and columns

<table rules="rows">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Summary: The summary attribute specifies a summary of the content of a table.


The summary attribute has no visual effect in ordinary web browsers.

Syntax:
<table summary="text">

<table summary="Monthly revenue of the company">

Width: The width attribute specifies the width of a table.


If the width attribute is not set, a table takes up the space it needs to display the table
data.
Syntax
<table width="pixels|%">

<table width="400">

Frameset: It is used to divide the page into multiple sections where each section can be loaded
separately.
The <frameset> element holds one or more <frame> elements. Each <frame> element can hold
a separate document.

The <frameset> element specifies How many columns or rows there will be in the frameset, and
How much percentage/pixels of space will occupy each of them.

<frameset cols="25%,*,25%">
  <frame src="frame_1.htm">
  <frame src="frame_2.htm">
  <frame src="frame_3.htm">
</frameset>

cols pixels % * Specifies the number and size of columns in a frameset


rows pixels % * Specifies the number and size of rows in a frameset

border: it define the width of border of each frames in pixels.


<frameset border=”4” frameset>
Frameborder: The frameborder attribute specifies whether or not to display a border around a
frame. It use two values 0 and 1, where 0 defines for no border and value 1 signifies for yes
there will be border.
<frame src="frame_a.htm" frameborder="0">
Framespacing: This is used for specify the spacing between the frames in a frameset.
<framespacing =”20”>

Frame tag attributes are:

Name: The name attribute specifies the name of a <frame> element.

The name attribute is used to reference the element in a JavaScript, or to act as a target
for a link.

<frame name="text">

Src: The src attribute specifies the URL of the document to show in a frame.
<frame src="frame_a.htm">

marginwidth : The marginwidth attribute specifies the width between the content and the left
and right sides of the frame, in pixels.

<frame marginwidth="pixels">

<frameset cols="50%,50%">
  <frame src="frame_a.htm" marginwidth="50">
  <frame src="frame_b.htm" marginwidth="0">
</frameset

marginheight : The marginheight attribute specifies the height between the content and the top
and bottom of the frame, in pixels.

<frame marginheight="pixels">

scrolling : The scrolling attribute specifies whether or not to display scrollbars in a <frame>.

By default, scrollbars appear in a <frame> if the content is larger than the <frame>.

<frame scrolling="auto|yes|no">

Nesting Frameset Tag

Frameset contain within the frameset is the nesting frameset.

<frameset cols= “*,*,*”>

<frameset rows= “*,*”>

<frame src = “frame_a.html>

<frame src = “frame_b.html>

</frameset>

<frame src = “frame_c.html”>

</frameset>

Targeting frames

Load a new linked page into a particular frame as a link. Where frame name and source is
define.

<frame src = “orginal.html” name = “main”>

<a href = “new.html” target = “Main”> load main</a>


Inline Frame

Inline frame or iframe is allow to open new page inside the main page. It is used as
<iframe>….</iframe> tag.

Some attributes of <iframe> tag are:

Name -Name for the iframe

Src -Specified the source of the document to be loaded into frame

Width -define width of the iframe

Height -define height of the iframe

Frameborder -define either border or not by values 1 or 0

Scrolling -define iframe have scrolling capability or not

Vspace -define the space on top and bottom of the iframe.

Hspace-specify the space on left and right of on iframe.

HTML Form Tag

A form is a document with spaces in which to write or select, for a series of documents
with similar contents. Where form in html is a document which stores information of
user on a web server using interactive controls. Some of the information are as follows;
name, address, password, contact number, email id etc.

The control contains are the text field, checkbox, submit button etc.

The <form> tag is used to create an HTML form for user input.

The <form> element can contain one or more of the following form elements:

 <input>
 <textarea>
 <button>
 <select>
 <option>
 <optgroup>
 <fieldset>
 <label>
 <output>

From attributes are:

action: The action attribute specifies where to send the form-data when a form is
submitted.

<form action="URL">

url is define for where to send the form-data when the form is submitted.

Method: The method attribute specifies how to send form-data (the form-data is sent
to the page specified in the action attribute).

The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").

Notes on GET:

 Appends form-data into the URL in name/value pairs


 The length of a URL is limited (about 3000 characters)
 Never use GET to send sensitive data! (will be visible in the URL)
 Useful for form submissions where a user wants to bookmark the result
 GET is better for non-secure data, like query strings in Google

Notes on POST:

 Appends form-data inside the body of the HTTP request (data is not shown is
in URL)
 Has no size limitations
 Form submissions with POST cannot be bookmarked

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>
<form action="/action_page.php" method="post">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">

</form>

onsubmit attribute: It fires when a form is submitted.

<form name="user_info" onsubmit="alert('The form is submitted')" action="">

onreset: It fires when a form is submitted.

<form onreset= “reset()”>

Ex:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of HTML onsubmit attribute with form</title>
</head>
<body>
<form name="user_info" onsubmit="alert('The form is submitted')" action="">
Name : <input type="text" name="name"><br>
email : <input type="text" name="email"><br>
Describe yourself : <br/>
<textarea rows="10" colos="10" name="describe_yourself">
</textarea><br>
<input type="submit" name="submit" value="Submit">
</form>
</body>

</html>

enctype

When the value of the method attribute is post, enctype is the MIME (Multipurpose


Internet Mail Extensions) type of content that is used to submit the form to the server.
Possible values are:
 application/x-www-form-urlencoded: The default value if the attribute is not specified.
 multipart/form-data: The value used for an <input> element with the type attribute set
to "file".
 text/plain: (HTML5)
This value can be overridden by a formenctype attribute on a <button>, <input
type="submit"> or <input type="image"> element.

<form action="/action_page_binary.asp" method="post" enctype="multipart/form-
data">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

accept

The accept attribute specifies the type of files that the server accepts (that can be
submitted through a file upload).

<input type= “file”>

Eg:
<form>
<input type= “file” name= “pic” accept= “image/jpeg”>
<input type = “submit”>
</form>

accept-charset

This attribute specifies the characters encoding that are to be used for the form
submission.

<form accept-charset= “ISO-8859-1”>

  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>

</form>
target

This attribute specified the name or keyword indicating where to display the response
that is received after submitting the form.

 _self: Load the response into the same frame. This value is the default if the attribute is
not specified.
 _blank: Load the response into a new window or tab.
 _parent: Load the response into the parent frame, if there is no parent; this option
behaves the same way as _self.
 _top: Load the response into the full original window, and cancel all other frames.
 iframename: The response is displayed in a named <iframe>

<form action="/action_page.php" method="get" target="_blank">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

autofocus

This attribute specifies that the input field should automatically get focus when the page
loads.

<form action="/action_page.php" method="get" target="_blank">
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

Fieldset

The <fieldset> tag is used to group related elements in a form and draws a box around the
related elements. This can be especially useful in large forms, where readability and ease
of access can be improved with segmentation.

Attribute Value Description

disabled disabled Specifies that a group of related form elements should be


disabled
form form_id Specifies one or more forms the fieldset belongs to

name text Specifies a name for the fieldset

<form id = “form1”>
  
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
<input type="submit">
  
</form>

<fieldset form="form1">
  User Name: <input type="text" name="username"><br>
 
</fieldset>

input
The <input> tag specifies an input field where the user can enter data. This <input>
elements are used within a <form> element to declare input controls that allow users to
input data. An input field can vary in many ways, depending on the type attribute.

<input type="text" name="fname">

type attribute of the input elements define the different control used as their purpose.
In input element there are number of different type of control are define they are as
follows: button, checkbox, color, date, datetime-local, email, file, hidden, image, month,
number, password, radio, range, reset, search, submit, tel, text, time, url, week

<form action="/action_page.php">
  <input type="checkbox" name="Subject" value="Math"> Math<br>
  <input type="checkbox" name="Subject" value="Computer" checked> Computer<br>
  <input type="submit" value="Submit">
</form>

<form action="/action_page.php">

Select a file: <input type="file" name="myFile"><br><br>

<input type="submit">

</form>
button -The <button> tag defines a clickable button. Inside a <button> element you can put
content, like text or images. This is the difference between this element and buttons created
with the <input> element.

type –The type attribute specifies the type of button. That are button, submit, reset

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>

label

This element is used for the labeling the different control which can be associated to a
form, and is supposed to provide a short description for it. <label> element is also able to
associated with the input element. To associate the <label> with an <input> element, you
need to give the <input> an id attribute. The <label> then needs a for attribute whose
value is the same as the input's id.

for -The for attribute specifies which form element a label is bound to.

<label for="element_id">

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>

<input type="submit" value="Submit">

</form>

form -The form attribute specifies one or more forms the <label> element belongs to.

<label form="form_id">

<form action="/action_page.php" id="form1">
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

<label for="male" form="form1">Male</label>

select

HTML <select> tag is used to create drop down list of options, which appears when
clicking on form element and allows the user to choose one of the options.
The <option> tag is used to define the possible options to choose from. The tag is put
into <select> tag. The first option from the options’ list is selected by default. 

<select>
  <option value="HTML">Html</option>
  <option value="CSS">Css/option>
  <option value="Java">Java</option>
  <option value="PHP">PHP</option>
</select>

multiple – This attribute specifies that multiple options can be selected at once

<select name = “subject” multiple>


  <option value="HTML">Html</option>
  <option value="CSS">Css/option>
  <option value="Java">Java</option>
  <option value="PHP">PHP</option>
</select>

Text Area: Multiple Line Text

The <textarea> tag defines a form field where user can input a multi-line text.
Unlike the <input> tag, text wrapping inside <textarea> is allowed when the form is
submitted. A text area can contain an unlimited number of characters. The text between
opening <textarea> and closing </textarea> tags is rendered in a fixed-width font

<textarea name= “description” rows="4" cols="50" >


</textarea>

Script

The HTML <script> tag declares client-side script (JavaScript) in an HTML document.
When defining a client-side script the script tag is used for image manipulation, form
validation, and dynamic changes of content. The HTML <script> tag can be placed in
the <head> element, as well as within the <body> element. The <script> must be
executed first, must be placed in the heading of the document.

Eg;

<html>

<body>

Enter your name: <input type="text" name="fname" id="fname"


onblur="myFunction()">

<p>When you leave the input field, a function is triggered which transforms the input
text to upper case.</p>

<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>

</body>

</html>

Events triggered by actions inside a HTML form

Attribute Value Description


onblur script Fires the moment that the element loses focus
onchange script Fires the moment when the value of the element is
changed
oncontextmenu script Script to be run when a context menu is triggered
onfocus script Fires the moment when the element gets focus
oninput script Script to be run when an element gets user input
oninvalid script Script to be run when an element is invalid
onreset script Fires when the Reset button in a form is clicked
onsearch script Fires when the user writes something in a search field (for
<input="search">)
onselect script Fires after some text has been selected in an element
onsubmit script Fires when a form is submitted
Style Sheet

A Style Sheet is a collection of style rules that that tells a browser how the
various styles are to be applied to the HTML tags to present the document. Rules can be
applied to all the basic HTML elements, for example the <p> tag, or you can define you
own variation and apply them where you wish to.

Style Sheets let you selectively override previous defined Styles. For example a Web site
might be using a standard Style Sheet but certain Web pages can have an additional
Style Sheet that can override styles that have been defined in the standard Style Sheet.

Example:

<style>

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

</style>

Importance of CSS

CSS saves time


With CSS, you only have to specify these details once for any element. CSS will
automatically apply the specified styles whenever that element occurs.
Pages load faster
Less code means faster download times.
Easy maintenance
To change the style of an element looks across the whole site, you only have to make an
edit in one place.
Superior styles to HTML
CSS was built for styles. HTML was not. While browsers usually display HTML elements
in a certain way, you can override this with CSS.
Platform Independence
The Script offer consistent platform independence and can support latest browsers as
well.

Different Approaches of Style Sheet

Cascading Style Sheet(CSS) is used to set the style in web pages which contain HTML
elements. It sets the background color, font-size, font-family, color, … etc property of
elements in a web pages.
There are three types of CSS which are given below:
 Inline CSS
 Internal or Embedded CSS
 External CSS
Inline CSS: Inline CSS contains the CSS property in the body section attached with element is
known as inline CSS. This kind of style is specified within an HTML tag using style attribute.
<html>
    <head>
        <title>Inline CSS</title>
    </head>
      
    <body>
        <p style = "color:#009900; font-size:50px;
                font-style:italic; text-align:center;">
            Madhan Bhandari
        </p>
    </body>
</html>     

Internal or Embedded CSS: This can be used when a single HTML document must be styled
uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is
embedded within the HTML file.
<html>
    <head>
        <title>Internal CSS</title>
        <style>
            .main {
                text-align:center; 
            }
            .mbm {
                color:#009900;
                font-size:50px;
                font-weight:bold;
            }
            .std {
                font-style:bold;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <div class = "main">
            <div class ="mbm">Madhan Bhandari Memorial College</div>
              
            <div class ="std">
                A computer science portal for student
            </div>
        </div>
    </body>
</html>              

External CSS: External CSS contains separate CSS file which contains only style property with
the help of tag attributes (For example class, id, heading, … etc). CSS property written in a
separate file with .css extension and should be linked to the HTML document using link tag. This
means that for each element, style can be set only once and that will be applied across web
pages.

This file save with .css extension

body {

background-color:powderblue;

.main {

text-align:center;

.mbm {

color:#009900;
font-size:50px;

font-weight:bold;

#stud {

font-style:bold;

font-size:20px;

<html>

    <head>

        <link rel="stylesheet" href="geeks.css"/>

    </head>

  

    <body>

        <div class = "main">

            <div class ="mbm">Madhan Bhandari Memorial</div>

            <div id ="stud">

                A computer science portal for student

            </div>

        </div>

    </body>

</html>

CSS Selectors

CSS Selectors allow us to target specific HTML elements with our style sheets. 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 Type Selector


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

Type Selectors are very simple. They correspond with any HTML element type.

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

body {
font-family: Arial, sans-serif;
font-size: small;
}

h1 {
color: green;
}

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.

#para1 {
  text-align: center;
  color: red;
}

The class selector selects HTML elements with a specific class attribute. To select elements with
a specific class, write a period (.) character, followed by the class name. The major difference is
that while a certain ID should only be assigned to one element, we can assign the same class to
as many elements as we want.
.center {
  text-align: center;
  color: red;
}

If you want to specify that only one specific HTML element should be affected then you should
use the element name with class selector.

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

The universal selector is used as a wildcard character. It selects all the elements on the pages.

* {
  text-align: center;
  color: blue;
}

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.

h1, h2, p {


  text-align: center;
  color: red;
}

CSS Combinators

CSS combinators are explaining the relationship between two selectors. CSS selectors are the
patterns used to select the elements for style purpose. A CSS selector can be a simple selector
or a complex selector consisting of more than one selector connected using combinators.

General Sibling selector: The general sibling selector is used to select the element that follows
the first selector element and also share the same parent as the first selector element. This can
be used to select a group of elements that share the same parent element.

 div ~ p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }

Adjacent Sibling selector: The Adjacent sibling selector is used to select the element that is
adjacent or the element that is the next to the specified selector tag. This combinator selects
only one tag that is just next to the specified tag.

div + p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
        p {
            text-align:center;
        }

Child Combinator: This selector is used to select the element that is the immediate child of the
specified tag. This combinator is stricter than the descendant selector because it selects only
the second selector if it has the first selector element as its parent.

div > p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
        p {
            text-align:center;
        }

Descendant selector: This selector is used to select all the child elements of the specified tag.
The tags can be the direct child of the specified tag or can be very deep in the specified tag. This
combinator combines the two selectors such that selected elements have an ancestor same as
the first selector element.

div p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
        p {
            text-align:center;
        }

You might also like