Scribd
Upload
9 views3 pages

CSS Styling Guide for Web Design

The document contains CSS styles for a webpage, defining the appearance of various elements such as headers, tables, and navigation links. It includes specifications for colors, backgrounds, text alignment, and hover effects. The styles aim to create a visually appealing layout with a structured design for content presentation.

Uploaded by

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

CSS Styling Guide for Web Design

The document contains CSS styles for a webpage, defining the appearance of various elements such as headers, tables, and navigation links. It includes specifications for colors, backgrounds, text alignment, and hover effects. The styles aim to create a visually appealing layout with a structured design for content presentation.

Uploaded by

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

header {

background: #003366;
padding: 2px;
background-image:
url("[Link] );
}
h1 {
color: ##000000;
text-align: center;
text-transform: uppercase;
}

h2 {
color: #051249;
text-transform: uppercase;
}

.left{
float: left;
display: block;
width: 33%;
background:#80A852;
}

.left img {
display: block;
border: 3px solid;
width: 70%;
margin: 0 auto;
margin: 13%;

}
a {
background:#0000ff;
color: #000000;
text-align: center;
}

.right {
float: left;
display: inline-block;
width: 66%;
margin-left: 10px;
}

header a{
display: inline-block;
background:#0000ff;
text-decoration: none;
font-size: 150%;
border-radius: 10%;
border: solid black;
text-align: center;
margin: 10px;
padding:2px;
width:300px;
height:40px;

}
.active {
background-color: #FFFFFF;
color: #000000;
}
nav a:hover{
background: #b3b3b3b3;
color: #0006cc;
border-radius: 0;
}
.current{
background-color: #800000;
}

body {
margin: 3px;
padding: 3px;
}

table {
color: #0000ff;
font-family: Arial, Helvetica, sans-serif;
font-size:120%;
font-weight: bold;
line-height: 110%;
width: 140%;
height: 680px;
border: 2px solid black;
border-radius: 8px 8px 0px 0px;
box-shadow: 20px 20px #00ff00;
border-bottom: 10px solid #000000;
}

th{
color: #FFFFFF;
background: #008000;
background: -webkit-linear-gradient(#008000, #ccffcc);
background: -moz- linear-gradient(#008000, #ccffcc);
background: linear-gradient(#008000, #ccffcc);
border: 1px solid black;
border-radius: 6px 6px 0px 0px;
font-size: 19px;
text-shadow: 2px 2px 8px #FF0000;
}
th:first-child{
text-align: left;
}
th:nth-child(2){
text-align:center;}
th:nth-child(3){
text-align: center;
}
tr:first-child{
text-align: left;
}
tr:hover{
opacity: 1;
}
tr{
opacity: 0.8;
}

td{
border: 1px solid black;
background: #808080;
color: #000000;
border-radius: 2px;
padding: 5px;
text-shadow: 2px 2px 8px #ffffff;
font-size: 16px;
}
td:nth-child(2){
text-align: center;
}

td:nth-child(3){
text-align: center;
}

body {
margin: 3px;
padding: 3px;
}

You might also like