Scribd
Upload
20 views

HTML & Css

The document provides an overview of HTML including what hypertext and markup are, basic HTML tags and structure, text formatting tags, lists, and special characters. It covers headings, line breaks, horizontal rules, fonts, and more with examples of each tag.

Uploaded by

Santosh Kandari
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
20 views

HTML & Css

The document provides an overview of HTML including what hypertext and markup are, basic HTML tags and structure, text formatting tags, lists, and special characters. It covers headings, line breaks, horizontal rules, fonts, and more with examples of each tag.

Uploaded by

Santosh Kandari
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/ 43

Vikas Singh

HTML
HTML (HypertextMarkup Language): A Web Designing language that is used to create the structure

of the web document. All other technologies of the web development works with the html.

What is HyperText?
Hypertext means a text which is linked and controlled by another text.

What is Markup?
Markup is a Latin word which means print.

There are a few things you need before getting on with HTML. Let me list them out:

 A text editor
 A browser
 A storing device and some storage media
 Your creativity

HTML files are plain text files containing tags. Tags makes this plain text as hypertext.

Tags: Tags are like commands of the html. Tags are responsible to perform all the task in html.

Open Notepad:
Now type the following:

<HTML>
<HEAD>
<TITLE>My first HTML page</TITLE>
</HEAD>
<BODY>
This is my first HTML page.
</BODY>
</HTML>

Save this file with .html or .htm.

BASIC TAGS
THE <BR> TAG

To change the line.

<HTML>
<HEAD>
<TITLE>Testing the BR tag</TITLE>
</HEAD>
<BODY>
[1]
Vikas Singh
This is a long piece of text consisting of three
sentences and shows you the functions of the
Line Break tag. This tag is used quite frequently
to add line breaks in the HTML code. It is also used
to add blank lines to a document.
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Testing the BR tag</TITLE>
</HEAD>
<BODY>
This is a long piece of text consisting of three<BR>
sentences and shows you the functions of the<BR>
Line Break tag. This tag is used quite frequently<BR>
to add line breaks in the HTML code. It is also used<BR>
to add blank lines to a document.<BR>
</BODY>
</HTML>

The <BR> tag has no end tag because it doesn't need too. Just the presence of <BR> adds a line
break.

HTML BASIC HEADINGS:


There are six levels of headings in HTML specified by <H1>, <H2>, <H3>, <H4>, <H5> and <H6>
tags. The outputs of these in a browser are as follows:
<H1>I am heading 1</H1> gives:

I am heading 1
<H2>I am heading 2</H2> gives:

I am heading 2
<H3>I am heading 3</H3> gives:
I am heading 3
<H4>I am heading 4</H4> gives:
I am heading 4
<H5>I am heading 5</H5> gives:
I am heading 5
<H6>I am heading 6</H6> gives:
I am heading 6

[2]
Vikas Singh

Physical Tags
There are 10 physical tags each requiring a closing tag:

 <I> Italics: I am in italics


 <B> Bold: I am in bold
 <U> Underline: I am underlined
 <STRIKE> Strikethrough: I am struck!
 <SUP> Superscript: My superscript
 <SUB> Subscript: My subscript
 <TT> Typewriter: I am in typewriter form
 <BIG> Bigger font: I am bigger
 <SMALL> Smaller font: I am smaller
 <S> Strikethrough alternative: I am also struck!
 <del> deleted content: I am also deleted
 <ins> inserted content: I am inserted

Tag Nesting

<h1><center><u>Application Form</u></center></h1>

LOGICAL TAGS

There are 9 logical tags each requiring a closing tag:

 <STRONG> Strong: I am strong


 <EM> Emphasis: I am emphasized
 <ABBR> Abbreviation: I am abbreviated
 <CITE> Citation: Citation
 <CODE> Code: I am programming code
 <DFN> Definition: Definition
 <KBD> Keyboard: Quite like keyboard strokes
 <SAMP> Sample: Sample
 <VAR> Programming Variable: Programming Variable

HTML COMMENT TAG

Comments are some plain text that can be used within the program for documentation. This text is
not for the output file.

<HTML>
<HEAD>
<TITLE>Testing Comment tags in HTMLs</TITLE>
</HEAD>
<BODY>
I am visible.
<!-- I am not displayed by the browser -->
</BODY>
</HTML>

Your comments can span multiple lines as in:

[3]
Vikas Singh
<!--
This comment
spans multiple lines
making the code easy to read
after a few months.
-->

What are HTML Tag attributes?


Attributes are the properties of the tags to add additional features with the tag.

The ALIGN attribute


<H3 align="left">I am aligned to the left</H3> yields:

I am aligned to the left


<H3 align="right">I am aligned to the right</H3> yields:

I am aligned to the right


<H3 align="center">I am centrally aligned</H3> yields:

I am centrally aligned

The TITLE attribute


<H3 title="Here is my important heading">Some Important Heading</H3> is displayed as:

THE <HR> TAG

To draw a horizontal line.

WIDTH Attribute:

<HR width="50"> presents a rule which is 50 pixels in length as:

<HR width="70%"> specifies that the length of the rule should be 70% of the page's width as:

SIZE Attribute

<HR SIZE="1">: 1 pixel thick.

<HR SIZE="8">: 8 pixels thick.

<HR SIZE="30">: 30 pixels thick.

ALIGN Attribute: Left , center , right

[4]
Vikas Singh
<HR align="center" width="50%">: Centrally aligned; there is no need to specify this explicitly as
this is the default.

<HR align="left" width="50%">: Aligned to the left.

<HR align="right" width="50%">: Aligned to the right.

NOSHADE Attribute: You would have noticed that the horizontal rules are shaded, they have this
3D kind of effect. If you don't want this, use the NOSHADE attribute. NOSHADE takes no values.

<HR width="50%" NOSHADE SIZE="5">

<HR width="50%" NOSHADE SIZE="15">

COLOR Attribute:

<HR COLOR="BLUE" SIZE="4" NOSHADE>: Blue colored rule, 4 pixels in thickness.

<HR COLOR="RED" SIZE="10" width="50%" NOSHADE>: Red colored rule, 10 pixels in


thickness.

THE <MARQUEE> TAG

This tag is used to make a content movable with the browser.

<MARQUEE>

The <MARQUEE> tag provides some animated text to the page. Unfortunately, it is supported only
by Internet Explorer (and WebTV).

It has many attributes:

 BEHAVIOUR = ALTERNATE, SCROLL OR SLIDE


 BGCOLOR = #RRGGBB (The RGB code, explained in the color session) or Color-Name
