webdesign

- Rounded corners on a table
- Working with multiple CSS stylesheets

Rounded corners on a table

This CSS will give you rounded corners on your table, even if you add/remove columns and rows.

<!-- Top-left corner -->
table tr:first-child th:first-child ,
table tr:first-child td:first-child   { border-top-left-radius     : 15px ; }
 
<!-- Top-right corner -->
table tr:first-child th:last-child  ,
table tr:first-child td:last-child    { border-top-right-radius    : 15px ; }
 
<!-- Bottom-left corner -->
table tr:last-child  td:first-child   { border-bottom-left-radius  : 15px ; }
 
<!-- Bottom-right corner -->
table tr:last-child  td:last-child    { border-bottom-right-radius : 15px ; }

Working with multiple CSS stylesheets

Different types of CSS relationships

Type of stylesheet	Relationship	Title	Notes
Persistent	stylesheet	Not set	Always active
Preferred	stylesheet	Set	Active on initial page load
Alternate	alternate stylesheet	Set

Preferred and alternate stylesheets can be grouped together (if you need more than one stylesheet to create a given theme, for example). They are grouped together by having a common “title” attribute; grouped stylesheets will be enabled/disabled together.

While it is permitted by the DTD to have more than one set of preferred stylesheets, it's best practice to have one set (which implements your site's default theme) and then provide any other sets as alternate stylesheets. I've included an example below of where you would put a second (and subsequent) set of preferred stylesheets, but (as noted below in comments) I'd recommend that you not do so.

Switching themes using browser built-in controls

When the page initially loads, any persistent stylesheets and the first of any preferred stylesheets are applied. The user can then switch to other stylesheets; when this choice is made, any persistent stylesheets will remain “enabled” and all other preferred and alternate stylesheets will be “disabled”.

Firefox: View > Page Style

Example with all stylesheet relationships

csstest.html

<!DOCTYPE html>
<html lang="en_us">
<head>
<title>CSS Relationship Test</title>
 
<!-- PERSISTENT STYLESHEETS -->
 
<link rel='stylesheet'           type="text/css" media="screen" href="base1.css"                                   />
<link rel='stylesheet'           type="text/css" media="screen" href="base2.css"                                   />
 
<!-- PREFERRED STYLESHEETS -->
 
<link rel='stylesheet'           type="text/css" media="screen" href="preferred1-1.css" title='Preferred Theme #1' />
<link rel='stylesheet'           type="text/css" media="screen" href="preferred1-2.css" title='Preferred Theme #1' />
 
<!-- You should avoid doing this, use "alternate stylesheet" instead -->
<link rel='stylesheet'           type="text/css" media="screen" href="preferred2-1.css" title='Preferred Theme #2' />
<link rel='stylesheet'           type="text/css" media="screen" href="preferred2-1.css" title='Preferred Theme #2' />
 
<!-- ALTERNATE STYLESHEETS -->
 
<link rel='alternate stylesheet' type="text/css" media="screen" href="alternate1-1.css" title='Alternate Theme #1' />
<link rel='alternate stylesheet' type="text/css" media="screen" href="alternate1-2.css" title='Alternate Theme #1' />
 
<link rel='alternate stylesheet' type="text/css" media="screen" href="alternate2-1.css" title='Alternate Theme #2' />
<link rel='alternate stylesheet' type="text/css" media="screen" href="alternate2-2.css" title='Alternate Theme #2' />
<link rel='alternate stylesheet' type="text/css" media="screen" href="alternate2-3.css" title='Alternate Theme #2' />
<link rel='alternate stylesheet' type="text/css" media="screen" href="alternate2-4.css" title='Alternate Theme #2' />
 
<link rel='alternate stylesheet' type="text/css" media="screen" href="alternate3-1.css" title='Alternate Theme #3' />
<link rel='alternate stylesheet' type="text/css" media="screen" href="alternate3-2.css" title='Alternate Theme #3' />
 
</head>
<body>
</body>
</html>