Scribd
Upload
95 views

Introduction

Webpages are written in HTML - a simple scripting language. HTML documents are a plain text file that contains text and nothing else. You can write your HTML by hand with almost any available text editor.

Uploaded by

nandu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
95 views

Introduction

Webpages are written in HTML - a simple scripting language. HTML documents are a plain text file that contains text and nothing else. You can write your HTML by hand with almost any available text editor.

Uploaded by

nandu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 76

HTML

INTRODUCTION
 Webpages are written in HTML - a simple scripting language.

 HTML is short for HyperText Markup Language.


 Hypertext is simply a piece of text that works as a link.

 Markup Language is a way of writing layout information within

documents.

 Basically an HTML document is a plain text file that contains text


and nothing else.

 When a browser opens an HTML file, the browser will look for HTML
codes in the text and use them to change the layout, insert images,
or create links to other pages.
INTRODUCTION
 Since HTML documents are just text files they can be written in
even the simplest text editor.

 A more popular choice is to use a special HTML editor - maybe


even one that puts focus on the visual result rather than the codes -
a so-called WYSIWYG editor ("What You See Is What You Get").

 Some of the most popular HTML editors, such as FrontPage or


Dreamweaver will let you create pages more or less as you write
documents in Word or whatever text editor you're using.
WHY LEARN HTML?
 It is possible to create webpages without knowing anything about
the HTML source behind the page.

 There are excellent editors on the market that will take care of the
HTML parts. All you need to do is layout the page.

 However, if you want to make it above average in webdesign, it is


strongly recommended that you understand these tags.

 The most important benefits are:


 You can use tags the editor does not support.

 You can read the code of other people's pages, and "borrow" the
cool effects.
 You can do the work yourself, when the editor simply refuses to
create the effects you want.
WHY LEARN HTML?

 You can write your HTML by hand with almost any available text
editor, including notepad that comes as a standard program with
Windows.

 All you need to do is type in the code, then save the document,
making sure to put an .html extension or an .htm extension to the
file (for instance "mypage.html").
TAGS
 Basically, a computer sees an "A" as simply an "A" - whether it is
bold, italic, big or small.
 To tell the browser that an "A" should be bold we need to put a
markup in front of the A.
 Such a markup is called a Tag.

 All HTML tags are enclosed in < and >.


 Example: a piece of text as it appears on the screen.
This is an example of bold text.
 HTML: the HTML for the above example:
This is an example of <b>bold</b> text.

 As you can see, the start tag <b> indicates that whatever follows
should be written in bold. The corresponding end tag </b> indicates
that the browser should stop writing text in bold.
PAGE STRUCTURE
 All normal webpages consist of a head and a body.
 The head is used for text and tags that do not show directly on
the page.
 The body is used for text and tags that are shown directly on the
page.

 Finally, all webpages have an

<html> tag at the beginning and


</html> the end

telling the browser where the document starts and where it stops.
PAGE STRUCTURE
 The most basic code - the code you will use for any page you make,
is shown below:

<html>

<head>
<!-- This section is for the title and technical info of the page. -->
</head>

<body>
<!-- This section is for all that you want to show on the page. -->
</body>

</html>
HEAD SECTION
 The head section of the webpage includes all the stuff that does not
show directly on the resulting page.

 The <title> and </title> tags encapsulate the title of your page. The
title is what shows in the top of your browser window when the page
is loaded.

 Right now it should say something like "Basics - Html Tutorial" on


top of the window containing this text.

 Another thing you will often see in the head section is metatags.
Metatags are used for, among other things, to improve the rankings
in search engines.
HEAD SECTION
 Quite often the head section contains javascript which is a
programming language for more complex HTML pages.

 Finally, more and more pages contain codes for cascading style
sheets (CSS).

 CSS is a rather new technique for optimizing the layout of major


websites.

 Since these aspects are way out of reach at this stage we will
proceed with explaining the body section.
BODY SECTION
 The body of the document contains all that can be seen when the user loads the
page.
 In the rest of this tutorial you can learn in detail about all the different aspects of