such as "Blue", "Green" etc.
 DIRECTION = DOWN, LEFT, RIGHT OR UP
 HEIGHT = in pixels or percentage
 HSPACE = in pixels (the amount of horizontal space left)
 LOOP = number or INFINITE
 SCROLLAMOUNT = in pixels
 SCROLLDELAY = in milliseconds
 TITLE = some advisory text
 VSPACE = in pixels (amount of vertical space left)
 WIDTH = in pixels or percentage
[5]
Vikas Singh
 and the CLASS, ID and STYLE attributes if you use style sheets

Alternate Effect :

<marqueedirection="right"width="250"height="200"behavior="alternate">Hi</marquee>

Nested Marquee

<!doctype html><html><head><title></title></head><body>

<marquee direction="down" height="500px" behavior="alternate">

<marquee scrollamount="20" direction="right" >

<img src="car.jpg" >

</marquee>

</marquee>

</body></html>

Program 2:

<marqueedirection="down"width="250"height="200"behavior="alternate"style="border:sol
id">
<marqueebehavior="alternate">
hello
</marquee>
</marquee>

THE <FONT> TAG

 FACE: It's value/s specifies the font type.


 COLOR: Changes the color.
 SIZE: Changes Size.

Font FACE attribute

<FONT FACE="Times New Roman">This should be displayed in Times New Roman</FONT>

<FONT FACE="Arial">This should be displayed in Arial</FONT>

<FONT FACE="Verdana">This should be displayed in Verdana</FONT>

<FONT FACE="Comic Sans MS">This should be displayed in Comic Sans MS</FONT>

Font COLOR attribute

<FONT COLOR="RED">Red Text</FONT>

[6]
Vikas Singh
<FONT COLOR="BLUE">Blue Text</FONT>

<FONT COLOR="GREEN">Green Text</FONT>

Font SIZE attribute


<FONT SIZE="1">Some Text</FONT>

<FONT SIZE="2">Some Text</FONT>

<FONT SIZE="3">Some Text</FONT>

<FONT SIZE="4">Some Text</FONT>

<FONT SIZE="5">Some Text</FONT>


HTML LIST

 <OL> - </OL>: Ordered List


 <UL> - </UL>: Unordered List
 <DL> - </DL>: Definition List

HTML Ordered List


<OL>
<LI>Item One
<LI>Item Two
<LI>Item Three
<LI>Item Four
</OL>

The code above is displayed by the browser as

1. Item One
2. Item Two
3. Item Three
4. Item Four

Types:

 TYPE="a": Lowercase alphabet


 TYPE="A": Uppercase Alphabet
 TYPE="i": Lowercase Roman Numerals
 TYPE="I": Uppercase Roman Numerals
 TYPE="1": Regular number (default)

HTML Unordered List


<UL> - </UL> are the starting and ending tags of Unordered lists. List items are included using the
<LI> tag.
Unordered lists also support the TYPE attribute that takes disc, circle or square as its value.
<UL>
<LI>Item One

[7]
Vikas Singh
<LI>Item Two
<LI>Item Three
<LI>Item Four
</UL>

is displayed as

 Item One
 Item Two
 Item Three
 Item Four

Using TYPE="square" on the list above will result in

 Item One
 Item Two
 Item Three
 Item Four

HTML Definition List


<DL>
<DT>webdevelopersnotes.com
<DD>A great place to learn web development.
<DT>fontmagic.com
<DD>One of the largest font sites on the Internet.
</DL>

will be shown by the browser as:

webdevelopersnotes.com
A great place to learn web developement.
fontmagic.com
One of the largest font sites on the Internet.

Note that the definitions are indented.

[8]
Vikas Singh

HTML SPECIAL CHARACTERS:

Some special characters are not available in keyboard. We can use following short notations to print
it. These characters are also called character entities.

This notation can be of two types:


 &entity-name-shortform
 ;
 &#number;

Name Notation Number Notation Special Character


&amp; &#38; &
&lt; &#60; <
&gt; &#62; >
&trade; &#153; ™
&nbsp; &#160; Empty space
&cent; &#162; ¢
&pound; &#163; £
&yen; &#165; ¥
&copy; &#169; ©
&reg; &#174; ®
&deg; &#176; °
&frac14; &#188; ¼
&frac12; &#189; ½
&frac34; &#190; ¾
&times;
x

Note: All tags in HTML are enclosed by < and > signs. To display these signs, you have to use their
special character notations. Thus, to display <HTML>, you have to write the < and > signs in their
special notations as &lt;HTML&gt;.

THE HTML <A> TAG:

<A HREF="http://www.webdevelopersnotes.com">This will


take you to Webdevelopersnotes.com's main page</A>

Linking in the same document


<A NAME="top"></A>
<A HREF="#top" CLASS="text">Click here to go to the top</A>.

We can add a page, a url in link:

<A HREF="../../index.html">Homepage<A>

INCLUDING IMAGES IN WEB PAGES: HTML <IMG> TAG

[9]
Vikas Singh
Three kinds of images files .gif, .jpg and .png are used on the Internet.

The <IMG> tag has many attributes

 WIDTH: used for specifying the width of the image


 HEIGHT: specifies height
 BORDER: displays a border around the image
 ALT: helps to insert a descriptive text for users using text based browsers or for visitors with
visual disabilities.
 HSPACE: inserts space at the left and right of the image
 VSPACE: inserts space at the top and bottom of the image
 NAME: gives a name to the image; necessary for client-side scripting using JavaScript
 LOWSRC: provides a method through which a low quality alternate of the image is
displayed first before the final one starts to load.
 ALIGN: aligns other HTML elements such as text around the image.

CREATING HYPERLINKS USING IMAGES


<A HREF="../../index.html"><IMG SRC="backtohome.gif" WIDTH="150" HEIGHT="30" ALT="Takes you back to
homepage"></A>

The anchor tag places a colored border around the image. You can remove this border by specifying
"0" as the value of the BORDER attribute in the <IMG> tag.

<A HREF="../../index.html"><IMG SRC="backtohome.gif"


WIDTH="150" HEIGHT="30" ALT="Takes you back to homepage"
BORDER="0"></A>

Any image, whether .gif, .jpg, .png or animated gif can be made into a hot spot using this technique.

HTML - The <BODY> tag attributes

 TEXT: specifies color of normal text in a page


 LINK: determines link color
 VLINK: determines color of link that has been visited
 ALINK: specifies color of link when clicked
 BGCOLOR: controls the background color of the document
 BACKGROUND: enables us to use an image as background for the page.

HTML script - mailto: enabling emailing on your web site

<A HREF="mailto:[email protected]"></A>
Send me your feedback on this tutorial</A>

Adding Sound to your Web Page:

<A HREF="sound.mp3"><IMG SRC="h.jpg" BORDER="1"></A>


[10]
Vikas Singh

Adding a background sound to your pages


There are two common ways to do this.
For Internet Explorer:

Use<BGSOUND> tag as

