WD Unit 3 (B)

CSS Links
With CSS, links can be styled in many different ways.
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background,
etc.).
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
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */

a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
When setting the style for several link states, there are some order rules:
 a:hover MUST come after a:link and a:visited

 a:active MUST come after a:hover
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
a:link {
text-decoration: none;
}
a:visited {
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Background Color
The background-color property can be used to specify a background color for links:
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Link Buttons
This example demonstrates a more advanced example where we combine several
CSS properties to display links as boxes/buttons:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>

<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
SPAN
Definition and Usage
The <span> tag is an inline container used to mark up a part of a text, or a part of a
document.
The <span> tag is easily styled by CSS or manipulated with JavaScript using the class
or id attribute.
The <span> tag is much like the <div> element, but <div> is a block-level element
and <span> is an inline element.
Cursors
This example demonstrates the different types of cursors (can be
useful for links):
<span style="cursor: auto">auto</span><br>
<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>
CSS Lists
Unordered Lists:
o Coffee
o Tea
o Coca Cola
 Coffee
 Tea
 Coca Cola
Ordered Lists:
1. Coffee
2. Tea
3. Coca Cola
I. Coffee
II. Tea
III. Coca Cola
HTML Lists and CSS List Properties

In HTML, there are two main types of lists:
 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
 Set different list item markers for ordered lists

 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items
Different List Item Markers

The list-style-type property specifies the type of list item marker.
The following example shows some of the available list item markers:
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;
}
An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:
ul {
list-style-image: url('sqpurple.gif');
}
Remove Default Settings

The list-style-type:none property can also be used to remove the markers/bullets.
Note that the list also has default margin and padding. To remove this,
add margin:0 and padding:0 to <ul> or <ol>:
When using the shorthand property, the order of the property values are:
 list-style-type (if a list-style-image is specified, the value of this property

will be displayed if the image for some reason cannot be displayed)
 list-style-position (specifies whether the list-item markers should appear
inside or outside the content flow)
 list-style-image (specifies an image as the list item marker)
If one of the property values above is missing, the default value for the missing
property will be inserted, if any.
Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties
added to the <li> tag will affect the individual list items:
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
CSS Tables
<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {

border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<h1>A Fancy Table</h1>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>HCL</td>
<td>Mohan</td>
<td>India</td>
</tr>
</table>
</body>
</html>
Full-Width Table
The table above might seem small in some cases. If you need a table that should
span the entire screen (full-width), add width: 100% to the <table> element:
table {
width: 100%;
}
Table Width and Height

The width and height of a table are defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the <th>
elements to 70px:
table {
width: 100%;
}
th {
height: 70px;
}
Try it Yourself »
CSS Table Alignment

Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of
the content in <th> or <td>.
By default, the content of <th> elements are center-aligned and the content of <td>
elements are left-aligned.
To center-align the content of <td> elements as well, use text-align: center:
td {
text-align: center;
}
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>.
By default, the vertical alignment of the content in a table is middle (for both <th>
and <td> elements).
The following example sets the vertical text alignment to bottom for <td> elements:
td {
height: 50px;
vertical-align: bottom;
}
Table Padding
To control the space between the border and the content in a table, use
the padding property on <td> and <th> elements:
th, td {
padding: 15px;
text-align: left;
}
Horizontal Dividers
th, td {
border-bottom: 1px solid #ddd;
}
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<h2>Bordered Table Dividers</h2>

<p>Add the border-bottom property to th and td for horizontal dividers:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to
display the full content:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}

</style>
</head>
<body>
<h2>Responsive Table</h2>
<p>A responsive table will display a horizontal scroll bar if the screen is too
small to display the full content. Resize the browser window to see the effect:</p>
<p>To create a responsive table, add a container element (like div) with <strong>overflow-
x:auto</strong> around the table element:</p>
<div style="overflow-x: auto;">

<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>

WD Unit 3 (B)

Uploaded by

Copyright:

Available Formats

You might also like

WD Unit 3 (B)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WD Unit 3 (B)

Uploaded by

Copyright:

Available Formats

CSS Links

With CSS, links can be styled in many different ways.

The four links states are:

 a:link - a normal, unvisited link

/* mouse over link */

 a:hover MUST come after a:link and a:visited

<p>A link styled as a button:</p>

HTML Lists and CSS List Properties

The CSS list properties allow you to:

 Set different list item markers for ordered lists

Different List Item Markers

An Image as The List Item Marker

Remove Default Settings

 list-style-type (if a list-style-image is specified, the value of this property

Styling List With Colors

#customers td, #customers th {

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

<h1>A Fancy Table</h1>

Table Width and Height

CSS Table Alignment

To center-align the content of <td> elements as well, use text-align: center:

<h2>Bordered Table Dividers</h2>

tr:nth-child(even) {background-color: #f2f2f2;}

<div style="overflow-x: auto;">

You might also like