HTML, including:  Text
 Formatting
 Resizing
 Layout
 Listing
 Links
 To local pages
 To pages at other sites
 To bookmarks
 Images
 Inserting images (GIF and jpg)
 Adding a link to an image
 Backgrounds
 Colors
 Images
 Fixed Image
 Tables
 Frames
 Forms
 Metatags
 Hexadecimal Colors
BASE FONT
 To specify the overall font for your page add the <basefont> tag at the beginning
of the <body> section.
 Example: The page as it looks in the browser.
Hello! This is my page.
All text looks the same
since I only specified a basefont.

 HTML: The code to produce the above example.


<html>
<head>
<title>my page</title>
</head>
<body>
<basefont face="arial, verdana, courier" size="4" color="red">
Hello! This is my page.<br>
All text looks the same<br>
since I only specified a basefont.<br>
</body>
</html>
FONT
 The <font> tag will change the font.
 Example: How the output looks in the browser.
Hello! This is my page.
This local text looks different.
This text looks like the first line.
 HTML: The code to produce the above example.
<html>
<head>
<title>My Page</title>
</head>
<body>
<basefont color=“red" face="arial" size="4">
Hello! This is my page.<br><br>
<font color=“green" face="arial" size="2">
This local text looks different.
</font>
<br><br>
This text looks like the first line.
</body>
</html>
TEXT LINKS
 The tags used to produce links are the <a> and </a>.
 The <a> tells where the link should start and the </a> indicates
where the link ends.
 Everything between these two will work as a link.

 The target of the link is added to the <a> tag using


the href="http://www.whateverpage.com" setting.

 The example below shows how to make the word here work as a
link to yahoo.
 Click <a href="http://www.yahoo.com">here</a> to go to yahoo.

 You simply:
 Specify the target in the <a href=" ">.

 Then add the text that should work as a link.

 Finally add an </a> tag to indicate where the link ends


TEXT FORMAT
<b>text</b> writes text as bold

<i>text</i> writes text in italics

<u>text</u> writes underlined text

<sub>text </sub> lowers text and makes it smaller

<sup>text </sup> lifts text and makes it smaller

<blink>text</blink> guess yourself! (Note: Netscape only.)

<strike>text</strike> strikes a line through the text

<tt>text</tt> writes text as on a classic typewriter

<pre>text</pre> writes text exactly as it is, including spaces.

<em>text</em> usually makes text italic

<strong>text<strong> usually makes text bold


TEXT SIZE
<big>text</big> increase the size by one

<small>text</small> decrease the size by one

<h1>text</h1> writes text in biggest heading

<h6>text</h6> writes text in smallest heading

<font size="1">text</font> writes text in smallest fontsize. (8 pt)

<font size="7"> writes text in biggest fontsize (36 pt)

text </font>
TEXT SIZE

 The <small> and <big> tags are special in that they can
be repeated. If you want to increase the font size with a
factor two, then you could do it like this:
bla bla bla <big><big>whatever</big></big> bla bla bla
TEXT LAYOUT
<p>text</p> Adds a paragraph break after the text.
(2 linebreaks).
<p align="left">text</p> Left justify text in paragraph.
<p align="center">text</p> Center text in paragraph.
<p align="right">text</p> Right justify text in paragraph.
text<br> Adds a single linebreak where the tag is.
<nobr>text</nobr> Turns off automatic linebreaks
- even if text is wider than the window.
text<wbr> Allows the browser to insert a linebreak
at exactly this point
- even if the text is within <nobr> tags.
<center>text</center> Center text.
<div align="center">text</div> Center text.

<div align="left">text</div> Left justify text.


<div align="right">text</div> Right justify text.
LISTS

 To create a bulleted list you need to add a <ul> and a </ul> tag at the
beginning and the end of the list.

 Numbered lists have <ol> tags instead of <ul> tags.

 To separate single list items use <li> and </li> tags.

 There are special settings that you can use to customize the lists on
your page.
BULLETED LISTS
<ul> Makes a bulleted list using the default bullet type:
<li>text</li> • text
<li>text</li> • text
<li>text</li> • Text
</ul>

<ul type="disc"> Starts a bulleted list using discs as bullets:


• This is one line
• This is another line
• And this is the final line

