Scribd
Upload
62 views

Unit 1: Tags, ,, ,, ,, ,,, &NBSP

The document discusses various HTML tags used to structure and format web page content. It describes common tags like <p>, <h1>-<h6>, <ul>, <ol>, <li>, and <img> that are used for paragraphs, headings, lists and images. It also covers other tags like <b>, <i>, <u> for bold, italics and underline text formatting. The document provides syntax and examples for using each tag to properly structure text, lists, headings and other media in HTML documents.

Uploaded by

D M MAHESH
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
62 views

Unit 1: Tags, ,, ,, ,, ,,, &NBSP

The document discusses various HTML tags used to structure and format web page content. It describes common tags like <p>, <h1>-<h6>, <ul>, <ol>, <li>, and <img> that are used for paragraphs, headings, lists and images. It also covers other tags like <b>, <i>, <u> for bold, italics and underline text formatting. The document provides syntax and examples for using each tag to properly structure text, lists, headings and other media in HTML documents.

Uploaded by

D M MAHESH
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 56

Unit 1

tags
<P>, <HR>, <B>,<I>,<U>,<MARK>,<BIG>,<SMALL>,<SUB>,<SUP>,<FONT>
&NBSP

Search engine
• It is a web-based tool that enables users to locate
information on the world wide web
Examples:-
Google, yahoo, bingo
Web Browser
• It is a software application for accessing information on the
world wide web.
Example:-
Google chrome, Mozilla Firefox, opera
Define HTML
Hyper text markup language is the standard markup language for
documents designed to indicate how a Web browser should
structure or present the document
Tag
• markup commands applied to your Web-based content tell
the browser software the structure of the document and how
you want the content to be displayed
 Codes enclosed in brackets
 Usually paired
<TITLE>My Web Page</TITLE>
 Not case sensitive
<TITLE> = <title> = <TITLE>
• <TAG>
...
Content that the tag pair affects
...
• </TAG>
Structure of HTML
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Document Title Goes Here</TITLE>
...Other supplementary information goes here....
</HEAD>
<BODY>
...Document content and markup go here....
</BODY>
</HTML>
<DOCTYPE! html>: This tag is used to tells the HTML
version.
<html>: This is called HTML root element and used to wrap
all the code.
<head>: Head tag contains metadata, title, page CSS etc.
All the HTML elements that can be used inside the <head>
element are:
 <style>
 <title>
 <base>
 <noscript>
 <script>
 <meta>
 <title>
<title> : We can mention the title of a web page using
the <title> tag. This is a header information and hence
mentioned within the header tags. The tag begins
with <title> and ends with </title>
<body>: Body tag is used to enclosed all the data which a
web page has from texts to links. All of the content that you
see rendered in the browser is contained within this element
<p> tag
• Paragraphs allow you to add text to a document in such a
way that it will automatically adjust the end of line to suite
the window size of the browser in which it is being displayed.
• Each line of text will stretch the entire length of the window
• Syntax :-<p align=”position”> your text here </p>
example
<!DOCTYPE HTML>
<html>
<head>
<title>paragraph tag</title>
</head>
<Body>
<p>
Welcome to web designing
Welcome to web designing
Welcome to web designing
</p>
</body>
</html>
<HR>tag
• The <HR> element causes the browser to display a horizontal
line (rule) in your document.
 <HR> does not use a closing tag, </HR>.
example
<!DOCTYPE HTML>
<html>
<head>
<title>horizontal tag</title>
</head>
<body>
<p>
Welcome to web designing <hr>
Welcome to web designing<hr>
Welcome to web designing<hr>
</p>
</body>
</html>
Bold tag
• It is used to bold the selected phrase
Syntax:
<b>your text here</b>
Example
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>boldtag</TITLE>
</HEAD>
<BODY>
Welcome to<b>web designing</b>
</BODY>
</HTML>
italic tag
• It is used to make the phrase italic
Syntax:
<i>your text here</i>
Example
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>italic tag</TITLE>
</HEAD>
<BODY>
Welcome to<i>web designing</i>
</BODY>
</HTML>
Underline tag
• It is used to underline the selected phrase
Syntax:
<u>your text here</u>
Example
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>uline</TITLE>
</HEAD>
<BODY>
Welcome to<u>web designing</u>
</BODY>
</HTML>