<BGSOUND SRC="some_file.mid" LOOP="INFINITE">

For Internet Explorer and Netscape Communicator:

For a browser compatible background sound, use <EMBED> (see below for more details on this
tag).
<EMBED SRC="desprado.mid" HIDDEN="TRUE" AUTOSTART="TRUE"></EMBED>

Using a plug-in to play audio

If you want to make use of a plug-in, you would have to put the audio file inside an <EMBED> tag.

<EMBED SRC="sound.mp3" HIDDEN="TRUE" AUTOSTART="TRUE"></EMBED>

The <EMBED> tag takes many attributes. Some important ones are.

 SRC: the URL of the audio file.


 CONTROLS: important values associated with this attribute are CONSOLE and
SMALLCONSOLE. The CONSOLE value takes 144 as width and 60 as height. The width
and height for SMALLCONSOLE are 144 and 15, respectively.
 HEIGHT and WIDTH: These are required attributes of the <EMBED> tag. Their non-
inclusion might result in Netscape Communicator crashing! If you specify larger values for
these than demanded by the console's dimensions, gray space is added in the extra area.
 LOOP: The default value is FALSE which plays the audio file only once. When set to
TRUE, the file will loop continuously. LOOP can also take a number as value which specifies
the number of times the audio file will loop.
 AUTOSTART: Setting this to TRUE will play the audio file when the page loads, a FALSE
value will wait for the user to click on the play button on the console.
 HIDDEN: hides the console from view if value is set to TRUE; default value is FALSE.
Setting HIDDEN and AUTOSTART to TRUE will result in a similar effect as BGSOUND.
 VOLUME: takes a number between 0 and 100. The lesser the number, the lower the volume.
 ALIGN: LEFT or RIGHT
 HSPACE and VSPACE: similar to <IMG> attributes. They add horizontal or vertical space
around the console

HTML - Embedding Video


<EMBED SRC="mymovie.mov" WIDTH="200" HEIGHT="100"
AUTOPLAY="TRUE"></EMBED>

[11]
Vikas Singh
Audio tag:

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

Attribute Value Description

autoplay autoplay Specifies that the audio will start playing as soon as it is ready

controls controls Specifies that audio controls should be displayed (such as a


play/pause button etc)

loop Loop Specifies that the audio will start over again, every time it is finished

muted muted Specifies that the audio output should be muted

preload auto Specifies if and how the author thinks the audio should be loaded
metadata when the page loads
none

src URL Specifies the URL of the audio file

Video Tag:

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

Attribute Value Description

autoplay autoplay Specifies that the video will start playing as soon as
it is ready

controls controls Specifies that video controls should be displayed


(such as a play/pause button etc).

height pixels Sets the height of the video player

loop loop Specifies that the video will start over again, every
time it is finished

muted muted Specifies that the audio output of the video should
be muted
[12]
Vikas Singh

poster URL Specifies an image to be shown while the video is


downloading, or until the user hits the play button

preload auto Specifies if and how the author thinks the video
metadata should be loaded when the page loads
none

src URL Specifies the URL of the video file

width pixels Sets the width of the video player

<video controls poster="/images/w3html5.gif">


<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

HTML <TABLE> TAG


<TABLE BORDER="1">
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
</TABLE>
Cell 1 Cell 2 Cell 3

<TABLE BORDER="1">
<TR>
<TD>Row 1, Cell 1</TD>
<TD>Row 1, Cell 2</TD>
<TD>Row 1, Cell 3</TD>
</TR>
<TR>
<TD>Row 2, Cell 1</TD>
<TD>Row 2, Cell 2</TD>
<TD>Row 2, Cell 3</TD>
</TR>
</TABLE>
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3

Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3

Attributes of <TABLE>
 ALIGN:
 BACKGROUND:
 BGCOLOR:
 BORDER:
 BORDERCOLOR:
[13]
Vikas Singh
 BORDERCOLORDARK and BORDERCOLORLIGHT:
 CELLPADDING:
 CELLSPACING:
 FRAME: <table frame=”void”> {lhs, rhs, above,below,hsides,vsides,box}
 HEIGHT:
 WIDTH:

Attributes of <TD> Tag


 ALIGN:
 VALIGN:
 BGCOLOR:
 BORDERCOLOR, BORDERCOLORDARK and BORDERCOLORLIGHT:
COLSPAN and ROWSPAN:
 HEIGHT and WIDTH:

Attributes of <TR> Tag


 ALIGN:
 BGCOLOR:
 BORDERCOLOR:
 BORDERCOLORDARK and BORDERCOLORLIGHT:

Rowspan & Colspan

<THEAD>, <TBODY> and <TFOOT> tags.

HTML FRAMES:

Important attributes of <FRAMESET>


 BORDER:
 BORDERCOLOR:
 FRAMEBORDER:
 FRAMESPACING:
 COLS and ROWS:

What is the wildcard "techie" term


A wildcard character matches any character or sequence of characters. So if you type DIR *.html at
DOS prompt, you shall get a listing of all html files in that directory. A wildcard is not used in that
sense in COLS and ROWS. Here it signifies " rest of ".
So,
COLS="200, *"
will tell the browser to allocate 200 pixels vertically for the first frame and the rest for the second
frame.

Similarly,
ROWS="10%, *"

[14]
Vikas Singh
will place the first frame in 10% of horizontal space and the rest will be occupied by the second
frame.

Important attributes of <FRAME>


 SRC:
 BORDERCOLOR:
 FRAMEBORDER:
 MARGINWIDTH:
 MARGINHEIGHT:
 NAME:
 NORESIZE:
 SCROLLING:

HTML links - Target attribute of anchor tag

 _blank: Indicates a new window.


 _parent: Specifies the parent frame which contains the source link.
 _self: The meaning is very much obvious. The new document is loaded in the same frame.
 _top: This indicates a new document window. It is a good way to break out of frames and
load the document in the same window.
 frame-name: You can use this to specify in which frame the document should be loaded.
 RESOURCE WINDOW: This loads the document in a new browser window. This is same
as _blank.

HTML frames - Inline Frames (<iframe>)

 SRC: A required attribute that takes the URL of a page as value and loads it in the frame.
 ALIGN: aligns the inline frame with respect to other elements on the page. Values taken are
'TOP', 'BOTTOM', 'MIDDLE', 'LEFT' and 'RIGHT'.
 HEIGHT and WIDTH: Specifies the dimensions in pixels.
 HSPACE and VSPACE: Specifies amount of horizontal and vertical space to be put around
the inline frame. Value has to be a number that denotes pixels.
 MARGINHEIGHT and MARGINWIDTH: Determines the amount of space in pixels
between the left-right and top-bottom edges of the frame and its contents.
 FRAMEBORDER: Value can be '1' which puts a 3D border around the frame or '0' which
