Web Design |
topic title |
||||||||||||||||||
main menushelp pagesprinter-friendly/text-only version your accountUse your ACOM account to access the discussion boards, submit course work and check marks and feedback Related topics |
Full list of style sheet properties
The intention of this page is to summarise our possible use of style sheets: at least thus far. When I first typed its title I did so with a rather appropriate slip of the finger, entering "Dull list of style sheet properties" instead. Yes, it is pretty dull, but it's also full - with the proviso that I have not included some of the more obscure possible values, where these are at the current time very shakily handled by browsers. I can't think of anyway to make this page more interesting, either for you to read or me to create, so let's just get on with it. The categories are as follows:
There's also a section on the available length units. Finally, at the bottom, I will mention the STYLE attribute, which can provide a useful way to make "one-off" style changes without going to the trouble of setting up separate classes. Do note that I have not included information about positioning elements on the page using style sheets. This is still an evolving technology, and also one which is quite complex. Myself, I also think it is a further step towards "rigid" rather than "flexible" web design. For all these reasons I have omitted discussion of it, but the interested can look at Niederst's Web Design in a Nutshell, pp. 418-422. Type and font propertiescolor (Note the usual Americanised spelling, and also that it's not "font-color"). This takes a colour name or RGB code and has fairly obvious results. font-size There are four sets of values. The first two are "absolute", the second two "relative": absolute sizes: xx-small ¦ x-small ¦ small ¦ medium ¦ large ¦ x-large ¦ xx-large. These make reference to the browser's inbuilt size definitions. length sizes: number + em ¦ ex ¦ px ¦ pt ¦ pc ¦ mm ¦ cm ¦ in. So to have text always 24 points in size, use { font-size: 24pt }. Follow this link for more information on different length units. A reminder though. Specifying font size in this way is not always the right thing to do. It "fixes" it regardless of the screen size of the user's monitor and their own wishes. As more and more graphic designers with an expertise in preparing print media - and therefore an obsession with getting everything looking exactly the way they want it, rather than meeting the needs of a variety of readers - turn their attention to web-based design, more and more sites are written this way. It's not always a bad thing, but then again it's not always a good thing either. (Sometimes it can also cause problems if printing a page.) If it really makes a difference how big your text is, go ahead and specify it (as long as you don't make it too small), but if there is even the slightest possibility of it not really mattering, then don't specify it like this: use the more relative ways given here, or don't specify it at all. relative sizes: larger ¦ smaller. Relative, that is, to the parent object, such as a <BODY> or <P> tag. percentage sizes: n%. The same, but as a percentage of the size of the parent (n can be larger or smaller than 100). font-family Remember that this takes a list of font names: check the page on fonts if you've forgotten why. You should note that if the font name contains spaces it should ideally be enclosed in quotes, as in this example: P { font-family: "Comic Sans MS", Arial, Helvetica, sans-serif } font-style normal is the default - you'll probably only ever use this to define italic. (You might, of course, end up using normal to block the inheritance of italicised text.) font-weight Similarly, though there is a normal value, the main use is for bold. There are many other possible values but as browser support for them is currently so limited I've saved us all some bother and omitted them. text-decoration Completing the trio, this is how you get underline. The "off" value in this case is none; that's how you can turn the underlining off links. Also available is overline and line-through. Finally, if I dare to mention there is also a value of blink, do you promise never to use it? Do you swear? text-align Unsurprisingly takes the values left, center and right. There is a justify value - to align to both margins - you could try it, but I don't think it always looks that great. vertical-align There are a plethora of other values but I'll stick to recording the most obvious ones, bottom, middle and top. Background propertiesThe first two are obvious: background-color Takes a colour name or RGB code. Or, the value transparent, which sounds interesting until you realise it's just the default. background-image Takes a value of the URL (filename) of the image. Note the syntax: On their own, these just replicate basic HTML, although note that they can be applied to any element: you can now have paragraphs with a different background colour or image, without this needing to be enclosed in a table (as in basic HTML). Above and beyond this, however, there are further possibilities opened up with the following properties, all of which apply to background images: background-repeat The default is repeat, which means the image will "tile" in the familiar fashion. However, you can also have no-repeat, which means the image will display only once: this is normally used in conjunction with the background-position property, as below. repeat-x means the image will repeat only horizontally, and repeat-y only vertically. background-attachment The default is scroll which means the background image (whether tiled or not) scrolls with the text. fixed means it will stay in position, which can be quite a nice effect - and, indeed, has been used on the style sheets sample site. background-position This specifies the position of a background image with reference to the box of which it is a part - whether that's the whole page (<BODY> tag), a table, an individual table cell, a <P> tag, or indeed any block-level element. Obviously, an image that repeats does not require this to be specified, but single images probably will. Values taken by this property are a little complicated. They come in horizontal/vertical pairs, and usually as a percentage. The default is 0% 0%, which refers to the top left of the area in question: 100% 100% is therefore the bottom right, and the rest follows logically. But you can also use left ¦ center ¦ right for the horizontal element and top ¦ center ¦ bottom for the vertical. Box-related propertiesSee the page on margins, padding and borders. I will re-summarise the available properties here, however. margin subdivided as: margin-top, margin-right, margin-bottom, margin-left. Defines the amount of margin around the element, outside the border.
H1 {margin: 15px}
H1 {margin: 0px 15px 0px 15px}
H1 {margin-top: 0cm;
margin-left: 1.5cm;
margin-bottom: 0cm;
margin-right: 1.5cm;}
padding subdivided as: padding-top, padding-right, padding-bottom, padding-left. Defines the amount of padding between the element and the border.
P.special {padding: 10px}
P.indent {padding-top: 0pt;
padding-left: 18pt;
padding-bottom: 3pt;
padding-right: 0pt;}
border-width subdivided as: border-top-width, border-right-width, border-bottom-width, border-left-width. As well as the usual units of length this can also take the values thin, medium or thick. See below for a couple of examples. border-color Not subdivided, but as the example below shows, can still have different values for each side; remember the order is top-right-bottom-left. Takes an RGB colour code or colour name. border-style As with border-color, not subdivided but can still have different values for the four sides. There are several different styles, which you might like to play around with: none ¦ dotted ¦ dashed ¦ solid ¦ double ¦ groove ¦ ridge ¦ inset ¦ outset. Examples of border properties:
P.highlight {border-style: ridge;
border-color: red;
border-width: medium;}
H1 {border-style: none none double double;}
height and width: these should be familiar but don't forget them: they can equally well be defined in a style sheet as via HEIGHT and WIDTH attributes in the HTML, and can, via styles, now be applied to other tags such as the <P> tag. You can see this in the example below. As usual, the values can be an absolute width, a relative (%) width, or auto. SUMMARY. The paragraph below has been rendered with a combination of the font, box and background properties mentioned so far. Examine the code: note that though I've used the STYLE attribute here, this could equally well be defined via style information in the header or an external style sheet.
<P STYLE="background-image: url(badgeback.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
text-align: center;
font-weight: bold;
width: 75%;
padding: 20px;
border-width: 2px;
border-style: inset;">
BRIGHTON & HOVE ALBION FC If that looks rather unimpressive on Netscape, at least it might also serve as an example of what does and doesn't work in that browser! I could keep showing you examples until every eventuality had been covered, but better at this stage, I think, to encourage you to go off and play with these properties yourself. Do always remember that browsers may vary in how they render styles, and it is better to be flexible than rigid. The scroll barIE5 - but no other browsers at the time of writing - allows you to change the colour of the scroll bar with a variety of properties. Strictly, these are browser-dependent, but I'm breaking my own rule here as, in the end, they're harmless. If a browser can't see them, it'll just carry on with the usual drab gray (or whatever default settings the user's desktop has). If you're viewing this web site on IE5, you should see the scroll bar matches the general colour scheme. Use the following properties to work this. Each takes the usual RGB code or name. Following the list I've reproduced the definition of this site's <BODY> tags so you can see how I've done it:
scrollbar-face-color scrollbar-arrow-color
scrollbar-track-color scrollbar-shadow-color
scrollbar-darkshadow-color scrollbar-3dlight-color
scrollbar-highlight-color
body { color: #006600;
background-color: #ffffff;
scrollbar-face-color: #90ee90;
scrollbar-track-color: #e5ffe5;
scrollbar-darkshadow-color: #006600;
scrollbar-highlight-color: #f0fff0;
scrollbar-arrow-color: #006600;
}
List propertieslist-style-type. A moment's recollection of the possible values in the type attribute of <OL> and <UL> tags should clarify the values this property can take: disc ¦ circle ¦ square ¦ decimal ¦ lower-roman ¦ upper-roman ¦ lower-alpha ¦ upper-alpha ¦ none. Observant readers might have realised that, as this property is shared between the two types of list, you can use this style sheet property to create ordered lists with <UL> tags, and vice versa, but that'd be rather gratuitously confusing. list-style-image. A highly convenient way to replace your bullets with images. Do note the syntax:
UL { list-style-image: url(star.gif) }
list-style-position. Seems a little trivial, but again this is something impossible to do in basic HTML. The value of inside for this property makes subsequent lines of list items begin under the list marker (bullet, number, image, whatever). outside makes subsequent lines match the indent of the first line: as on all lists on this site. Length unitsIn just about every case you might want to use one of these units, do remember that you can probably also use a relative size; usually a percentage, but sometimes a keyword like xx-large instead. However, some of these are still relative measures in some ways, as screen sizes and resolutions also affect them.
The STYLE attribute and the <STYLE> tagAs almost a parenthetical note, let me point out the uses of this attribute and tag. Almost every HTML element can take the STYLE attribute, which effectively serves as a generic substitute for just about any other layout-related attribute. (I add the term "layout-related" because, to stress the point, no matter how much use you make of your style sheet it will never be able to supersede the need for non-layout attributes such as HREF or ALT. Nor was the technique ever intended to.) The value of the STYLE attribute, as you'll see in the examples below, is made up of the property/value pair(s) you want to employ. You don't need the curly brackets, but you will need to separate each property/value from the others with semicolons. This probably seems rather pointless as, at one level, it is the same as using the particular attribute: for instance, these two tags would have exactly the same effect:
<TD WIDTH="50%" ALIGN=center>
<TD STYLE="width: 50%; text-align: center;">
Nor does this gain for you the advantages of an external style sheet - layout information remains in your HTML file, clogging it up. But bear in mind the cascade: when you are using style sheets, and want to change only individual tags of your document on a one-off basis, this is one way to do it. In addition, there are many things you can do in the STYLE attribute which can't be done using basic HTML; background colours and images for <P> tags, for instance. Here's another example. Note that these are "added on" to properties already defined, such as the font size and face; an example of inheritance:
<H2 STYLE="text-align: center;
background-color: #FFFF00;
border-style: groove;">
Attention!
</H2>
Attention!You may never use this attribute but it's always good to know it's there. But remember that if you have styles you want to apply through multiple HTML files, create an external style sheet and point to it via the <LINK> tag. There's one further possibility, though. If you want the style definitions you are creating to apply throughout one particular HTML file, you can place these definitions in the <HEAD> of that document, between <STYLE> and </STYLE> tags. To prevent older browsers from trying to interpret the contents of a style declaration, you should enclose the definitions between HTML comments which, in case you'd forgotten, start with an angle bracket, an exclamation mark and two hyphens, and end with two hyphens and a closing angle bracket. In this way you can hide anything that may cause problems for an older browser whilst leaving the code visible to newer browsers. So any style definition you include in a page should be bracketed as follows:
<STYLE type="text/css"> <!--
style definitions go here
--> </STYLE>
This will make your page more 'backwards compatible' that is, older web browsers will not try to display any information bracketed between the <STYLE> tags. The type attribute is compulsory and at the present time you might as well consider "text/css" as the only possible value; the attribute is there as a kind of placeholder for future developments in style technology, but this is beyond the scope of this site. This is a relatively uncommon way of arranging things, however: simply because external style sheets are more powerful. Observe, though, that style definitions in document headers override external style sheets. (This is therefore another stage in the cascade, between external style sheets and styles defined in tags through "normal" attributes or the STYLE attribute.) If you want, on a single page, to supersede a "universal" style defined in an external sheet, this is a convenient way to do it. Remember that you don't have to redefine every style property for every tag, but only the ones you want to change. | ||||||||||||||||||
Material on this site is © Drew Whitworth, 2005 Permission will usually be given to reproduce material from this site for non-commercial purposes, if credit is given. For enquiries, e-mail Drew at andrew [dot] whitworth [at] manchester [dot] ac [dot] uk.