Mark tag
• It is used to highlight the selected phrase
Syntax:
<mark>your text here</mark>
Example :
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>marktag</TITLE>
</HEAD>
<BODY>
Welcome to<mark>web designing</mark>
</BODY>
</HTML>
Big tag
• It is used to increase the font phrase size
• Syntax:-
• <big>text here</big>
Example :
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>bigtag</TITLE>
</HEAD>
<BODY>
<big>web designing</big>
</BODY>
</HTML>
small tag
• It is used to make the selected phrase small
• Syntax:
<small>your text here</small>
Example :
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>smalltag</TITLE>
</HEAD>
<BODY>
Welcome to<small>web designing</small>
</BODY>
</HTML>
subscript tag
• It is used to subscript the selected phrase
• Syntax:
• <sub>your text here</sub>
Example :
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>subscript</TITLE>
</HEAD>
<BODY>
Welcome to<sub>web designing</sub> course
</BODY>
</HTML>
superscript tag
• It is used to superscript the selected phrase
• Syntax:
• <sup>your text here</sup>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>superscript</TITLE>
</HEAD>
<BODY>
Welcome to<sup>web designing</sup>
</BODY>
</HTML>
Break tag <BR>
• Line breaks allow you to decide where the text will break on a
line or continue to the end of the window
• The <BR> element does not have a closing tag
Space tag
• It is used to increase the spaces between strings
• Syntax:-
Text1 &nbsp; &nbsp; text2
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>non breaking spaces</TITLE>
</HEAD>
<BODY>
Good &nbsp;&nbsp;&nbsp; morning
</BODY>
</HTML>
Font tag
• It defines font characteristics like face, color, size
• Syntax:-
<font face=“face-type” size=“number” color=“color name” >
text here</font>
Example :
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>fonttag</TITLE>
</HEAD>
<BODY>
<font face=“calibri” color=“green” size=“10”>web
designing</font>
</BODY>
</HTML>
Unit 2
TAGS
<H1>,<OL>,<UL>,<LI>,<DD>,<DT>,<IMG>,<PRE>,<MARQUEE>,<QU
OTATION>
Headings, <Hx> </Hx>
• Inside the BODY element, heading elements H1 through H6
are generally used for major divisions of the document.
Headings are permitted to appear in any order
• H1: should be used as the highest level of heading, H2 as
the next highest, and so forth
• Syntax:<h1> your text here </h1>
Example :
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> HEADINGTAG</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
<H2> Heading 2 </H2>
<H3> Heading 3 </H3>
<H4> Heading 4 </H4>
<H5> Heading 5 </H5>
<H6> Heading 6 </H6>
</BODY>
</HTML>
Lists
A list is a record of short pieces of information, such as
people’s names, usually written or printed with a single thing
on each line and ordered in a way that makes a particular
thing easy to find.
HTML offers three ways for specifying lists of information
• unordered list.
• ordered list.
• defined list.
• Nest Lists
Unordered List
 HTML supplies several list elements. Most list elements are
composed of one or more <LI> (List Item) elements.
 UL : Unordered List. Items in this list start with a list mark
such as a bullet. Browsers will usually change the list mark
in nested lists.
 Syntax:
<UL >
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
• You have the choice of three bullet types:
• disc(default),
• circle
• square.
• Syntax:
<UL TYPE=“square”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
Example-1
for type= square
<!DOCTYPE html>
<html>
<head>
</head>
<TITLE>unordered list</TITLE>
<body>
<ul type="square">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
</body>
</html>
Example-2
for type= circle
<!DOCTYPE html>
<html>
<head>
</head>
<TITLE>unordered list</TITLE>
<body>
<ul type=" circle ">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
</body>
</html>

Example-3
for type= disc
<!DOCTYPE html>
<html>
<head>
</head>
<TITLE>unordered list</TITLE>
<body>
<ul type=" disc ">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
</body>
</html>
Ordered List
 Items in this list are numbered automatically by the
browser.
Syntax:
<OL type=”type name”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
• You have the choice of setting the TYPE Attribute to
one of five numbering styles

