Design 121 CSS explained

Here is the information about the mainstyle.css file found in design 121

/* ++++++++++ global general styles start ++++++++++*/
These are comments and will not display on the page.
html, body {
margin:0px;
padding:0px;
font: 13px Arial, Helvetica, sans-serif;
color:#766D6D;
background:#ffffff;
}
This is multiple selector for the html and body tags. Margin and Padding are set to zero. The Font-size will be 13px Arial font face or Helvetica or sans serif. The text color is set to #766D6D (shade of gray)) and the background is set to #FFFFFF (white).
a:link { color:#CB951D; }
a:visited { color:#A8B32D; }
a:active { color:#A8B32D; }
a:hover { color:#000000; }
These are pseudo-class selectors which have styles that set the colors #CB051D (gold) for link; #A8B32D (green) for visited and active; #000000 (black) for hover.
.color1text18 {
font-family: arial, geneva, sans-serif;
font-size: 18pt;
color: #A8B32D;
}
This is a style for a class named ".color1text18" It sets the font face, size to 18pt, and color #A8B32D (yellow-green) for the text.
/* ++++++++++ global general styles end ++++++++++*/
These are comments and will not display on the page.
/* ++++++++++ global structure styles start ++++++++++*/
These are comments and will not display on the page.
.big-slogan {
color:#5373a6;
font-family:Times, serif;
font-size:28px;
}
This is a style for a class named ".big-slogan". It sets the text color to #5373A6 (blue), font face (Times, serif) and font size to 28px.
.sm-slogan {
color:#5373a6;
font-family:Times, serif;
font-size:14px;
line-height:16px; }
This is a style for a class named ".sm-slogan". It sets the text color to #5373A6 (blue), font face (Times, serif) and font size to 28px. The line height is 16px.
/* ++++++++++ global general styles end ++++++++++*/
These are comments and will not display on the page.
/* ++++++++++ global structure styles start ++++++++++*/
These are comments and will not display on the page.
#a5-body-center {
text-align:left;
}
This is an id selector with an id of "a5-body-center" and will align the text to the left.
#a5-body {
position: relative;
width: 770px;
/* change this to a specific amount for a fixed design. E.g., 770px. */
/* remove these comment tags if the page is to be centered. The 'text-align' property in the 'a5-body-center' rule must also be changed from 'left' to 'center'
margin-left: auto;
margin-right: auto;
*/
text-align:left;
padding-bottom:10px;
border:0px solid #000000;
}
This is an id selector with an id of "a5-body". The element is positioned relative and has a width of 770 px. The first comment line refers to changes for a fixed design. The second comment line refers to the left and right margins that are set to auto but may be changed to center. The text is aligned to the left, the padding at the bottom is 10px, and the border at the top is set to 0px with a solid black line.
#a5-header {
position:relative;
left:0px;
top:0px;
height:98px;
border:0px solid #000000;
}
This is an id selector with an id of "a5-header". The element is positioned relative 0px from the left and top margins. The height is 98px. There is a border at the top set to 0px with a solid black line.
#a5-header-center {
position:absolute;
left:169px;
top:0px;
}
This is an id selector with an id of "a5-header-center". The element is positioned absolute, 169px from the left margin and 0px from the top margin.
#a5-header-right {
position:absolute;
left:553px;
top:0px;
}
This is an id selector with an id of "a5-header-right". The element is positioned absolute, 553px from the left margin and 0px from the top margin.
#a5-body-content {
position:relative;
background: #ffffff url(images/bg-body-content.jpg) no-repeat;
height:410px;
margin-right:15px;
border:0px solid #000000;
}
This is an id selector with an id of "a5-body-content". The element is positioned relative. The background is #FFFFFF (white) with a jpg image (bg-body-content.jpg) with no repeats. The height is 500px, the right margin is 15px, and the border is 0px from the top with a solid line and color of #000000 (white).
#a5-column-left {
position:absolute;
left:0px;
top:19px;
width:190px;
}
This is an id selector with an id of "a5-column-left". The element is positioned absolute. It is 0px from the left margin and 19px from the top margin. The width is 190px.
#a5-menu {
width:190px;
font:bold 13px Arial, Helvetica, sans-serif;
}
This is an id selector with an id of "a5-menu". The width is 190px. The font is bold, 13px, and the font family is Arial, Helvetica, sans-serif.
#a5-menu a {
display:block;
text-align:left;
line-height:23px;
vertical-align:50%;
padding-left:15px;
margin-bottom:1px;
text-decoration:none;
background: url(images/bg-menu-off.gif) no-repeat 0px 0px;
color:#E9F92C;
}
This is a contextual selector. It will apply to all the "a" tag within the id of "a5-menu". The display is block, the text is aligned to the left, the line height of the text is 23px, the text has a vertical alignment of 50%, the padding on the left is 15px, the margin at the bottom is 1px, and there are no text decorations. The background is a jpg image called bg-menu-off-.gif with no-repeat at position 0px on the x-axis and y-axis. The text color is #E9F92C (yellow).
#a5-menu a:hover {
background: url(images/bg-menu-on.gif) no-repeat 0px 0px;
margin-bottom:1px;
color: #E9F92C;
}
This is a contextual selector. It will apply to the "a:hover" (anchor link pseudo-class) tag within the id of "a5-menu". The background color is #E9F92C (yellow). The bottom margin is 1px.
#a5-bottom-left-content {
width:136px;
font:bold 12pt times, garamond, serif;
line-height:26px;
text-align:right;
margin:9px 0px 0px 10px;
color:#DF9B05;
border:1px solid #999A8D;
}
This is an id selector with an id of "a5-bottom-left-content". The width is 136px. The font is bold, 12px, and the font-family is times, garamond, serif font-family. The line height is 26px. The text is aligned to the right. The top margin is 9px, right 0px, bottom 0px, and left 10px. The text color is #DF9B05 (orange). The border is 1px, solid line, and the color is #999A8D (gray).
#a5-copyright {
font-size: 8pt;
padding:10px 50px 10px 10px;
color:#766D6D;
}
This is an id selector with an id of "a5-copyright". The font size is 8pt. The padding is 10px on the top, 50px on the right side, 10px on the bottom, and 10px on the left side. The text color is #766D6D (reddish gray).
#a5-column-center {
position:absolute;
left:190px;
top:0px;
line-height:18pt;
padding:24px 0px 0px 268px;
}
This is an id selector with an id of "a5-column-centert" with the element position as absolute. It is 190px from the left and 0px from the top. The line height is 18pt. The padding is 24px from the top, 0px on the right side, 0px on the bottom, and 268px from the left side.
/* ++++++++++ global structure styles end ++++++++++*/
These are comments and will not display on the page.
/* ++++++++++ second level start ++++++++++*/
These are comments and will not display on the page.
#a5-body-content-sl {
position:relative;
background: #ffffff url(images/bg-body-content-sl.jpg) no-repeat;
height:410px;
margin-right:15px;
border:0px solid #000000;
}
This is an id selector with an id of "a5-body-content-sl". The element position is relative. The background is #FFFFFF (white) with a jpg image (bg-body-content-sl.jpg) that is not repeated. The height is 500px with a right margin of 15px. The border is 0px, solid line, and black.
#a5-column-center-sl {
position:absolute;
left:190px;
top:0px;
line-height:18pt;
padding:18px 0px 0px 18px;
}
This is an id selector with an id of "a5-column-center-sl". The element position is absolute 190px from the left and 0px from the top. The line height is 18pt. The padding is 18px from the top, 0px from the right, 0px from the bottom, and 18px from the left.
#a5-sl-title {
height:23px;
font:bold 14px Arial, Helvetica, sans-serif;
background: #4E2124 url(images/bg-title.jpg);
color:#ffffff;
padding:3px 0px 0px 40px;
margin-bottom:10px;
border:0px solid #000000;
voice-family:"\"}\"";
voice-family:inherit;
height:20px;
}
This is an id selector with an id of "a5-sl-title". The height is 23px. The font is bold, 14px, and font family of Arial, Helvetica, and sans-serif. The background is #4E2124 (yellow-green). The text color is #FFFFFF (white). The padding is 3px from the top, 0px from the right, 0px from the bottom, and 40px from the left. The margin at the bottom is 10px. The border is 0px all around, solid style, and color #000000 (black). The browser is looking for a voice-family file called "}". If the file existed on the user's computer, an audio browser could use it as the voice with which to read the page. The second voice-family rule "inherit" is there to clean up after the first, just in case an audio browser reads the styles and a file with that name exists on the users' computer. The second rule causes the first to be ignored even by audio browsers. The height is 20px.
 
