html-css

Contents

HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages

HTML Tags

HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags

HTML Documents = Web Pages

HTML documents describe web pages
HTML documents contain HTML tags and plain text
HTML documents are also called web pages

Example

<html>
<body>
<h1>My First Heading</h1>
<p>Hello World</p>
</body>
</html>

Example Explanation

The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph

HTML Attributes

Attributes provide additional information about HTML elements.

HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"

Attribute Example

HTML Attributes Reference

A complete list of legal attributes for each HTML element is listed in our:
Below is a list of some attributes that are standard for most HTML elements:

Attribute	Value	Description
class	classname	Specifies a classname for an element
id	id	Specifies a unique id for an element
style	style_definition	Specifies an inline style for an element
title	tooltip_text	Specifies extra information about an element (displayed as a tool tip)

DTD: indicates in which HTML 4.01 / XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset

Tag	Description	DTD
<!--...-->	Defines a comment	STF
<!DOCTYPE>	Defines the document type	STF
<a>	Defines an anchor	STF
<abbr>	Defines an abbreviation	STF
<acronym>	Defines an acronym	STF
<address>	Defines contact information for the author/owner of a document	STF
<applet>	Deprecated. Defines an embedded applet	TF
<area />	Defines an area inside an image-map	STF
<b>	Defines bold text	STF
<base />	Specifies the base URL/target for all relative URLs in a document	STF
<basefont />	Deprecated. Specifies a default color, size, or font for all the text in a document	TF
<bdo>	Overrides the current text direction	STF
<big>	Defines big text	STF
<blockquote>	Defines a long quotation	STF
<body>	Defines the document's body	STF
<br />	Defines a single line break	STF
<button>	Defines a clickable button	STF
<caption>	Defines a table caption	STF
<center>	Deprecated. Defines centered text	TF
<cite>	Defines a citation	STF
<code>	Defines a piece of computer code	STF
<col />	Defines attribute values for one or more columns in a table	STF
<colgroup>	Specifies a group of one or more columns in a table for formatting	STF
<dd>	Defines a description of an item in a definition list	STF
<del>	Defines text that has been deleted from a document	STF
<dfn>	Defines a definition term	STF
<dir>	Deprecated. Defines a directory list	TF
<div>	Defines a section in a document	STF
<dl>	Defines a definition list	STF
<dt>	Defines a term (an item) in a definition list	STF
<em>	Defines emphasized text	STF
<fieldset>	Groups related elements in a form	STF
<font>	Deprecated. Defines font, color, and size for text	TF
<form>	Defines an HTML form for user input	STF
<frame />	Defines a window (a frame) in a frameset	F
<frameset>	Defines a set of frames	F
<h1> to <h6>	Defines HTML headings	STF
<head>	Defines information about the document	STF
<hr />	Defines a horizontal line	STF
<html>	Defines the root of an HTML document	STF
<i>	Defines italic text	STF
<iframe>	Defines an inline frame	TF
<img />	Defines an image	STF
<input />	Defines an input control	STF
<ins>	Defines text that has been inserted into a document	STF
<kbd>	Defines keyboard input	STF
<label>	Defines a label for an <input> element	STF
<legend>	Defines a caption for a <fieldset> element	STF
<li>	Defines a list item	STF
<link />	Defines the relationship between a document and an external resource	STF
<map>	Defines a client-side image-map	STF
<menu>	Deprecated. Defines a menu list	TF
<meta />	Defines metadata about an HTML document	STF
<noframes>	Defines an alternate content for users that do not support frames	TF
<noscript>	Defines an alternate content for users that do not support client-side scripts	STF
<object>	Defines an embedded object	STF
<ol>	Defines an ordered list	STF
<optgroup>	Defines a group of related options in a drop-down list	STF
<option>	Defines an option in a drop-down list	STF
<p>	Defines a paragraph	STF
<param />	Defines a parameter for an object	STF
<pre>	Defines preformatted text	STF
<q>	Defines a short quotation	STF
<s>	Deprecated. Defines strikethrough text	TF
<samp>	Defines sample output from a computer program	STF
<script>	Defines a client-side script	STF
<select>	Defines a drop-down list	STF
<small>	Defines smaller text	STF
<span>	Defines a section in a document	STF
<strike>	Deprecated. Defines strikethrough text	TF
<strong>	Defines strong text	STF
<style>	Defines style information for a document	STF
<sub>	Defines subscripted text	STF
<sup>	Defines superscripted text	STF
<table>	Defines a table	STF
<tbody>	Groups the body content in a table	STF
<td>	Defines a cell in a table	STF
<textarea>	Defines a multiline input control (text area)	STF
<tfoot>	Groups the footer content in a table	STF
<th>	Defines a header cell in a table	STF
<thead>	Groups the header content in a table	STF
<title>	Defines a title for the document	STF
<tr>	Defines a row in a table	STF
<tt>	Defines teletype text	STF
<u>	Deprecated. Defines underlined text	TF
<ul>	Defines an unordered list	STF
<var>	Defines a variable	STF
<xmp>	Deprecated. Defines preformatted text

HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HEADINGS ARE IMPORTANT

Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Search engines use your headings to index the structure and content of your web pages. Since users may skim your pages by its headings, it is important to use headings to show the document structure.

H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

The <hr /> tag creates a horizontal line in an HTML page.

The hr element can be used to separate content:

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

HTML Comments

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.

Comments are written like this:

HTML Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Don't Forget the End Tag
Most browsers will display HTML correctly even if you forget the end tag:

<p>This is a paragraph

<p>This is another paragraph

HTML Line Breaks

Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:

<p>This is<br />a para<br />graph with line breaks</p>

The <br /> element is an empty HTML element. It has no end tag.
<br> or <br /> In XHTML, XML, elements with no end tag (closing tag) are not allowed. Even if <br> works in all browsers, writing <br /> instead works better in XHTML and XML applications.

This text is bold
This text is big
This text is italic
This is computer output
This is_subscript and ^superscript

The HTML <font> Tag Should NOT be Used

The <font> tag is deprecated in HTML 4, and removed from HTML5.

The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations.

In HTML 4, style sheets (CSS) should be used to define the layout and display properties for many HTML elements.

<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>

HTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag.
The <a> tag can be used in two ways:

1. To create a link to another document, by using the href attribute

2. To create a bookmark inside a document, by using the name attribute

HTML Link Syntax
<a href="url">Link text</a>

HTML Links - The target Attribute

The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab:

<a href="http://www.deerwalk.com/" target="_blank">Visit deerwalk</a>

HTML Links - The name Attribute

The name attribute specifies the name of an anchor.
The name attribute is used to create a bookmark inside an HTML document.

Note: The upcoming HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers.
Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

A named anchor inside an HTML document:

<a name="tips">Useful Tips Section</a>

Create a link to the "Useful Tips Section" inside the same document:

<a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the "Useful Tips Section" from another page:

<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>

Html Styles

CSS is used to style HTML elements.

For Eg.

This text is in Verdana and red

Styling HTML with CSS

CSS was introduced together with HTML 4, to provide a better way to style HTML elements.

CSS can be added to HTML in the following ways:

in Cascading Style Sheet files (CSS files)
in the <style> element in the HTML head section
in the style attribute in single HTML elements

Using the HTML Style Attribute

It is time consuming and not very practical to style HTML elements using the style attribute.

The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.

HTML Style Example - Background Color

The background-color property defines the background color for an element:

<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

HTML Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only, and has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.

Syntax for defining an image:

<img src="url" alt="some_text"/>

HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The value of the alt attribute is an author-defined text:

Basic Notes - Useful Tips for img tag

Note: If an HTML file contains ten images - eleven files are required to display the page right. Loading images takes time, so my best advice is: Use images carefully.

Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.

HTML Image Tags

Tag	Description
<img />	Defines an image
<map>	Defines an image-map
<area />	Defines a clickable area inside an image-map

HTML Tables

Tables are defined with the <table> tag.

How the HTML code above looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show. To display a table with borders, specify the border attribute:

HTML Table Headers

How the HTML code above looks in your browser:

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Header information in a table are defined with the <th> tag. All major browsers will display the text in the <th> element as bold and centered.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>v
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTMl lists

An ordered list:

1. The first list item

2. The second list item

3. The third list item

An unordered list:

List item
List item
List item

HTML Unordered Lists

Text Box: How the HTML code above looks in a browser:
• Coffee
• Milk

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items are marked with bullets (typically small black circles).

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

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Text Box: How the HTML code above looks in a browser:
1. Coffee
2. Milk

The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML Forms

HTML forms are used to pass data to a server.

A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

The <form> tag is used to create an HTML form:

<form>
input elements
</form>

HTML Forms - The Input Element

The most important form element is the input element. The input element is used to select user information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more. The most used input types are described below.

Text Fields

<input type="text" /> defines a one-line input field that a user can enter text into:

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

How the HTML code above looks in a browser:

First name:
Last name:

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Password Field

<input type="password" /> defines a password field:

<form>
Password: <input type="password" name="pwd" />
</form>
How the HTML code above looks in a browser:

Password:

Note: The characters in a password field are masked (shown as asterisks or circles).

Radio Buttons

<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

How the HTML code above looks in a browser:

Male
Female

Checkboxes

<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>

How the HTML code above looks in a browser:

I have a bike
I have a car

Submit Button

<input type="submit" /> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
How the HTML code above looks in a browser:

Username:

If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.

HTML Frames

With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

The disadvantages of using frames are:

Frames are not expected to be supported in future versions of HTML
Frames are difficult to use. (Printing the entire page is difficult).
The web developer must keep track of more HTML documents

The HTML frameset Element

The frameset element holds one or more frame elements. Each frame element can hold a separate document.

The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.

The HTML frame Element

The <frame> tag defines one particular window (frame) within a frameset.

In the example below we have a frameset with two columns.

The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window.

<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
Note: The frameset column size can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space, with an asterisk (cols="25%,*").

Basic Notes - Useful Tips

Tip: If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag.

Note: Add the <noframes> tag for browsers that do not support frames.

Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags!

HTMl iframes

Iframe - Set Height and Width