<ul type="circle"> Starts a bulleted list using circles as bullets:


o This is one line
o This is another line
o And this is the final line

<ul type="square"> Starts a bulleted list using squares as bullets:


 This is one line
 This is another line
 And this is the final line
NUMBERED LISTS
<ol> Makes a numbered list using the default number type:
<li>text</li> 1.text
<li>text</li> 2.text
<li>text</li> 3.Text
</ol>

<ol start="5"> Starts a numbered list, first # being 5.


5.This is one line
6.This is another line
7.And this is the final line

<ol type="A"> Starts a numbered list, using capital letters.


A.This is one line
B.This is another line
C.And this is the final line

<ol type="a"> Starts a numbered list, using small letters.


a.This is one line
b.This is another line
c.And this is the final line
NUMBERED LISTS
<ol type="I"> Starts a numbered list, using capital roman numbers.

I.This is one line


II.This is another line
III.And this is the final line

<ol type="i"> Starts a numbered list, using small roman numbers.

i.This is one line


ii.This is another line
iii.And this is the final line

<ol type="1"> Starts a numbered list, using normal numbers.

1.This is one line


2.This is another line
3.And this is the final line

<ol type="I" start="7"> An example of how type and start can be combined.

VII.This is one line


VIII.This is another line
IX.And this is the final line
BASIC TABLES
 Tables are defined with the <table> tag.
 To insert a table on your page you simply add these tags where you want
the table to occur:
<table>
</table>
 The above table would be of no use since it has no rows and no columns.

 ROWS:
 To add rows to your table use the <tr> and </tr> tags.
 Example:
<table>
<tr></tr>
<tr></tr>
</table>
 It doesn't make sense to write the above lines in itself, cause you can't write
content outside of table cells.
 If you do write things outside of cells it will appear right above the table.
BASIC TABLES
 COLUMNS:
 You can divide rows into columns with <td> and </td> tags:

 Example:
<table>
<tr> <td>This is row one, left side.</td>
<td>This is row one, right side.</td>
</tr>
<tr> <td>This is row two, left side.</td>
<td>This is row two, right side.</td>
</tr>
</table>
This is row one, left side. This is row one, right side.

This is row two, left side. This is row two, right side.
TABLE TAGS
Property Description
align= left align table
left center table
center right align table
right
background=filename image inserted behind the table
bgcolor=#rrggbb background color
border=n border thickness
bordercolor=#rrggbb border color
bordercolordark=#rrggbb border shadow
cellpadding=n distance between cell and content
cellspacing=n space between cells
nowrap protects agains linebreaks, even though the content might be
wider than the browser window.
TABLE TAGS
Property Description
frame=
void, removes all outer borders
above, shows border on top of table
below, shows border on bottom of table
lhs, shows border on left side of table
rhs, shows border on right side of table
hsides, shows border on both horizontal sides
vsides, shows border on both vertical sides
box shows border on all sides of table

valign=
top aligns content to top of cells
bottom aligns content to bottom of cells
width=
n,n minimum width of table in pixels
n,n% minimum width in percentage of window size
GIF & JPG
 Computers store images in several different ways.

 Some storage methods focus on compressing the size of the image as much as possible.

 A major problem with using images on websites is that images take much longer to load than text.

 To reduce download times as much as possible two of the best image compressing formats used on the
web are:

GIF JPG

256 colors Unlimited colors

Can handle transparent areas Can't handle transparent areas

This format is not good at compressing photographs Excellent for compressing photographs and complex images

In general, it is excellent for banners, buttons and clipart In general, it is not good for banners, buttons and clipart.
GIF & JPG

 This means that:


 Banners, buttons, dividers, clipart and other simple images
usually work best as GIF's.

 Photographs and other complex images usually work best as


JPG's
INSERTING IMAGE
 The tag used to insert an image is called img.

 Below you see an image called "rainbow.gif".

 Here is the HTML code used to insert the image on this webpage:
<img src="http://www.check.com/rainbow.gif">

 If the image is stored in the same folder as the HTML page, you can
