Review Exercises
Please go to www.w3schools.com for many more examples as well as self-paced quizzes.
HTML Basic Tags Examples
Poem problems (some problems with HTML formatting)
Heading tags
Comments in the HTML source
Add a background color
Set the background color with CSS
HTML Formatting Text Examples
Preformatted text (how to control line breaks and spaces)
Abbreviations and acronyms
Long and short quotations
How to mark deleted and inserted text
Decorate the text with css
HTML Link Examples
How to create hyperlinks
Set an image as a link
Open a link in a new browser window
Jump to another part of a document (on the same page)
A more complicated mailto link
HTML Table Examples
Simple tables
Headings in a table
Empty cells
Table with a caption
Table cells that span more than one row/column
Tags inside a table
Cell padding (control the white space between cell content and the borders
Add a background color or a background image to a table
Add a background color or a background image to a table cell
Align the content in a table cell
HTML List Examples
An unordered list
Different types of ordered lists
Different types of unordered Lists
Nested list
Definition list
HTML Image Examples
Insert images
Insert images from another folder or another server
Background image
Align an image within a text
Let the image float to the left/right of a paragraph
Display an alternate text for an image (if the browser can't load images)
Make a hyperlink of an image
Create an image-map, with clickable regions
Turn an image into an image map
HTML Style Examples
Styles in the head section of an HTML document
Link that is not underlined
Link to an external style sheet
HTML <head> Examples
Set a title of a document
One target for all links on a page
CSS Background Examples
How to repeat a background image
How to position a background image using pixels
A fixed background image (this image will not scroll with the rest of the page)
All the background properties in one declaration
Background properties explained
Text
Set the color of the text
Set the background-color of the text
Align the text
Decorate the text
Font
Set the font of a text
Set a paragraph font using the "caption" value
All the font properties in one declaration
Difference between em and %? Em is always relative to font size. % is relative to the containing block.
Specifically:
- A specification such as width:10em indicates a size relative to the em-size of the current element.
- However the specification font-size:0.8em implies a font-size that is 0.8 times the em size of the parent element.
Border
All the border properties in one declaration
Set different borders on each side
All the top border properties in one declaration
All the bottom border properties in one declaration
All the left border properties in one declaration
All the right border properties in one declaration
Set the style of the four borders
Set the style of the top border
Set the style of the bottom border
Set the style of the left border
Set the style of the right border
All the width border properties in one declaration
Set the width of the top border
Set the width of the bottom border
Set the width of the left border
Set the width of the right border
Set the color of the four borders
Set the color of the top border
Set the color of the bottom border
Set the color of the left border
Set the color of the right border
Outline
Draw a line around an element, outside the border edge (outline)
Set the style of an outline
Set the color of an outline
Set the width of an outline
Margin
All the margin properties in one declaration
Set the top margin of a text using a cm value
Set the top margin of a text using a percent value
Set the bottom margin of a text using a cm value
Set the bottom margin of a text using a percent value
Set the left margin of a text using a cm value
Set the left margin of a text using a percent value
Set the right margin of a text using a cm value
Set the right margin of a text using a percent value
Padding
Set the left padding of a tablecell
Set the right padding of a tablecell
Set the top padding of a tablecell
Set the bottom padding of a tablecell
All the padding properties in one declaration
List
The different list-item markers in unordered lists
The different list-item markers in ordered lists
All the list style types
Set an image as the list-item marker
Place the list-item marker
All list properties in one declaration
Table
Set the layout of a table
Show empty cells in a table
Collapse a table border
Set the space between table borders
Set the position of the table caption
Dimension
Set the height of an image using a pixel value
Set the height of an image using percent
Set the width of an element using a pixel value
Set the width of an element using percent
Set the maximum height of an element
Set the maximum width of an element using a pixel value
Set the maximum width of an element using percent
Set the minimum height of an element
Set the minimum width of an element using a pixel value
Set the minimum width of an element using percent
Specify the space between lines using a percent value
Specify the space between lines using a pixel value
Specify the space between lines using a number value
Dimension properties explained
Classification
How to display an element as an inline element
How to display an element as a block element
A simple use of the float property
An image with border and margins that floats to the right in a paragraph
An image with a caption that floats to the right
Let the first letter of a paragraph float to the left
Creating a horizontal menu
Creating a homepage without tables
Position an element relative to its normal position
Position an element with an absolute value
Position an element relative to the browser window
How to make an element invisible
How to make a table element collapse
Change the cursor
Clear the sides of an element
Classification properties explained
Positioning
Position an element relative to its normal position
Position an element with an absolute value
Set the shape of an element
How to show overflow in an element using scroll
How to hide overflow in an element
How to show set the browser to automatically handle overflow
Vertical alignment of an image
Place an element "behind" another element
Place an element "behind" another element 2
Set the top edge of an image using a pixel value
Set the top edge of an image using a percent value
Set the bottom edge of an image using a pixel value
Set the bottom edge of an image using a percent value
Set the left edge of an image using a pixel value
Set the left edge of an image using a percent value
Set the right edge of an image using a pixel value
Set the right edge of an image using a percent value
Positioning properties explained
Generated Content
Changes the quotation marks on a page
Pseudo-classes
Add different colors to a hyperlink
Add other styles to hyperlinks
Hyperlink: use of :focus
:first-child
:lang
Pseudo-elements
Make the first letter special in a text
Make the first line special in a text
Make the first letter and first line special
Use :before to insert some content before an element
Use :after to insert some content after an element