removes this border.
 SCROLLING: A value of 'YES' forces the display of scrollbars. 'NO' removes scrollbars
even if they are needed. 'AUTO' lets the browser decide on inclusion of scroll bars depending
on the contents.
 NORESIZE: Prevents users from resizing the frame.
 NAME: Assigns a name to the frame so that it can be referred by it.

HTML FORM:
 <INPUT TYPE="TEXT">
 <INPUT TYPE="PASSWORD">
 <INPUT TYPE="RADIO">
 <INPUT TYPE="CHECKBOX">
[15]
Vikas Singh
 <INPUT TYPE="BUTTON">
 <INPUT TYPE="RESET">
 <INPUT TYPE="SUBMIT">
 <INPUT TYPE="HIDDEN">
 <INPUT TYPE="IMAGE">
 <INPUT TYPE="FILE">
 <SELECT>...</SELECT>
 <TEXTAREA>...</TEXTAREA>
 <BUTTON>...<BUTTON>
 <OPTION>...</OPTION>

The attributes associated with this tag are:

 NAME: Sets a name for this form element. You can give any name to your text field as long
as you don't duplicate it in the same form.
 SIZE: Determines the size. The value taken is a number.
 MAXLENGTH: Specifies the number of characters a user can submit thru this element.
 VALUE: Specifies a default value that is displayed inside the text field when a user first
opens the page.

<INPUT TYPE="CHECKBOX">
 CHECKED:
 NAME:
 VALUE:

<INPUT TYPE="RADIO">
 CHECKED:
 NAME:
 VALUE:

HTML form

<INPUT TYPE="FILE">
Attributes taken are:

 ACCEPT: Its value is a MIME type/s that your server program is ready to accept. A comma-
separated list of mime types can be supplied.
 NAME: Specifies a name for the element.
 VALUE: Specifies the default text inside the text field.

<INPUT TYPE="FILE" NAME="uploadfile" VALUE="">

<INPUT TYPE="IMAGE">
This is a great tag allowing designers to make their own buttons. With its use you can replace the dull
default button with a colorful image.

There are four attributes associated with this tag

[16]
Vikas Singh
 SRC: a required attribute that points to the URL of the image file.
 NAME: Gives a name to the element.
 ALIGN: aligns the surrounding text with respect to the image.
 BORDER: sets the border around the image. If zero is assigned as its value, no border is displayed.

<INPUT TYPE="IMAGE" SRC="but.gif" NAME="sub_but" BORDER="0">

<INPUT TYPE="HIDDEN">
This creates a form input field which is not displayed in the browser. It is ideal for passing values set
by the programmer or by certain actions of the user.

It has only two attributes.

 NAME: Defines a name for the element.


 VALUE: Sets a value for the element.

<INPUT TYPE="HIDDEN" NAME="birthday" VALUE="16-03-72">

HTML form code - HTML Forms part 3

<SELECT>... </SELECT> form element


The attributes taken are:

 NAME: defines a name for this element.


 SIZE: if the size is '1', the list is displayed as a dropdown menu else as a scrolling list.
 MULTIPLE: allows for multiple selection.

Here is how you create a four-item drop down selection list.

Which system do you use?


<SELECT NAME="platform" SIZE="1">
<option value=”select city” hidden>Select City
<OPTION VALUE="win">Windows
<OPTION VALUE="mac">Macintosh
<OPTION VALUE="unix">Unix
<OPTION VALUE="oth">Other
</SELECT>

Which system do you use?

<OPTION></OPTION>
 VALUE:
 SELECTED:
[17]
Vikas Singh
Which system do you use?
<SELECT NAME="platform" SIZE="1">
<OPTION VALUE="win">Windows
<OPTION VALUE="mac">Macintosh
<OPTION VALUE="unix" SELECTED>Unix
<OPTION VALUE="oth">Other
</SELECT>

HTML form TEXTAREA elements


This creates a multi-line text box. Its attributes are:

 NAME: Defines a name for this element.


 COLS: Specifies the number of character columns. Thus, a value of 20 means that the text
box is twenty character in width.
 ROWS: Determines the height of text box in terms of character rows.
 WRAP: Sets word wrapping inside the text box and can take off, virtual or physical as
value. 'Off' turns word wrapping off. Through 'virtual', word wrapping is turned on but the
line endings are not transmitted to the server. 'Physical' displays and sends the line endings to
the server.

To define a value for the TEXTAREA, include the text between the start and end tags.

<TEXTAREA NAME="query" COLS="20" ROWS="5">


Please type your query here.

Fieldset: to draw a line around the grouped element of a form by fiedlset tag .

Legend: to give a caption for fieldset box.

<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

Datalist : it is used to show predefined option to fill a form field.

<label for="Course">Choose your browser from the list:</label>


<input list="Course">

<datalist id="Course">

[18]
Vikas Singh
<option value="CSS">
<option value="JAVASCRIPT">
<option value="REACT">
<option value="DJANGO">
</datalist>

<BUTTON>...........</BUTTON>
 NAME:
 TYPE:
 VALUE:

New Form Elements

New Input Types

New Input Types New Input Attributes

 Color  autocomplete
 date  autofocus
 datetime  form
 datetime-local  formaction
 email  formenctype
 month  formmethod
 number  formnovalidate
 range  formtarget
 search  height and width
 tel  list
 time  min and max
 url  multiple
 week  pattern (regexp)
 placeholder
 required
 step

[19]
Vikas Singh
Input Type: number
The <input type="number"> is used for input fields that should contain a numeric value.
You can set restrictions on the numbers.
Depending on browser support, the restrictions can apply to the input field.
Example
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Example
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Input Type: date


The <input type="date"> is used for input fields that should contain a date.
Example
<form>
Birthday:
<input type="date" name="bday">
</form>

You can add restrictions to the input:


Example
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>

Input Type: color


The <input type="color"> is used for input fields that should contain a color.
Example
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>

Input Type: range


The <input type="range"> is used for input fields that should contain a value within a range.
Depending on browser support, the input field can be displayed as a slider control.
Example
<form>
<input type="range" name="points" min="0" max="10">
</form>

[20]
Vikas Singh
You can use the following attributes to specify restrictions: min, max, step, value.

Input Type: month


The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>

Input Type: week


The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Select a week:
<input type="week" name="week_year">
</form>

Input Type: time


The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
Select a time:
<input type="time" name="usr_time">
</form>

Input Type: datetime


The <input type="datetime"> allows the user to select a date and time (with time zone).
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>

Input Type: datetime-local


The <input type="datetime-local"> allows the user to select a date and time (no time zone).
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>

Input Type: email


The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when submitted.
Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input.
[21]
Vikas Singh
Example
<form>
E-mail:
<input type="email" name="email">
</form>

