Scribd
Upload
49 views10 pages

Css Lists, Links, Tables: Ms. Josephine T. Eduardo

The document discusses different CSS properties for styling lists, links, tables, and buttons. It provides examples of how to style unordered and ordered lists using the list-style-type property. It describes the four link states (unvisited, visited, hover, active) that can be styled and provides examples of styling links using text-decoration and background-color properties. It also gives a brief overview of styling table borders using the border property and defining buttons using HTML with various button attributes.

Uploaded by

Lorenz Pasensyoso
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
49 views10 pages

Css Lists, Links, Tables: Ms. Josephine T. Eduardo

The document discusses different CSS properties for styling lists, links, tables, and buttons. It provides examples of how to style unordered and ordered lists using the list-style-type property. It describes the four link states (unvisited, visited, hover, active) that can be styled and provides examples of styling links using text-decoration and background-color properties. It also gives a brief overview of styling table borders using the border property and defining buttons using HTML with various button attributes.

Uploaded by

Lorenz Pasensyoso
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

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

You might also like