leave out the domain reference (http://www.echoecho.com/) and
simply insert the image with this code:
<img src="rainbow.gif">
INSERTING IMAGE
 You can change the size of an image using the width and height
attributes
<img src="http://www.check.com/rainbow.gif" width="120"
height="120">

 You can add a border to the image using the border setting shown
in the example below:

<img src="http://www. check.com/rainbow.gif" border="5">


INSERTING IMAGE
 You can easily add space over and under your images

<img src="rainbow.gif" Hspace="30" Vspace="10">

 You can also use

<img src="pixel.gif" width="10" height="1"><img src="rainbow.gif">


Alignment - Image
<img src="rainbow.gif" align="texttop">

<img src="rainbow.gif" align="top">

<img src="rainbow.gif" align="middle">

<img src="rainbow.gif" align="absmiddle">

<img src="rainbow.gif" align="bottom">

<img src="rainbow.gif" align="absbottom">

<img src="rainbow.gif" align="baseline">


FORMS

 A form is simply an area that can contain form fields

 Form fields are objects that allow the visitor to enter information - for
example text boxes, drop-down menus or radio buttons
A typical form example would be a search engine

 This is what happens when the form is submitted:

 The search words are sent to a program on the server.


 The program will search a database for matches.
 The program creates a webpage with the results.
 The results webpage is sent back to the visitor.
A typical form example would be a Login page

 This is what happens when the form is submitted:

 The ID and password are sent to a program on the server.


 The program will search a database for valid entries.
 If the entry is valid the visitor is sent to the protected page.
 If the entry is invalid the visitor is sent to a "failure" page
CGI SCRIPTS
 When your form is submitted you need a program that can receive
the information and do something with it.

 Such programs are sometimes referred to as: CGI programs.

 CGI stands for Common Gateway Interface, which is computer latin


for a program that translates information.

 This translation is necessary because the server might be a UNIX


machine while the visitor might be sending information from a
Windows platform.

 Windows and UNIX handle information differently - so if there were


no CGI, then UNIX machines could only communicate with other
UNIX machines etc. and that is pretty far from the basic idea of the
world wide web.
 Now, you might be thinking "Well, I can't run programs on my server
so this is nothing for me".

 Fortunately you're most likely wrong.

 There are dozens of free services on the web that will offer you free
CGI for almost any purpose you might have.
THE FORM TAG
 When a form is submitted, all fields on the form are being sent.
 The <form> tag tells the browser where the form starts and ends.
You can add all kinds of HTML tags between the <form> and
</form> tags.
 Look at this example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<!-- Here goes HTML -->
<form>
<!-- Here goes form fields and HTML -->
</form>
<!-- Here goes HTML -->
</body>
</html>
 Note:
Unlike a table, forms are not visible on the page.

 The form in our example is useless for two obvious reasons:


 First it contains no form fields. It is simply comparable to a blank sheet of
paper.
 Second, it does not contain a recipient for the form once it is submitted.
 To let the browser know where to send the content we add these
properties to the <form> tag:
 action=address
 method=post or method=get

 The address is the url of the cgi script the content should be sent to.
The post and get methods are simply two different methods for
submitting data to the script.

 If you are using a pre-programmed script (which we assume here) it


is not important to understand the difference between get and post.

 In the description of the script you are using it will be made clear
whether the scripts should be addressed using one method or the
other.
Example
 Below is an example of a typical form tag, with both action and method
specified.
<html>
<head>
<title>My Page</title>
</head>
<body>
<!-- Here goes HTML -->
<form method="post" action="http://www.check.com/cgi-
bin/formmail.cgi">
<!-- Here goes form fields and HTML -->
</form>
<!-- Here goes HTML -->
</body>
</html>
 All we need now, is to allow the visitor to enter some information
FORM FIELDS
 These fields can be added to your forms:

 Text field
 Password field
 Hidden field
 Text area
 Check box
 Radio button
 Drop-down menu
 Submit button
 Reset button
 Image button
TEXT FIELD
 Text fields are one line areas that allow the user to input text.

If you want several lines you should use a text area instead.

HTML EXPLANATION EXAMPLE

text One line text field


size= Characters shown.
maxlength= Max characters allowed.
name= Name of the field.
value= Initial value in the field.
align= Alignment of the field.
tabindex= Tab order of the field.

 <form name="myform“
action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><br> </div> </form>
 <input type="password" size="25">

 <input type="hidden" name="Language" value="English">

 <textarea cols="40" rows="5" name="myname">


Now we are inside the area - which is nice.
</textarea>
FORM - CHECK BOX
 Check boxes are used when you want to let the visitor select one or
more options from a set of alternatives. If only one option is to be
selected at a time you should use radio buttons instead.
HTML EXPLANATION EXAMPLE

checkbox Choose one or more options


name= Name of the field.
value= Value that is submitted if checked.
align= Alignment of the field.
tabindex= Tab order of the field.
checked Default check this field.

 <input type="checkbox" name="option1" value="Milk"> Milk<br>


<input type="checkbox" name="option2" value="Butter" checked>
Butter<br>
<input type="checkbox" name="option3" value="Cheese">
Cheese<br>
FORM - RADIO BUTTON
HTML EXPLANATION EXAMPLE

radio Choose one - and only one - option


name= Name of the group.
value= Value that is submitted if checked.
align= Alignment of the field.
tabindex= Tab order of the field.
checked Default check this field.
FORM - DROP DOWN MENU
HTML EXPLANATION EXAMPLE

select Drop-down menu


name= Name of the field.
size= Visible items in list.
multiple= Allows multiple choices if yes. Butter
option Individual items in the menu.
selected Default select the item.
value= Value to send if selected.

 <form name="myform"
action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<div align="center">
<select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
</div>
</form>
FORM - BUTTONS
HTML EXPLANATION EXAMPLE

submit Submit button


name= Name of the button.
value= Text written on the button.
align= Alignment of the button.
tabindex= Tab order of the button.


<input type="submit" value="Send me your name!">
 <input type="reset" value="Reset!">
IMAGE BUTTON
HTML EXPLANATION EXAMPLE

image Submit button


name= Name of the image.
src= Url of the image.
align= Alignment of the image.
border= Border width around the image.
width= Width of the image.
height= Height of the image.
vspace= Spacing over and under image.
hspace= Spacing left and right of image.
tabindex= Tab order of the image.

 <input type="image" src="rainbow.gif" name="image" width="60"


height="60">
FRAMES
 Frames can divide the screen into separate windows.

 A file that specifies how the screen is divided into frames is called a
frameset.

If you want to make a homepage that uses frames you should:

 make an HTML document with the frameset

 make the normal HTML documents that should be loaded into each
of these frames.

 When a frameset page is loaded, the browser automatically loads


each of the pages associated with the frames.
 The HTML for the above frameset:

<html>
<head>
<title>My Frames Page</title>
</head>
<frameset cols="120,*">
<frame src="menupage.htm" name="menu">
<frameset rows="*,50">
<frame src="welcomepage.htm" name="main">
<frame src="bottombanner.htm" name="bottom">
</frameset>
</frameset>
</html>
Examples
 On this page you can see examples of different
framesets. Top

Bottom


<frameset rows="16%,84%">
<frame src="top.htm" name="top">
<frame src="bottom.htm" name="bottom">
</frameset>
Examples
 tl tr
bottom

<frameset rows="16%,84%">
<frameset cols="50%,50%">
<frame src="tl.htm" name="tl">
<frame src="tr.htm" name="tr">
</frameset>
<frame src="bottom.htm" name="bottom">
</frameset>
Examples
top
 .

left right

<frameset rows="16%,84%">
<frame src="top.htm" name="top">
<frameset cols="50%,50%">
<frame src="left.htm" name="left">
<frame src="right.htm" name="right">
</frameset>
</frameset>
Examples
 topleft topright

leftbottom rightbottom

<frameset rows="50%,50%" cols="50%,50%">


<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright">
</frameset>
Examples
topleft topright

botleft brtl brtr


 botrbot

 <frameset rows="50%,50%" cols="50%,50%">


<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="brtl.htm" name="brtl">
<frame src="brtr.htm" name="brtr">
</frameset>
<frame src="botrbot.htm" name="botrbot">
</frameset>
</frameset>
Cascading Style Sheets - CSS
 CSS is an excellent addition to plain HTML.

 With plain HTML you define the colors and sizes of text and tables
throughout your pages. If you want to change a certain element you
will therefore have to work your way through the document and
change it.

 With CSS you define the colors and sizes in "styles". Then as you
write your documents you refer to the styles. Therefore: if you
change a certain style it will change the look of your entire site.

 Another big advantage is that CSS offers much more detailed


attributes than plain HTML for defining the look and feel of your site.

 Finally, CSS can be written so the user will only need to download it
once - in the external style sheet document. When surfing the rest of
your site the CSS will be cached on the users computer, and
therefore speed up the loading time.
 CSS stands for Cascading Style Sheets. It is a way to divide the
content from the layout on web pages.

 How it works:
 A style is a definition of fonts, colors, etc.
 Each style has a unique name: a selector.
 The selectors and their styles are defined in one place.

 In your HTML contents you simply refer to the selectors whenever


you want to activate a certain style.
SELECTORS

 Selectors are the names that you give to your different styles.

 In the style definition you define how each selector should work
(font, color etc.).

 Then, in the body of your pages, you refer to these selectors to


activate the styles.
SELECTORS
 For example:
<HTML>
<HEAD>
<style type="text/css">
B.headline {color:red; font-size:22px; font-family:arial;
text-decoration:underline}
</style>
</HEAD>
<BODY>
<b>This is normal bold</b><br>
<b class="headline">This is headline style bold</b>
</BODY>
</HTML>
 In this case B.headline is the selector
This is normal bold
This is headline style bold
 There are three types of selectors:

 HTML selectors
Used to define styles associated to HTML tags. (A way to redefine
the look of tags)
 Class selectors
Used to define styles that can be used without redefining plain
HTML tags.
 ID selectors
Used to define styles relating to objects with a unique ID (most often
layers)
TAG SELECTORS
 The general syntax for an HTML selector is:
 HTMLSelector {Property:Value;}

 For example:
<HTML>
<HEAD>
<style type="text/css">
B {font-family:arial; font-size:14px; color:red}
</style>
</HEAD>
<BODY>
<b>This is a customized headline style bold</b>
</BODY>
</HTML>
 HTML selectors are used when you want to redefine the general
look for an entire HTML tag.
CLASS SELECTORS
 The general syntax for a Class selector is:
 .ClassSelector {Property:Value;}
 For example:
<HTML>
<HEAD>
<style type="text/css">
.headline {font-family:arial; font-size:14px; color:red}
</style>
</HEAD>
<BODY>
<b class="headline">This is a bold tag carrying the headline class</b>
<br>
<i class="headline">This is an italics tag carrying the headline class</i>
</BODY>
</HTML>
SPAN and DIV as carriers
 Two tags are particularly useful in combination with class
selectors: <SPAN> and <DIV>

 Both are "dummy" tags that don't do anything in themselves.


Therefore, they are excellent for carrying CSS styles.

 <SPAN> is an "inline-tag" in HTML, meaning that no line breaks


are inserted before or after the use of it.

 <DIV> is a "block tag", meaning that line breaks are


automatically inserted to distance the block from the surrounding
content (like <P> or <TABLE> tags).

 <DIV> has a particular importance for layers. Since layers are


separate blocks of information. <DIV> is an obvious choice when
defining layers on your pages
ID SELECTORS
 The general syntax for an ID selector is:
#IDSelector {Property:Value;}

 <HTML>
<HEAD>
<style type="text/css">
#layer1 {position:absolute; left:100;top:100; z-Index:0}
#layer2 {position:absolute; left:140;top:140; z-Index:1}
</style>
</HEAD>
<BODY>
<div ID="layer1">
<table border="1" bgcolor="#FFCC00"><tr><td>THIS IS LAYER
1<br>POSITIONED AT 100,100</td></tr></table>
</div>
<div ID="layer2">
<table border="1" bgcolor="#00CCFF"><tr><td>THIS IS LAYER
2<br>POSITIONED AT 140,140</td></tr></table>
</div>
</BODY>
</HTML>
GROUPED SELECTORS
 .headlines{
font-family:arial; color:black; background:yellow; font-size:14pt;
}
.sublines {
font-family:arial; color:black; background:yellow; font-size:12pt;
}
.infotext {
font-family:arial; color:black; background:yellow; font-size:10pt;
}

 .headlines, .sublines, .infotext {


font-family:arial; color:black; background:yellow;
}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}
CONTEXT DEPENDANT SELECTORS
 It is possible to make selectors that will only work in certain