Input Type: search


The <input type="search"> is used for search fields (a search field behaves like a regular text
field).
Example
<form>
Search Google:
<input type="search" name="googlesearch">
</form>

Input Type: tel


The <input type="tel"> is used for input fields that should contain a telephone number.
The tel type is currently supported only in Safari 8.

Example
<form>
Telephone:
<input type="tel" name="usrtel">
</form>

Input Type: url


The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
Add your homepage:
<input type="url" name="homepage">
</form>

Differences between HTML4 and HTML5:

[22]
Vikas Singh
HTML5 Semantic Elements
New Semantic Elements in HTML5
 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>

Input Restrictions
Here is a list of some common input restrictions (some are new in HTML5):
Attribute Description
Disabled Specifies that an input field should be disabled
Max Specifies the maximum value for an input field
Maxlength Specifies the maximum number of characters for an input field
Min Specifies the minimum value for an input field
Readonly Specifies that an input field is read only (cannot be changed)
Required Specifies that an input field is required (must be filled out)
Size Specifies the width (in characters) of an input field
Step Specifies the legal number intervals for an input field
Value Specifies the default value for an input field
Autocomplete=”on” To autocomplete entries
Autofocus To auto focus on a box

Details Tag:
<h1>What is computer</h1>
<details>
<summary>Definition</summary>
<p>Computer is an electronic device which is derived from human intelligence. It accepts raw facts
and figures and convert it into meaningful information. </p>
</details>
Figure and figcaption

<figure>
<img src="n1.jpg" alt="nature" style="width:100%">
<figcaption>Figure.1 : Beauty of Nature</figcaption>
</figure>
Progress bar:

<label for="file">Progress Bar:</label>


<progress id="file" value="52" max="100"></progress>

[23]
Vikas Singh

Client-side Image Maps


<IMG SRC="sitemap.gif" WIDTH="200" HEIGHT="300" BORDER="0"
USEMAP="#site">

<MAP>...</MAP>
<MAP NAME="site">
...
Content
...
</MAP>

<AREA> tags and attributes


The main content of the image map resides inside <AREA> tags. Their important attributes are:

 HREF: Takes a URL as value and provides a link to that document.


 SHAPE: The values for this attribute can be RECT, CIRCLE, POLY or DEFAULT.
 COORDS: Takes a comma-separated list of values. Depending upon the shape, this value
changes.
 TARGET: Specifies the window in which to load the document. This attribute is the same as
that for <A>.
 NOHREF: This is employed when you do not want areas to be linked to any documents.
Used often with the DEFAULT value of SHAPE mentioned above.
 NAME: This defines an area that can be used for scripting, by older browsers.

<MAP NAME="site">

<AREA HREF="../../index.html" SHAPE="RECT" COORDS="5,6,95,25">


<AREA HREF="../../basics/index.php3" SHAPE="RECT"
COORDS="61,43,109,60">
<AREA HREF="../index.php3" SHAPE="RECT" COORDS="61,65,125,83">
<AREA HREF="../../graphics/index.php3" SHAPE="RECT"
COORDS="61,88,124,106">
<AREA HREF="../../tips/index.php3" SHAPE="RECT"
COORDS="61,112,164,129">
<AREA HREF="../../design/index.php3" SHAPE="RECT"
COORDS="61,133,145,152">
<AREA HREF="../../promotion/index.php3" SHAPE="RECT"
COORDS="61,158,161,174">
<AREA HREF="../../se/index.php3" SHAPE="RECT"
COORDS="61,180,168,199">
<AREA HREF="../../software/index.php3" SHAPE="RECT"
COORDS="61,204,128,221">
<AREA HREF="../../services/index.php3" SHAPE="RECT"
COORDS="61,227,158,244">
<AREA HREF="../../feedback.php3" SHAPE="RECT"
COORDS="61,249,142,267">
<AREA HREF="../../feedback.php3" SHAPE="CIRCLE"
COORDS="145,25,40"></MAP>

[24]
Vikas Singh
Meta Tags - HTML Meta tags - Keyword - Refresh - Redirect

Meta tags are generally used to include information about a document such as author name, creation
date, copyright information etc. They always placed between the <HEAD> tags of an HTML
document.

Each Meta tag has two important attributes:

 HTTP-EQUIV or NAME
 CONTENT

<META HTTP-EQUIV="some_name" CONTENT="some_content">

OR

<META NAME="some_name" CONTENT="some_content">

<META HTTP-EQUIV>
The HTTP-EQUIV attribute takes one of the values mentioned below:

 CONTENT-TYPE: The most commonly used content type is text/html. Other types can be
employed to include the character set for the document. This helps the browser to load the
appropriate character before document display.
 EXPIRES: Specifies the date and time after which a document should be considered expired.
This can be used by web robots update content in a search engine.
 CACHE-CONTROL: Determines the caching of the document.
 CONTENT-LANGUAGE: Used to specify the language in which the document is written.
 REFRESH: This value is commonly used to either redirect users to a different page or refresh the
contents of the present page.

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html">


<META HTTP-EQUIV="EXPIRES" CONTENT="May 1, 2002 00:00:00 EST">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="no-cache">
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="hi">
<META HTTP-EQUIV="REFRESH" CONTENT="5">

Note that all the META tags with HTTP-EQUIV attributes also contain the CONTENT attribute.

The HTTP-EQUIV="REFRESH" demands more attention here, so let us have a detailed look at it.
The tag above simply refreshes the contents of the page in 5 seconds. However, you can supply a
URL to this tag, which redirects users to that page.

<META HTTP-EQUIV="REFRESH" CONTENT="2; URL=new.html">

This takes the user to new.html after 2 seconds.

Note that there is only one set of quotes that encloses the content of CONTENT. Both the time in
seconds and the URL are inside the same quotes.

A cheap trick is to construct a looping (or non-looping) slide show making use of these tags. Let's
say you have three html pages named slide1.html, slide2.html and slide3.html. You can make a
looping slide show by including the appropriate META tag in each document.
[25]
Vikas Singh
slide1.html contains
<META HTTP-EQUIV="REFRESH" CONTENT="10; URL=slide2.html">

slide2.html contains
<META HTTP-EQUIV="REFRESH" CONTENT="10; URL=slide3.html">

slide3.html contains
<META HTTP-EQUIV="REFRESH" CONTENT="10; URL=slide1.html">

To start the slide-show, load slide1.html in the browser. After 10 seconds, slide1.html is replaced by
slide2.html, which is again replaced by slide3.html after 10 seconds. Finally, after another 10
seconds, slide1.html replaces slide3.html and thus, the slide-show keeps on looping. Note that the
<META> tag is placed in the head section of each document.