TYPE Numbering Styles

1 Arabic numbers 1,2,3, ……

a Lower alpha a, b, c, ……

A Upper alpha A, B, C, ……

i Lower roman i, ii, iii, ……

I Upper roman I, II, III, ……


Example 1:
Type= 1(Arabic numbers)
<!DOCTYPE html>
<html>
<head>
<TITLE>ordered list</TITLE>
</head>
<body>
<ol type="1">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
</body>
</html>
Example 2:
Type= a(Lower alpha)
<!DOCTYPE html>
<html>
<head>
<TITLE>ordered list</TITLE>
</head>
<body>
<ol type="a">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
</body>
</html>
Example 3:
Type= A(Upper alpha)
<!DOCTYPE html>
<html>
<head>
<TITLE>ordered list</TITLE>
</head>
<body>
<ol type="A">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
</body>
</html>
Example 4:
Type= i(Lower roman)
<!DOCTYPE html>
<html>
<head>
<TITLE>ordered list</TITLE>
</head>
<body>
<ol type="i">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
</body>
</html>
Example 5:
Type= I(Upper roman)
<!DOCTYPE html>
<html>
<head>
<TITLE>ordered list</TITLE>
</head>
<body>
<ol type="I">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
</body>
</html>

Definition List
 This kind of list is different from the others.
 Each item in a DL consists of one or more Definition Terms
(DT elements),
 followed by one or more Definition Description (DD
elements).
<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </DD>
<DT> DOG </DT>
<DD> A human’s best friend!</DD>
</DL>
Example :
<!DOCTYPE html>
<html>
<head>
<TITLE>definition list</TITLE>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is a programming language and platform</dd>
</dl>
</body>
</html>

Nesting Lists
 You can nest lists by inserting a UL, OL, etc., inside a list item
(LI).
EXample
<UL TYPE = “square”>
<LI> List item …</LI>
<LI> List item …
<OL TYPE=“i” >
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
</LI>
<LI> List item …</LI>
</UL>
Images
 <IMG>This element defines a graphic image on the page.
 Image File (SRC:source): This value will be a URL (location of
the image)
 E.g. http://www.domain.com/dir/file.ext
 Alternate Text (ALT): This is a text field that describes an
image or acts as a label. It is displayed when browser fail to
load image
 Alignment (ALIGN): This allows you to align the image on
your page.
 Width (WIDTH): is the width of the image in pixels.
 Height (HEIGHT): is the height of the image in pixels.
 Border (BORDER): is for a border around the image, specified
in pixels.
 HSPACE: is for Horizontal Space on both sides of the image
specified in pixels. A setting of 5 will put 5 pixels of invisible
space on both sides of the image.
 VSPACE: is for Vertical Space on top and bottom of the image
specified in pixels. A setting of 5 will put 5 pixels of invisible
space above and bellow the image.
Syntax
• <img src=“url of image" alt=“error" width=“pixels"
height=“pixels" align=“position"/>
Example :
<!DOCTYPE html>
<html>
<head>
<TITLE>image tag</TITLE>
</head>
<body>
<img src="animal.jpg" height="180" width="300" alt="animal i
mage" />
</body>
</html>
Preformatted tag
Syntax:
• <PRE>text here</PRE>
• Text enclosed by PRE tags is displayed in a mono-spaced font.
Spaces and line breaks are supported without additional
elements or special characters
Example :
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>pretag</TITLE>
</HEAD>
<BODY>
<pre>
This is a formatted text
by using the HTML pre tag. It maintains
both space and line break.
</pre>
</BODY>
</HTML>
Marquee tag
The Marquee HTML tag is a non-standard HTML element which is
used to scroll a image or text horizontally or vertically.
syntax
<marquee>text here </marquee>
Example :
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>marquee</TITLE>
</HEAD>
<BODY>
<marquee width="100%" direction="right">
This is an example of a right direction marquee...
</marquee>
</BODY>
</HTML>
Quotation tag
Browsers usually insert quotation marks around the <q> element.
<!DOCTYPE html>
<html>
<HEAD>
<TITLE>quote</TITLE>
</HEAD>
<body>
<p>WWF's goal is to: <q>Build a future where people live in
harmony with nature.</q></p>
</body>
</html>
Unit 3
TAGS
<A>,<BASE>,<TABLE>,<TH>,<TR>,<TD>,<ROWSPAN>,<COLSPAN>,
<DIV>,<FRAMESET>