contexts.

For example, you can define a style for the <B> tag that is only
triggered if the text is not only bold but also written in italics.

For example, the style should be in effect here:

<i><b>example</b></i>

but not here :

<b>example</b>.
 Simply adding a normal style to the <B> tag is done like this:

B {font-size:16px}

Adding a context dependent style, like the one described above is done
like this:

I B {font-size:16px;}

We simply separated the contextual <I> tag from the <B> tag with a
space.
 USING GROUPED AND CONTEXT DEPENDENT
SELECTORS AT THE SAME TIME:
It is possible to use context dependent and grouped
selectors at the same time.
For example, like this:
I B, .headlines, B .sublines {font-size:16px;}

In the example the font-size of 16 pixels is in effect on:


1) All <B> tags enclosed by <I> tags
2) All headlines classes.
3) sublines classes enclosed by <B> tags.
WHERE TO PLACE IT
 CSS can be added to your pages at 3 different levels.

 It is possible to create CSS styles that only work for the single
tag it is defined for.

 Single tag CSS is used when the style is used in a single place
on the entire site.

 Usually a certain style appears more than once on your pages,


and thus you should use the second technique: adding styles
that are defined once for the entire page.

 If, however, that certain style is used on more than a single page,
you should use the third - and most powerful - technique
described: adding styles that are defined once for the entire site.
SINGLE TAGS
 CSS can be defined for single tags by simply adding