<META NAME>
Though there are some fixed values for the NAME attribute, you can construct your own meta tags
with it. Let's look at the important values

 KEYWORDS: You can supply keywords for your pages using this. It helps in indexing by
search engines. Takes a list of comma separated keywords.
 COPYRIGHT: Contains copyright information.
 DESCRIPTION: lets you specify a description of the page.
 AUTHOR: You can write your name here.
 ROBOTS: This tag is used to stop your pages from being indexed by robots. Its an
alternative to the robots.txt file.

<META NAME="KEYWORDS" CONTENT="movies, hollywood, actors">


<META NAME="COPYRIGHT" CONTENT="2001, Some_Company_Name">
<META NAME="DESCRIPTION" CONTENT="Information on the greatest
movies ever">
<META NAME="AUTHOR" CONTENT="your_name">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

About CSS
What does CSS stand for?
CSS stands for Cascading Style Sheets.

What is CSS?
CSS is a language that you can use to define styles against any HTML element. These styles are set
using CSS properties.For example, you can set font properties (size, colors, style etc), background
images, border styles, and much more.

HTML has its limitations when it comes to layout. CSS helps us achieve such layouts. With CSS,
you have much better control over the layout of your web pages. You can specify exactly how big a
font will be, exactly where an element will be on a page, what the page will look like when printed,
and much more.

[26]
Vikas Singh
Advantages of CSS
 CSS saves time
When most of us first learn HTML, we get taught to set the font face, size, colour, style etc
every time it occurs on a page. This means we find ourselves typing (or copying & pasting)
the same thing over and over again. 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, you only have to make an edit in one place.
 Superior styles to HTML
CSS has a much wider array of attributes than HTML.

Disadvantages of CSS
 Browser compatibility
Browsers have varying levels of compliance with Style Sheets. This means that some Style
Sheet features are supported and some aren't. To confuse things more, some browser
manufacturers decide to come up with their own proprietary tags.
Fortunately, browser compatibility is becoming less of an issue as the latest browser versions
are much more standards-compliant than their earlier counterparts.

The CSS syntax consists of a set of rules. These rules have 3 parts: a selector, a property, and a value.

Syntax: Selector {Property:value}

The selector is often the HTML element that you want to style. For example: h1{color:blue}

This code tells the browser to render all occurrences of the HTML <h1> element in blue.

Grouping Selectors:
You can apply a style to many selectors if you like. Just separate the selectors with a comma.

Applying Multiple Properties


To apply more than one property separate each declaration with a semi-colon.

h1 { color:blue; font-family:arial,helvetica,"sans serif" }

List of CSS Properties And Values

Text Properties

Properties Values Examples/Notes CSS Level

font-family family-name Arial, Tahoma CSS1


generic-family serif, sans-serif

font-size (pt), (px), (percent) pt is Point, i.e. 12pt. CSS1


[27]
Vikas Singh
px is Pixel, i.e. 20px.

font-stretch normal, wider, narrower, CSS2


ultra-condensed, extra-
condensed, condensed,
semi-condensed, semi-
expanded, expanded, extra-
expanded, ultra-expanded,
inherit

font-style normal, italic, oblique CSS1

font-variant normal, small-caps CSS1

font-weight normal, bold, bolder, Number can be 100, 200, CSS1


lighter, (number), xx-small, 300, 400, 500, 600, 700,
x-small, small, medium, 800, or 900.
large, x-large, xx-large,
larger, smaller

Font Any of the above values {font: italic bold 10px arial} CSS1
separated by spaces.

letter-spacing normal, 1em 1em, 2em, and so on. CSS1

text-align left, right, center, justify CSS1

text-decoration none, underline, overline, CSS1


line-through, blink

text-shadow none, color length length CSS2


length, inherit

text-transform none, capitalize, uppercase, CSS1


lowercase

text-indent (length), (percent) Length is in pixels. CSS1

word-spacing normal, 1em 1em, 2em, and so on. CSS1

Color/Background Properties

Properties Values Examples/Notes CSS Level

background-attachment scroll, fixed CSS1

[28]
Vikas Singh
background-color (color), transparent Color is in hex code. CSS1

background-image none, url(“path”) CSS1

background-position (percent), (length), CSS1

Left top, left center, left


bottom, center top, center
center, center bottom, right
top, right center, right bottom

background-repeat repeat, repeat-x, repeat-y, CSS1


no-repeat

Background-size Auto, contain, cover, 50%,


100px

background-origin: content-box, border-


box,padding-box

background- Border-box,padding-
clip: padding-box; box,content-box

Background Any of the above {background: URL(back.gif) CSS1


background values repeat fixed}
separated by spaces.

Color (color) Color is in hex code. This CSS1


refers to the foreground
color.

Box Properties

Properties Values Examples/Notes CSS Level

margin-bottom (length), (percent), auto Length is in pixels. CSS1

margin-left (length), (percent), auto Length is in pixels. CSS1

margin-right (length), (percent), auto Length is in pixels. CSS1

margin-top (length), (percent), auto Length is in pixels. CSS1

Margin Any of the above margin {margin: 5px 2px 5px 3px} CSS1
values in top, right, bottom, When only one value is
left order separated by present, all margins are
spaces. affected.

padding-bottom (length), (percent) Length is in pixels. CSS1

[29]
Vikas Singh
padding-left (length), (percent) Length is in pixels. CSS1

padding-right (length), (percent) Length is in pixels. CSS1

padding-top (length), (percent) Length is in pixels. CSS1

Padding Any of the above padding {padding: 5em 6em 3em CSS1
values in top, right, bottom, 6em}
left order separated by When only one value is
spaces. present, all sides are
affected.

border-bottom-width medium, thin, thick, (length) Length is in pixels. CSS1

border-bottom Any of the border-top- {border-bottom: thin inset CSS1


bottom, border-color and blue}
border-style values.

border-color (color) Color is in hex code. CSS1

border-left-width medium, thin, thick, (length) Length is in pixels. CSS1

border-left Any of the border-top-left, {border-left: thick inset CSS1


border-color and border- green}
style values.

border-right-width medium, thin, thick, (length) Length is in pixels. CSS1

border-right Any of the border-right- {border-right: thin inset CSS1


width, border-color and blue}
border-style values.

border-style none, dotted, dashed, solid, CSS1


double, groove, ridge, inset,
outset

border-top-width medium, thin, thick, (length) Length is in pixels. CSS1

border-top Any of the border-top- {border-top: thin inset red} CSS1


width, border-color and
border-style values.

Border Any of the border values. {border: medium blue} CSS1


Applies to all borders.

Height auto, (length), (percent) Length is in pixels. CSS1

Width auto, (length), (percent) Length is in pixels. CSS1

[30]
Vikas Singh
Classification

Properties Values Examples/Notes CSS Level