html>body #a5-sl-title {
height:20px;
}
This is a child selector where the id selector of "a5-sl-title", which is within body, is the child of html and the height is set to 20px.
#a5-content-right-sl {
float:right;
width:182px;
font:bold 12pt times, garamond, serif;
line-height:16px;
text-align:right;
padding:15px;
margin:10px 10px 10px 15px;
color:#ffffff;
border:1px solid #999A8D;
background:#C1C96A;
voice-family:"\"}\"";
voice-family:inherit;
width:150px;
}
This is an id selector with an id of "a5-content-right-sl". The element is floated to the right. The width is 182px. The font is bold, 12pt, and font family of times, garamond, and serif. The line height is 18px. The text is aligned to the right. The padding is 15px on all sides. The margins are 10px for the top, right, bottom, and 15px for the left side. The text color is #FFFFFF (white). The border is 1px all around, solid line, and the color is #999A8D (gray). The background color is #CAC96A (yellow-green). The browser is looking for a voice-family file called "}". If the file existed on the user's computer, an audio browser could use it as the voice with which to read the page. The second voice-family rule "inherit" is there to clean up after the first, just in case an audio browser reads the styles and a file with that name exists on the users' computer. The second rule causes the first to be ignored even by audio browsers. The width is 150px.
html>body #a5-content-right-sl {
width:150px;
}
This is a child selector where the id selector of "a5-content-right-sl", which is within body, is the child of html and the width is set to 150px.
/* ++++++++++ second level end ++++++++++*/
These are comments and will not display on the page.

return to top


Valid XHTML 1.0 Strict Valid CSS!