style="styledefinition:styleattribute;" to the tags.
Look at this example:
It is <b style="font-size:16px;">NOT</b> me.
 You should limit your use of single tag CSS.

 If you define your styles for each and every tag they're used on, you will
lose much of the power associated with CSS.

 For example, you will have to define the style over and over again
whenever it's used, rather than just defining it once and then referring to
that one definition whenever it's used.

 Furthermore, if you wanted to change a certain style, you'd have to


change it all over in your document, rather than in one place.
SINGLE PAGES
 <html>
<head>
<title>MY CSS PAGE</title>
<style type="text/css">
.headlines, .sublines, .infotext {font-face:arial; color:black;
background:yellow; font-weight:bold;}

.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}
</style>
</head>
<body>
<span class="headlines">Welcome</span><br>
<div class="sublines">
This is an example page using CSS.<br>
The example is really simple,<br>
and doesn't even look good,<br>
but it shows the technique.
</div>

<table border="2"><tr><td class="sublines">
As you can see:<br>
The styles even work on tables.
</td></tr></table>
<hr>
<div class="infotext">
Example from checkit.com.
</div>
<hr>
</body>
</html>
ENTIRE SITES
 File: example.html
<html>
<head>
<title>MY CSS PAGE</title>
<link rel=stylesheet href="whatever.css" type="text/css">
</head>
<body>
<span class="headlines">Welcome</span><br>
<div class="sublines">
This is an example of a page using CSS.<br>
The example is really simple,<br>
and doesn't even look good,<br>
but it shows the technique.
</div>
<table border="2"><tr><td class="sublines">
As you can see:<br>
The styles even work on tables.
</td></tr></table>
<hr>
<div class="infotext">Example from CheckIT.Com.</div>
<hr>
</body>
</html>
 The above example is the exact same as we used for CSS
defined for entire pages, with one important exception:
There is no style definition on the page. Instead we added a
reference to an external style sheet:

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


 File: whatever.css

.headlines, .sublines, infotext {font-face:arial; color:black;


background:yellow; font-weight:bold;}

.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}
 Now if you just add the line <link
rel=stylesheet href="whatever.css"
type="text/css"> to the <head> of all your
pages, then the one style definition will be in
effect for your entire site.

You might also like