Linking Document
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.
Following is the simple syntax to use <a> tag.
<a href = "Document URL" ... attributes-list>Link Text</a>
The <a> tag defines a hyperlink, which is used to
link from one page to another.
The most important attribute of the <a> element is
the href attribute, which indicates the link's
destination.
By default, links will appear as follows in all
browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
Example :
<!DOCTYPE html>
<html>
<HEAD>
<TITLE>linktag</TITLE>
</HEAD>
<body>
<p>
This is a link to <a href="http://www.wfp.org/">World Food
Programme</a>.
</p>
<p>
This is a link to our <a href="default.asp">HTML reference</a>.
</p>
</body>
</html>

Use of Base Path


When you link HTML documents related to the same
website, it is not required to give a complete URL for every
link. You can get rid of it if you use <base> tag in your HTML
document header. This tag is used to give a base path for all
the links. So your browser will concatenate given relative
path to this base path and will make a complete URL.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank">HTML
Tutorial</a>
</body>
</html>

Table
The HTML tables allow web authors to arrange data like
text, images, links, other tables, etc. into rows and columns
of cells.
The HTML tables are created using the <table> tag in which
the <tr> tag is used to create table rows and <td> tag is
used to create data cells. The elements under <td> are
regular and left aligned by default
<!DOCTYPE html>
<html>
<head>
<title>HTML table Tag</title>
</head>
<body>
<table border = "1">
<tr>
<th>Team</th>
<th>Ranking</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
</tr>
<tr>
<td>South Africa</td>
<td>2</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
</tr>
</table>
</body>
</html>
Table Heading
Table heading can be defined using <th> tag. This tag will
be put to replace <td> tag, which is used to represent actual
data cell. Normally you will put your top row as table
heading as shown below, otherwise you can use <th>
element in any row. Headings, which are defined in <th> tag
are centered and bold by default.
Example
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Cellpadding and Cellspacing Attributes
There are two attributes
called cellpadding and cellspacing which you will use to
adjust the white space in your table cells. The cellspacing
attribute defines space between table cells, while
cellpadding represents the distance between cell borders
and the content within a cell.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or
more columns into a single column. Similar way you will
use rowspan if you want to merge two or more rows
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
<div> Element tag
The div tag is known as Division tag. The div tag is used in
HTML to make divisions of content in the web page like
(text, images, header, footer, navigation bar, etc). Div tag
has both open(<div>) and closing (</div>) tag and it is
mandatory to close the tag. The Div is the most usable tag in
web development because it helps us to separate out data in
the web page and we can create a particular section for
particular data or function in the web pages.
 Div tag is Block level tag

 It is a generic container tag

 It is used to the group of various tags of HTML so that

sections can be created and style can be applied to them.


As we know Div tag is block-level tag in this example div tag
contain entire width. It will be displayed div tag each time on
a new line, not on the same line.
Example
<html>
<head>
<title>gfg</title>
<style type=text/css>

p{
background-color:gray;
margin: 10px; }
div
{
color: white;
background-color: 009900;
margin: 2px;
font-size: 25px;
}
</style> </head>
<body>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
</body>
</html>

Frame tag
HTML <frame> tag define the particular area within an HTML file where another HTML web page can
be displayed.
A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections or frames,
and each frame can contain different web pages.

Syntax
< frame src = "URL" >

Create Vertical frames


<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>
Frame1.html

