CSS LISTS, LINKS, TABLES

Ms. Josephine T. Eduardo

LISTS

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

list-style-type: property
Example:

ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

example

CSS LINKS

Links can be styled with any CSS property (e.g. color, font-family, background,
etc.).

In addition, links can be styled differently depending on whatstatethey are

in.

The four links states are:

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

Text Decoration

The text-decoration property is mostly used to remove underlines from links

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

example

Background Color

The background-color property specifies the background color for links

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

example

CSSTables

Table Borders
To specify table borders in CSS, use the border property.
Example 1

CSS BUTTONS

HTML <button> tag

<button type="button">Click Me!</button>

The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images.
This is the difference between this element and buttons created with
the <input> element.

New

Attributes of Buttons
Attribute

Value

Description

autofocusNew

autofocus

Specifies that a button should automatically get focus when

the page loads

disabled

disabled

Specifies that a button should be disabled

formNew

form_id

Specifies one or more forms the button belongs to

formactionNew

URL

Specifies where to send the form-data when a form is

submitted. Only for type="submit"

formenctypeNew

application/x-www-form-urlencoded
multipart/form-data
text/plain

Specifies how form-data should be encoded before sending

it to a server. Only for type="submit"

formmethodNew

get
post

Specifies how to send the form-data (which HTTP method to

use). Only for type="submit"

formnovalidateNew

formnovalidate

Specifies that the form-data should not be validated on

submission. Only for type="submit"

formtargetNew

_blank
_self
_parent
_top
framename

Specifies where to display the response after submitting the

form. Only for type="submit"

name

name

Specifies a name for the button

type

button
reset
submit

Specifies the type of button

value

text

Specifies an initial value for the button