The height and width attributes are used to specify the height and width of the iframe.

The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
Eg. <iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - Remove the Border

The frameborder attribute specifies whether or not to display a border around the iframe.

Set the attribute value to "0" to remove the border:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

Use iframe as a Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of a link must refer to the name attribute of the iframe:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

Website Layouts

Most websites have put their content in multiple columns (formatted like a magazine or newspaper).

Multiple columns are created by using <table> or <div> tags. Some CSS are normally also added to position elements, or to create backgrounds or colorful look for the pages.

HTML Layouts - Using Tables

The simplest way of creating layouts is by using the HTML <table> tag.

The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:

<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2011 W3Schools.com</td>
</tr>
</table>
</body>
</html>

The HTML code above will produce the following result:

Main Title of Web Page
Menu HTML CSS JavaScript	Content goes here
Copyright © 2011 W3Schools.com

Note: Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!

HTML Layouts - Using Div Elements

The div element is a block level element used for grouping HTML elements.

The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:

<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 W3Schools.com</div>
</div>
</body>
</html>

The HTML code above will produce the following result:

Main Title of Web Page

Menu
HTML
CSS
JavaScript

Content goes here

HTML Doctypes

A doctype declaration refers to the rules for the markup language, so that the browsers render the content correctly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

HTML Different Doctypes

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

The doctype declaration should be the very first thing in an HTML document, before the <html> tag.

Tip: Always add a doctype to your pages. This helps the browsers to render the page correctly!

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font and center). Framesets are not allowed:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

The HTML head Element

The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.

The HTML title Element

The <title> tag defines the title of the document.

The title element is required in all HTML/XHTML documents.

The title element:

defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results

A simplified HTML document:

<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body></html>

The HTML base Element

The <base> tag specifies a default address or a default target for all
links on a page:

The HTML link Element

Text Box: <head><link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

The <link> tag defines the relationship between a document and an
external resource. The <link> tag is most used to link to style sheets:

The HTML style Element

Text Box: <head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

The <style> tag is used to define style information for an HTML document.

Inside the style element you specify how HTML elements should render in
a browser:

CSS

Before you continue you should have a basic understanding of the following:

HTML / XHTML

What is CSS?

CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

Styles Solved a Big Problem

HTML was never intended to contain tags for formatting a document.

HTML was intended to define the content of a document, like:

<h1>This is a heading</h1>

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

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.

All browsers support CSS today

CSS Saves a Lot of Work!

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!

CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations:

Text Box: For Eg.
p {color:red;text-align:center;}

Description: http://www.w3schools.com/css/selector.gif

The selector is normally the HTML element you want to style.

Each declaration consists of a property and a value.

The property is the style attribute you want to change. Each property has a value.

CSS Comments

Text Box: For Eg.
p {color:red;text-align:center;}
/*This is a comment*/

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.

A CSS comment begins with "/*", and ends with "*/", like this:

The id and class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

The id Selector

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a "#".

The style rule below will be applied to the element with id="para1"

Note : Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

In the example below, all HTML elements with class="center" will be center-aligned:

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

External style sheet
Internal style sheet
Inline style

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style 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:

Note: Do not leave spaces between the property value
and the units! "margin-left:20 px"
(instead of "margin-left:20px") will work in IE,
but not in Firefox or Opera.

Internal Style Sheet

Text Box: <head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

An internal style sheet should be used when a single document
has a unique style. You define internal styles in the head
section of an HTML page, by using the <style> tag, like this:

Inline Styles

An inline style loses many of the advantages of style sheets by mixing
content with presentation. Use this method sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

css List

In HTML, there are two types of lists:

unordered lists - the list items are marked with bullets
ordered lists - the list items are marked with numbers or letters

With CSS, lists can be styled further, and images can be used as the list item marker.

Different List Item Markers

The type of list item marker is specified with the list-style-type property:

Table Borders

Text Box: table, th, td
{
border: 1px solid black;
}

To specify table borders in CSS, use the border property.

The example below specifies a black border for table, th, and td elements:

Collapse Borders

The border-collapse property sets whether the table borders are collapsed into a single border or separated:

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in relation to other elements.

Description: http://www.w3schools.com/css/box-model.gif

The image below illustrates the box model:

Explanation of the different parts:

Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
Border - A border that goes around the padding and content. The border is affected by the background color of the box
Padding - Clears an area around the content. The padding is affected by the background color of the box
Content - The content of the box, where text and images appear

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Width and Height of an Element

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px

Assume that you had only 250px of space. Let's make an element with a total width of 250px:

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

DWIT Additional Project Work for

BScCSIT Students on Web Page Designing

Year1/ Semester 1 and 2

2012 Jan

Resource Person

Dambar Thapa

Kanchan R Pandey

===================================

Table of Contents

Duration: 16 hours

Section 1: 8 hours (Semester 1)

Section 2: 8 Hours (Semester 2)

Main heading : 1 hour

Heading : 30 min

Heading: 30 min

Course objective:

html-css

HEADINGS ARE IMPORTANT

HTML Doctypes

The HTML base Element

0 comments:

Search The Site

Popular Posts

Contact Details