<!DOCTYPE html>
<html>
<head>
<style>
<title>Frame tag</title>
Div{ backgroundcolor: #7fffd4; height: 500px; }</style>
</head>
<body>
<div><h2>This is first frame</h2></div>
</body>
</html>

Frame2.html

<!DOCTYPE html>
<html>
<head>
<style>
<title>Frame tag</title>
div{ background-color: #2f4f4f; height: 500px; }
</style>
</head>
<body>
<div><h2>This is Second frame</h2></div>
</body>
</html>

Frame3.html

<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
<style>
div{ background color: #c1ffc1; height: 500px; }
</style>
</head>
<body>
<div>
<h2>This is Third frame</h2>
</div>
</body>
</html>
Image as a link
To use image as a link in HTML, use the <img> tag as well
as the <a> tag with the href attribute. The <img> tag is for
using an image in a web page and the <a> tag is for adding
a link. Under the image tag src attribute, add the URL of the
image. With that, also add the height and width
example
<!DOCTYPE html>
<html>
<head>
<title>HTML Image as link</title>
</head>
<body>
The following image works as a link:<br>
<a href="c:\file.html">
<img alt="image" src="c:\image.html" width=150" height="70">
</a>
</body>
</html>
Unit 4
Css feature
CSS stands for Cascading Style SheetsStyles define how to display
HTML Elements.CSS defines HOW HTML elements are to be
displayed.Styles are normally saved in external .css files. External
style sheets enable you to change the appearance and layout of
all the pages in a Web site, just by editing one single file!

Strcture of css
<!DOCTYPE html>
<html>
<head>
<title>title goes here<title>
<STYLE>
(for external css)
<link rel="stylesheet" type="text/css" href="mystyle.css">
(for internal css)
selector { property: value }
</STYLE>
</head>
<body>
(for inline css)
<tag name style="color:blue;text-align:center;">text here</tag>
content...........
</body>
</html
Advantages of CSS
1. 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.
2. Pages load faster
Less code means faster download times.
3. Easy maintenance
To change the style of an element, you only have to make an
edit in one place.
4. Superior styles to HTML
CSS has a much wider array of attributes than HTML
5. •Reduce workloadby centralizing commands for visual
appearance instead of scattered throughout the HTML doc.
6. •Use same style on multiple pages.
7. •Reduce page download size

CSS Rules
The set of rules are contained between <style> and </style>.
Ignore the type attribute, for now. Thereason for this will be
come clearer later. For now let us concentrate on the rules. As
stated in the introduction, each rule consists of two parts: a
selector that defines what HTML elements are controlled
by the rule and a declaration that says what the required effect is.
The selectors above define three
rules that apply to all h1 elementsWe shall show how we can be
both more selective (control a subset of h1 elements) or control a
set of elements (a block of different HTML elements) later.
Initially let us look at the declarations. Each declaration consists of
the name of a property and the value to be assigned to it. So the
simplest style rule is:

selector { property: value }


To set several properties in a single rule requires the individual
declarations to be separated bysemicolons:

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

 p is a selector in CSS (it points to the HTML element you want to


style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value
selector { property1: value1; property2: value2; property3:
value3 }

Selectors

•Select elements to apply a declared style.


•Selector types:
–Element Selectors: selects all elements of a specific type
(<body>, <h1>, <p>, etc.)
–Class Selectors: selects all elements that belong to a given class.
–ID Selectors: selects a single element that’s been given a unique
id.
–Pseudo Selectors: combines a selector with a user activated
state(:hover, :link, :visited)

1. Element Selectors

•Finds all HTML elements that have the specified element type.
•Example:

h1{
color: blue;
}
Finds all elements of type <h1> and makes the text color blue.

<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<h1>Every paragraph will be affected by the style.</h1>
<p>new paragraph<p>
<h1>second</h1>
</body>
</html>

2. Class Selectors

•Finds all elements of a given class –based on the attribute’s class


value.
•Syntax: .classname(Remember the dot means class selector)
•Example:

.legs{
font-weight: bold;
background: pink;
}
Finds all elements whose class = “legs”and makes their font bold
and their backgrounds pink.
<!DOCTYPE html>
<html>
<head>
<style>
.legs{
font-weight: bold;
background: pink;
}
</style>
</head>
<body>
<h1 class="legs">Red and center-aligned heading</h1>
<p class="legs">Red and center-aligned paragraph.</p>
</body>
</html>

3. ID Selectors

•Finds a single element that’s been given a unique id–based on


the attribute’s id value.
•Syntax:
#idname(Remember the pound-sign means id selector)
•Example:

#para1 {
text-align: center;
color: red;
}
Finds a single element whose id = “para1”and gives it a text with
red color and align to center
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>


<p>This paragraph is not affected by the style.</p>

</body>
</html>

4. Pseudo-Selectors

•Apply styles to a user activated stateof an element.


•If used, must be declared in a specific orderin the style sheet.
•General Purpose Pseudo-Selector:
–:hoverElement with mouse over
•Specific to hyperlinks (and/or buttons)
–a:activeA link or button that is currently being clickedon.
–a:linkA link that has NOTbeen visited yet.
–a:visitedA link that HASbeen visited.
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color: red;}
a:visited { color: green;}
a:hover { color: hotpink;}
a:active {color: blue;}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a
link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in
the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS
definition in order to be effective.</p>
</body>
</html>

5. Grouping Selectors

•Lets say you want to apply the same style to several different
selectors. Don’t repeatthe style –use a comma!!
•Syntax: sel1, sel2, sel3 (Remember the comma to group several
different selectors)
•Example:

h1, h2, p {
text-align: center;
color: red;
}
Finds all elements of type <h1><h2>and <p>text color red and
align it to center
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Color Properties

•color:specifies the text color.


•background-color:specifies the background color.
black; or #000000;
red; or #FF0000;
lime; or #00FF00;
blue; or #0000FF;
white; or #000000;
Background Image Properties

•background-image:url(../location/of/image.jpg)
•background-repeat:tile image in background
•background-position:vertical(top, center, bottom, or size)
horizontal(left, center, right, or size)
•background-attachment: (scrollor fixed)

Font Properties

•font-family: times, arial, serif, sans-serif, monospace;


•font-style: italic;
•font-weight: (bold, bolder, lighter, or 100 –900;)
•font-size: size;
…or shorthand
•font: style weight sizefamily;

Text Properties
•text-indent:indents first line of a paragraph according to size
•text-align:right;or left;or center;or justify;
•text-decoration: none; orunderline;
•text-transform:Capitalize;
•Line-height:added vertical space to each line of text according to
size

List Properties <ul>


•list-style-type:none, disc, circle, square,(other types available)
•list-style-position: inside oroutside
•list-style-image:url(../path/to/image.jpg)
…or shorthand
•list-style:type position imag

Border Properties
•border-width:(thin, medium, thick, or size)
•border-style:(none, hidden, dotted, dashed, solid, double,
groove, ridge, inset, or outset)
•border-color:color
…or shorthand
•border(-top, -right, -left, -bottom):width style color

Types of css
Three Ways to Insert CSS
a. External style sheet
b. Internal style sheet
c. Inline style

1. External Style Sheet


An external style sheet is ideal when the style is applied to many
pages. With an externalstyle sheet, you can change the look of an
entire Web site by changing one file. Each page must link to the
style sheet using the <link> tag. The <link> tag goes inside the
head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
An external style sheet can be written in any text editor. The file
should not contain anyhtml tags. Your style sheet should be saved
with a .css extension. An example of a style
sheet file is shown below:
"mystyle.css"

body {
background-color: lightblue;
}
h1 {
color: navy; margin-left: 20px;}

External styles are defined within the <link> element, inside the
<head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>external css</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html
2. Internal Style Sheet
An internal style sheet should be used when a single document
has a unique style.
Example
Internal styles are defined within the <style> element, inside the
<head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<title>internal css</title>
<style>
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. Inline css
An inline style may be used to apply a unique style for a single
element.To use inline styles, add the style attribute to the
relevant element. The style attribute can contain any CSS
property.
Example
Inline styles are defined within the "style" attribute of the
relevant element:
<!DOCTYPE html>
<html>
<head>
<title>internal css</title>
</head>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
PARAGRAPH tag with css
example
<!DOCTYPE HTML>
<html>
<head>
<title>paragraph tag</title>
</head>
<body>
<p>
Welcome to web designing
Welcome to web designing
Welcome to web designing
</p>
</body>
</html>
heading with Css
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Table With Css
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {background-color:#f5f5f5;}
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
IMGAGE TAG with Css
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>
<img src="paris.jpg" alt="Paris" /></body>
</html>

You might also like