CSS Part 2

Working with Table
• To specify table borders in CSS, use the border

property.
• The example below specifies a black border for
<table>, <th>, and <td> elements:
• table, th, td {
border: 1px solid black;
}
• Outline-style: solid, groove, dashed, dotted,

double, none etc.
<html> <tr>
<head> <td>Peter</td>
<style> <td>Griffin</td>
table, th, td { </tr>
border: 10px solid red; <tr>
} <td>Lois</td>
</style> <td>Griffin</td>
</head> </tr>
<body> </table>
<h2>Add a border to a table:</h2> </body>

<table> </html>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
th,td{
border: 1px solid red;
}
</style>
</head>
<body>
<style>
td{
border: 1px solid red;
}
</style>
Collapse Table Borders
• The border-collapse property sets whether the

table borders should be collapsed into a single
border:
• table {
border-collapse: collapse;
}
table, th, td {
}
Table width and height
• Width and height of a table are defined by the
width and height properties.
• table {
width: 100%;
}
th {
height: 50px;
}
<style>
table, td, th {
}
table {
width: 100%;
}
th{
height: 50px;
}
</style>
<style>
table, td, th {
}
table {
width: 100%;
}
th,td{
height: 50px;
}
</style>
Horizontal alignment
• Text-align property align text in th/ td
– Left, right, center
– th {
text-align: left;
}
Vertical alignment
• Vertical-align property align text in td/td
– Top, bottom, middle
– td {
height: 50px;
vertical-align: bottom;
}
Table Padding
• To control the space between the border and
the content in a table, we use padding
property on <td> and <th> elements
• th, td {
padding: 15px;
text-align: left;
}
Horizontal dividers
• Add border-bottom property to th/ td
elements to add horizontal dividers
• th, td {
border-bottom: 1px solid #ddd;
}
Hoverable table
• :hover selector on tr/th/td to highlight table
rows on mouse over
• tr:hover {background-color: red;}
<style>
table {
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th:hover {background-color:red;}
</style>
Stripped table
• Stripped tables, use the nth-child() selector
and add a background-color to all even (or
odd) table rows
• tr:nth-child(even) {background-color: red;}
<style>
table {
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: red;}

</style>
Table color
• Background-color and color property
• th {
background-color: red;
color: white;
}
Responsive table
• Add a container element ( <div>) with overflow-
x:auto around the <table> element to make it
responsive:
• <div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Table Design using CSS property
• Design a table of 3x3 showing usage of
following properties:
– Collapsed border in red color
– Data in blue color
– Headings in green color
– Background color in cells yellow
– All elements left aligned including headers
– Hover effect on rows
– Make the table responsive
Lists
• unordered lists (<ul>) - the list items are
marked with bullets
• ordered lists (<ol>) - the list items are marked
with numbers or letter
• 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
List item markers
• The list-style-type property specifies the type of list item marker.
• CSS
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;
}
<html> <ul class="b">
<head> <li>Coffee</li>
<style> <li>Tea</li>
ul.a { <li>Coca Cola</li>
list-style-type: circle; </ul>
} <ol class="c">
ul.b { <li>Coffee</li>
list-style-type: square; <li>Tea</li>
} <li>Coca Cola</li>
ol.c { </ol>
list-style-type: upper-roman; <ol class="d">
} <li>Coffee</li>
ol.d { <li>Tea</li>
list-style-type: lower-alpha; <li>Coca Cola</li>
} </ol>
</style> </body>
</head> </html>
<body>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
An image as the list item marker
• list-style-image property specifies an image as
the list item marker
• ul {
list-style-image: url('sqpurple.gif');
}
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
Position the list item marker
• list-style-position property specifies
the position of the list-item markers
• Outside Vs inside
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Styling lists with colors
<style>
ol {
background: red;
padding: 20px;
}
ul {
background: blue;
padding: 20px;
}
ol li {
background: green;
padding: 5px;
margin-left: 35px;
}
ul li {
background: yellow;
margin: 5px;
}
</style>
Display property
• It specifies how an element is displayed
• Elements
– Block: Div, h1, p, form, section etc.
• Default start on new line
– Inline: a, img etc.
• Does not start on new line
• Display: inline, block, none
– Visibility: hidden
Example
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
</ul>
</body>
</html>
Output?
<html>
<head>
<style>
h1,p {
display: none;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>ITSEC </p>
</body>
</html>
Output?
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<h1 class="hidden"> ITSEC </h1>
</body>
</html>
Box Model
• Consists of margin, border, padding and actual content.
• Margin: An area outside the border. The margin is
transparent.
• Border: It goes around the padding and content.
• Padding: An area around the content<head>
Box Model
It allows us to define a border around elements and define space between elements
<html>
<head>
<style>
div {
width: 300px;
border: 10px solid green;
padding: 50px;
margin: 10px;
}
</style>
</head>
<body>
<h2>Example of Box Model</h2>
<p>Hello World</p>
<div>ITS Engineering College</div>
</body>
</html>
Opacity
• It specifies the opacity/transparency of an
element
– It can take a value from 0.0 - 1.0
• img {
opacity: 0.5;
}
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>
<html>
<head>
<style>
div {
padding: 5px;
}
div.first {
opacity: 0.6;
}
p{
opacity:0.2;
}
</style>
</head>
<body>
<p> Hello World</p>
<div class="first"><p>opacity 0.6</p></div>
</body>
</html>
Navigation Bar
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
<html> li a:hover {
<head> background-color: black;
<style> color: white;
ul { }
list-style-type: none; </style>
margin: 0; </head>
padding: 0; <body>
width: 200px;
background-color: yellow; <ul>
} <li><a href="#home">Home</a></li>
li a { </ul>
display: block;
color: gray; </body>
padding: 8px; </html>
text-decoration: none
}

CSS Part 2

Uploaded by

Document Information

Original Description:

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

CSS Part 2

Uploaded by

Copyright:

Available Formats

Working with Table

• To specify table borders in CSS, use the border

• Outline-style: solid, groove, dashed, dotted,

<h2>Add a border to a table:</h2> </body>

• The border-collapse property sets whether the

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

<img src="img_forest.jpg" alt="Forest" width="170" height="100">

You might also like