list-style-type disc, circle, square, decimal, CSS2


lower-roman, upper-roman,
lower-alpha, upper-alpha,
upper-latin, hebrew,
armenian, georgian, cjk-
ideographic, hiragana,
katakana, hiragana-iroha,
katakana-iroh, none

list-style-image none, (url) CSS1

list-style-position outside, inside CSS1

list-style Any of the above list-style {list-style: disc inside} CSS1


values separated by spaces.

white-space normal, pre, nowrap CSS1

Visual Effects

Properties Values Examples/Notes CSS Level

Clip auto, (shape) Currently, the only valid CSS2


shape is
"rect(top,right,bottom,left)".

Cursor auto, crosshair, default, CSS1


pointer, move, e-resize, ne-
resize, nw-resize, n-resize,
se-resize, sw-resize, s-resize,
w-resize, text, wait, help

outline-width medium, thin, thick, CSS2


(length), inherit

outline-style none, dotted, dashed, solid, CSS2


double, groove, ridge, inset,
outset

outline-color (color), invert, inherit CSS2

Outline Any of the above outline {outline: dotted thick} CSS2


values separated by spaces.

Overflow visible, hidden, scroll, auto CSS2

[31]
Vikas Singh
Visibility inherit, visible, hidden CSS2

Generated content, automatic numbering, and lists

Properties Values Examples/Notes CSS Level

Cont (string), (uri), (counter), Used with the :before, :after CSS2
attr(X), open-quote, close- pseudo-elements.
Ent quote, no-open-quote, no-
close-quote, inherit

counter-reset (identifier) (integer), none , Used with the counter() and CSS2
inherit counters() functions of the
content property.

counter-increment (identifier) (integer), none , Used with the counter() and CSS2
inherit counters() functions of the
content property.

marker-offset (length), auto, inherit CSS2

Quotes (string)(string) or more, CSS2


inherit

Visual Formatting

Properties Values Examples/Notes CSS Level

Bottom auto, inherit, (length), Length is in pixels. CSS2


(percent)

Clear none, left, right, both, CSS1


inherit

Direction ltr, rtl, inherit ltr - Left-to-Right CSS2


rtl - Right-to-Left

Display inline, block, list-item, run- CSS2


in, compact, marker, table,
inline-table, table-row-
group, table-header-group,
table-footer-group, table-
row, table-column-group,
table-column, table-cell,
table-caption, none, inherit

Float none, left, right, inherit CSS1

[32]
Vikas Singh
Height auto, inherit, (length), Length is in pixels. CSS2
(percent)

line-height normal, (length), (percent) Length is in pixels. CSS1

Left auto, inherit, (length), Length is in pixels. CSS2


(percent)

max-height none, inherit, (length), Length is in pixels. CSS2


(percent)

max-width none, inherit, (length), Length is in pixels. CSS2


(percent)

min-height inherit, (length), (percent) Length is in pixels. CSS2

min-width inherit, (length), (percent) Length is in pixels. CSS2

Position static, absolute, relative, CSS2


fixed, inherit

Right auto, inherit, (length), Length is in pixels. CSS2


(percent)

Top auto, inherit, (length), Length is in pixels. CSS2


(percent)

unicode-bidi normal, embed, bidi- Length is in pixels. CSS2


override, inherit

vertical-align baseline, sub, super, top, CSS1


text-top, middle, bottom,
text-bottom, (percent)

Width auto, (length), (percent) Length is in pixels. CSS2

z-index auto, inherit, (integer) CSS2

Tables

Properties Values Examples/Notes CSS Level

border-collapse collapse, separate, inherit CSS2

border-spacing (length)(length), inherit CSS2

caption-side top, bottom, left, right, CSS2


inherit

[33]
Vikas Singh
empty-cells show, hide, inherit CSS2

speak-header once, always, inherit CSS2

table-layout auto, fixed, inherit CSS2

Implementing CSS
There are 4 ways of implementing CSS: declare inline, embed into the head of your document, link
to an external CSS file, import a CSS file.

Inline CSS
Style sheet information is applied to the current element. Instead of defining the style once, then
applying the style against all instances of an element (say the <p> tag), you only apply the style to the
instance you want the style to apply to.

For example:

<p style="color:#ff9900">CSS tutorial.</p>

Embedded CSS
You embed CSS information into an HTML document using the 'style' element. You do this by
embedding the CSS information within <style>... </style> tags in the head of your document.

For example, place the following code between the <head>... </head> tags of your HTML
document:

<style type="text/css" media=screen>

