modifying existing css (cascading style sheets).
This is a quick guide to understanding and modifying a style sheet, without needing to learn the whole subject.
The stylesheet in the example below is typical of the free templates, though not identical to any one (it wouldn't fit in half a page)!
Excuse the garish background colours - they serve to distinguish between the stylesheet, the explanation & this introduction.
The stylesheet
/* A comment line -
This code is spread out so the explanation runs
alongside. It doesn't need the extra lines of
space.*/
body { background-color: #fdefd2;
font-family: "Arial", serif;
font-size: 16px;
line-height: 140%;
color: #000066;
}
p{ font-family: "Arial", serif;
line-height: 140%;
text-indent: 15px;
font-size: 16px;
color: #000000;
}
p:first-letter {font-size: 120%;
font-weight: 500;
}
div.navigate {
margin: auto;
font-family: "Verdana", serif;
font-size: 14px;
line-height: 150%;
background-color: #fdefd2;
width: 748px;
color: #000099;
padding: 5px;
border: 1px none;
border-style: outset;
border-color: #777777;
text-align: center;
}
h1{color: #000099;
font-size: 22px;
font-family: serif;
text-align: center;
}
h2{color: #009999;
font-size: 22px;
font-family: serif;
text-align: center;
}
h3{color: #882222;
font-size: 18px;
font-family: serif;
text-align: center;
}
|
The explanationThis section (the body) specifies the style for the body element of the webpage - the part that the visitor sees. If no other styles apply, then these will, and they lay the foundation for other divs to build on (see below). The background color of the webpage or you can use images. The font for text, and an alternative (serif). The size of the text, in pixels. The line height is set larger than 100% for easier reading. The text color is dark blue. The text is made up of #RRGGBB - red, green and blue. (Ending the definition of the 'body' element). The p element means paragraph. This is indented to make new paragraphs clearer. And the font color is chosen as black. (no red, no green and no blue). Within the p elements, the first letter is made 20% larger and also bolder. A new div is defined for the navigation links. It can be given any name, but it helps you if the name is self-explanatory. The margin around the navigation div is set to auto, which places equal margins each side. A different background color for this div. The width of this div is 748 pixels. The padding is the gap between the edge of the div and its content (the text in this div). The border is like the frame of a painting. The border can be complicated, but 'outset' and 'inset' are goog starting points. The border color is set using rrggbb values. The text is aligned in the centre in this div. Several headings are defined (6 are permitted) with properties to suit. 3 are used in this example (h1, h2 & h3). Further help will be available soon from this guide to making and editing css stylesheets. It's good practice to download a template and try modifying the stylesheet to suit you... Download Free Templates. |
More information about the colours (colors)! will be added to this page:
Laying out webpages (appearance) with css.
This div has 8 pixel width border (border-color:#aa9966;) and 10 pixel width padding (between the text and the border).