p {color:#ff9900;}

</style>

Now, whenever any of those elements are used within the body of the document, they will be
formatted as instructed in the above style sheet.

External CSS
An external style sheet is a separate file where you can declare all the styles that you want to use
throughout your website. You then link to the external style sheet from all your HTML pages. This
means you only need to set the styles for each element once. If you want to update the style of your
website, you only need to do it in one place.

For example:

1. Type the following into a plain text file, and save with a .css extension (eg,
external_style_sheet.css).
[34]
Vikas Singh
p {font-family: georgia, serif; font-size: x-small;}

h1 {color: #000099; }

2. Add the following between the <head>... </head> tags of all HTML documents that you
want to reference the external style sheet.

<link rel="stylesheet" href="external_style_sheet.css" type="text/css">

Imported CSS
You can use the @import rule to import rules from other style sheets.

Add either of the following between the <head>... </head> tags of all HTML documents that you
want to import a style sheet into.

In CSS, classes allow you to apply a style to a given class of an element. To do this, you link the
element to the style by declaring a style for the class, then assigning that class to the element.

In CSS, classes allow you to apply a style to a given class of an element. To do this, you link the
element to the style by declaring a style for the class, then assigning that class to the element.

[35]
Vikas Singh

CSS Class Syntax


You declare a CSS class by using a dot (.) followed by the class name. You make up the class name
yourself. After the class name you simply enter the properties/values that you want to assign to your
class.

.class-name { property:value; }

If you want to use the same class name for multiple elements, but each with a different style, you can
prefix the dot with the HTML element name.

html-element-name.class-name { property:value; }

CSS Class Example


<head>

<style type="text/css">

div.css-section { border:1px dotted red; }

p.css-section { color:green; }

</style>

You can also select elements (or classes) that's nested within another element or class. For example,
div.css-section p will select all <p> elements that are nested within a <div> element that uses the
.css-section class.

One major benefit of doing this is that you don't need to apply a class to every instance of an element
when it's nested within another element that uses a class.

Here's an example:

<body>

<div class="css-section">CSS Class

<p>CSS classes can be very useful</p>

</div>

</body>

Using div.css-section>p (note the >) will only select the first<p> element inside the same <div>
element.

IDs allow you to assign a unique identifier to an HTML element. This allows you to define a style
that can only be used by the element you assign the ID to.

[36]
Vikas Singh

CSS ID Syntax
The syntax for declaring a CSS ID is the same as for classes - except that instead of using a dot, you
use a hash (#).

#id-name { property:value; }

Again, similar to classes, if you want to use the same id name for multiple elements, but each with a
different style, you can prefix the hash with the HTML element name.

html-element-name#id-name { property:value; }

CSS ID Example
<head>
<style type="text/css">
div#css-section { border:1px dotted red; }
</style>
</head>
<body>
<div id="css-section">CSS IDs can be very useful</div>
</body>
A{}

A:link{}

A:visited{}

A:hover{}

A:active{}

Units: Absolute Units ( cm, mm, in , px(1inch=96px), pt(1inch=72pt), pc(1pc=12pt)

Relative Units(em(direct parent), rem(root parent), vh(1% of View port height), vw(1%
of view port width), % relative to parent

Cursor:

cursor: alias, all-scroll,auto,cell,context-menu,col-


resize,copy,crosshair,default,e-resize;}
, ew-resize, grab, grabbing, help, move,n-resize, ne-resize,-resize,-resize;,
nw-resize, nwse-resize, no-drop,not-allowed, pointer,progress,row-resize, s-
resize, se-resize,sw-resize, text,w-resize,zoom-in,zoom-out

*{box-sizing:border-box;}

Div{border:2px solid red}

Div{border:3px solid blue!important}


[37]
Vikas Singh
<div style=”border:1px solid yellow”><p> hello </p></div>

box-shadow:40px 20px 10px 20px green inset,-40px -20px 10px 20px green inset;

box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;

filter: filter:The filter property defines visual effects (like blur and saturation) to
an element (often <img>).

img {
filter: grayscale(100%);
}

none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |


hue-rotate() | invert() | opacity() | saturate() | sepia() |

Background-image:Linear-gradient(to right,red,green,blue)

Background-image:Linear-gradient(120deg,yellow,blue)

Background-image:Radial-gradient(circle,green 30%,blue 30%,red 40%)

Background-image:Conic-gradient(red,green,blue)

background-image: repeating-conic-gradient(red 10%, yellow 20%);

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

background-image:repeating-radial-gradient(circle,red ,
yellow ,green10%);

<!DOCTYPEhtml>
<html>
<head>
<style>
#first {
height: 150px;
width: 150px;
background-image: radial-gradient(closest-side at 60%55%, red, yellow,
black);
}
#second {
height: 150px;
width: 150px;
background-image: radial-gradient(farthest-side at 60%55%, red, yellow,
black);
}
#third {
height: 150px;
[38]
Vikas Singh
width: 150px;
background-image: radial-gradient(closest-corner at 60%55%, red,
yellow, black);
}
#fourth {
height: 150px;
width: 150px;
background-image: radial-gradient(farthest-corner at 60%55%, red,
yellow, black);
}
</style>
</head>
<body>
<h2>closest-side:</h2>
<divid="first"></div>
<h2>farthest-side:</h2>
<divid="second"></div>
<h2>closest-corner:</h2>
<divid="third"></div>
<h2>farthest-corner (default):</h2>
<divid="fourth"></div>
</body>
</html>

opacity:0.5;

overflow:visible

overflow:scroll

overflow:auto

overflow:hidden

resize:none or both or horizontal or vertical

resize works only with overflow scroll, auto, hidden

box-sizing:border-box: to add padding in side.

Float: left or right

Clear:left or right

display: block, inline, inline-block , none

#dv{visibility:hidden} // hide the element but remains the area of the element

#dv{display:none} // hide the element with its area


[39]
Vikas Singh
position: static absolute, relative, fixed, sticky (left right top bottom works with absolute,
relative,fixed and sticky)

z-index:1;

flex box

make parent:

display:flex

flex-direction:row or row-reverse or column or column-reverse

flex-wrap:nowrap or wrap or wrap-reverse

flex-flow:row wrap

justify-content:center or flex-start or flex-end or space-around or space-between

align-items:stretch or center or flex-start or flex-end

Transform

A:hover{display:inline-block;transform:scale(2,3)}

2 multiply of current width

3 multiply of current height

Scalex(2) only for width

Scaley(3) only for height

A:hover{display:inline-block;transform:rotate(90deg)}

A:hover{display:inline-block;transform:translate(20px,30px)}

A:hover{display:inline-block;transform:skew(30deg,35deg)}
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Transition:

transition-property:width or background-color or all

transition-duration:1s

transition-delay:2s

transition-timing-function:ease-in-out;

Transition: property,duration,transition-timing-function,delay

<style>div {width: 100px;height: 100px;background: red;transition-property: width;

transition-duration: 2s; transition-timing-function: linear;transition-delay: 1s;


[40]
Vikas Singh
}div:hover {width: 300px;}

[41]
Vikas Singh
Animation:

media query

@media screen and (min-width: 480px) {

#leftsidebar {width: 200px; float: left;}

#main {margin-left: 216px;}

<html>
<head>
<title> First Web Page</title>
<style>
#x{height:500px;width:600px;background-color: blue;}
@mediascreen and (max-width:500px) and (max-height:400px){
#x{height: 200px;width: 200px;}
}
</style>
</head>
<body>
<divid="x"></div>
</body>
</html>

<style>
#dv1{height: 400px;width: 500px;background-color: red;font-size: 15vw;}
@mediascreen and (max-width:600px){
#dv1{height: 200px;width: 200px;background-color: yellow;}
}
@mediascreen and (min-width:601px) and (max-width:800px){
#dv1{height: 300px;width:300px;background-color: blue;}
}
@mediascreen and (min-width:801px) and (max-width:900px){
#dv1{height: 350px;width:350px;background-color: green;}
}
@mediascreen and (min-width:901px) and (max-width:1000px){
#dv1{height: 300px;width:300px;background-color: pink;}
}
</style>
</head>
<body>
<divid="dv1">hello</div>
</body>

[42]
Vikas Singh

pseudo classes

pseudo elements

canvas & svg

contenteditable:- to edit on browser

<element contenteditable="true|false">

User-select:
div {

user-select: none; /* Standard syntax */


}

html {

scroll-behavior: smooth;

https://www.sktthemes.org/

clip-path: circle(40%)

clip-path:ellipse(130px 140px) at 10% 20%)

clip-path:polygon(50% 0,100% 50%, 50% 100%,0 50%)

//heart beat effect


.heart {
font-size: 150px;
background-color: yellow;
height: 100px;
width: 100px;
color: #e00;
animation: beat .25sinfinitealternate;
transform-origin: center;
}

/* Heart beat animation */


@keyframesbeat{
to { transform: scale(1.4); }
}
</style>
</head><body>
<divclass="heart"></div>

[43]

You might also like