<HTML> for Premies II: Cascading Style Sheets03:06 Apr 10 2005
Times Read: 1,699
[ for Premies I | for Mosquitos | for Whelps ]
VampireRave
Premium Members have really got it all. There are some great new features and they can be very overwhelming. My last article dealt with the embedding of music and video files into your VR Profile. This article will cover Cascading Style Sheets, which can be used to spruce up your Profile page.
For our purposes here on VR, a Premium Member has a new section on the Edit Profile page where you can change this tags.
What goes there are descriptions of styles to apply to standard HTML tags and new classes of style to be used. I will not go into creation of new styles, but will instead cover the styles that are already used in VR Profiles. First, I'd like to mention how stuff if defined. If you are familiar with computer programming, the layout will look familiar, but those with only HTML background, or everyone just starting out, this will be different.
The structure of style
Everything belongs inside a pair of Everything inside is comprised of rules. These rules start with a selector, which says which tag or style you want to describe. The rest of the rule is the properties you want to define. The format looks like this:
selector {
property1: value1;
property2: value2;
}
Which, if your list is small and you prefer a more compact version, could also look like this:
selector { property1: value1; property2: value2; }
As you can see a selector is followed by curly braces {} which surround your properties. Each property gives a name followed by a colon (:) and the value you want to set it to, ending with a semi-colon (;). In some samples you may not see the semi-colon at the end. This is only valid if it is the
last property listed. I try to always include a semi-colon so I do not forget it if I add more properties later.
You can list as many or as few properties as you want to. Certain selectors have different needs, but if you do not give a specific property, it will have a default value. This can be the browser's default look for a style, or it could be inherited from a previous definition for a selector, but I'll come back to this.
Something else you may find in CSS are comments. Comments are for a human reader's benefit only, so you can understand what a selector is for, or why a style was chosen, etc. Comments are wrapped inside /* and */ and can be as long as you need. Since anything inside these marks is ignored, you can also disable a property you defined by wrapping it in comments. This is good for tracking down why a style looks the way it does.
A typical example of what you might find is setting the style for an existing HTML layout tag. This allows you to override the settings and ensure that all of the text, images, etc. inside have the same font, color, size, and so on.
Below is the default setting for text that will be placed inside of all
windows on a website at VR. Think of a table as a spreadsheet grid. On VR, these are used everywhere to make the boxes that wrap around menus, ads, and the center column of the page where your Profile is shown.TABLE {
text-align:justify;
color:White;
font-family:Verdana,Arial,Helvetica;
font-size:10pt;
font-weight:normal;
}
All we are defining here in this example are the text and font properties.
text-align:justify; means that the text within a table should be fully justified to stretch from left to right. Other possibilities are left, right, and center.
color:White; controls the color of the text itself, and this can be a name (of which only a few are defined), or a Hex code like #FFFFFF. (You can find out more about colors in for Whelps.)
font-family:Verdana,Arial,Helvetica; lists the names of font choices to use for the text, in order of preference. Remember, everyone does not have the same fonts as you on thier computer. Pick common ones, or if you choose a specific one, list common substitutes after the one you really want. Just remember, if their browser cannot find any of the ones you list, it will pick the default as set on their browser.
font-size:10pt; specifies the size you want the text to be. Point (pt) size is the normal method for this, but there are pre-set values like xx-small, x-small, small, medium, large, x-large, and xx-large. CSS gives extra control by also measuring in pixels (px), inches (in), picas (pc) and beyond! To make it easier on you and other browsers, it's best to stick with point size, of which 10pt or 12pt are good legible sizes.
font-weight:normal; controls the boldness of the font, which in this case will not bold at all. Other possibilities are bold, bolder, and lighter. Of course, the font has to be able to support such weight styles.
Even more could be defined for a table, including background color or graphic to use, the color and thickness of the border trim around the table, and more. But we'll find that we will keep the TABLE selector simple and specify other styles to give more details for how we'll draw them. Menus will be drawn differently than description windows, for example.
The other set of styles that are defined are ones that you create, or ones used on VR. Cancer has done a good job of describing them all, so I won't list each of them. However, I wanted to point out one tricky one. As a user on VR you've surely noticed that all of the lines around the menu tables are red. This color is determined by the .tablewindows style. If you want to change the color of these borders, say to blue for example, you would normally set border-color:blue; for this style.
However, the way Cancer generates the menus, while this would work, it does not change the right border. Some searching on my part revealed that he has all table borders turned off, or "transparent" as CSS sets it. Then he sets the backgrounds or the table contents to black. Yet these are tables inside of tables! What .tablewindows controls is the table underneath these. By setting it's background to red, just the frame of it shows behind the black cells.
So, in order to change these frame borders, you actually need to set the background color (or graphic if you have one). If you look at the Skins that Cancer created, you see he's made five "Premium Skins": Grey, Blue, Red, Purple, Pink. If you look at the Red skin, for example, you will see this:.tablewindows {
background:#800000;
}
Which indeed sets the color of the background to #800000, which a medium-bright red color. If you prefer blue, try:.tablewindows {
background:#000080;
}
If you don't want the frame at all, use this:.tablewindows {
background:transparent;
}
Speaking of backgrounds, if you want to change the background for the whole Profile page, you need to specify that with the BODY selector. What you'll find in there in VR's default are the colors to the scrollbar.BODY {
SCROLLBAR-BASE-COLOR:#C40000;
scrollbar-face-color:#C40000;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-track-color:#000000;
scrollbar-arrow-color:#000000;
}
If you want to specify a solid color background, you could just give the color. By default it is black, but that would be set like this: background: #000000;
However, if you have a graphic that you want to have loaded in the background, from another server somewhere like Photobucket, use this format: background: #000000 url(https://www.vampirerave.com/images/red_back.jpg) repeat fixed;
This sets the BODY to use a black background by default and then try to load the JPEG image to display. (You can use GIF, PNG, or any other web-friendly graphic type.) If it cannot load it, then at least you'll have the black background.
repeat is the default for a graphics background, and it means that if the picture is small it should repeat like a pattern across the screen. You could also specify no-repeat, so it will only show once. Then there's repeat-x and repeat-y which will only repeat across the screen horizontally, or down vertically.
fixed describes tells the background not to scroll with the web page contents. If you want it to scroll (perhaps because it is large or you just want it to roll with the text) then use scroll instead.
Since all of these values modify the background, the semi-colon is used only after setting everything you want.
Almost done! The last common style is applied to the web link tags, which can control the color and style of the hypertext links. For VR you have two groups you can control. The standard links and the menu links:/* These settings control standard links*/
a:link { color: #FC3E20; text-decoration: underline }
a:visited { color: #FC3E20; text-decoration: underline }
a:active { color: #FFFFFF; text-decoration: underline }
a:hover { color: #FFFFFF; text-decoration: underline }
/* These settings control links in the Main Menu and Vampires Menu */
a.menu:link { color: #FFFFFF; text-decoration: none }
a.menu:visited { color: #FFFFFF; text-decoration: none }
a.menu:active { color: #FEC5C0; text-decoration: none }
a.menu:hover { color: #FEC5C0; text-decoration: none }
a:link is the regular link on the page, whereas a.menu:link is the regular link in the menus.
a:visited is a link you clicked on before when visiting VR.
a:active determines any changes you would see while clicking the link, and while the linked page loads.
a:hover is the fun one; it is for when your mouse is over the link, but you haven't clicked it yet. When you move the mouse away it should revert to the settings in a:link.
By default in most browsers, links are underlined. The text-decoration property determines what you want to have. If you set this to none, as it is in the menu links, you won't know it is a link. This is remedied by the fact that the hover color is different. You can see this in action on any of the menus on VR. If you would rather these have underlines, CSS gives you the power to do that. But in addition to these, you can also set it to be overline or line-through. This allows you to have a lot of fun with links on your profile.
Before I wrap up, I'd like to point out that in all cases, these properties are universal. You can set the color, and background color or graphic, and text-decoration for a web link and even plain text. Backgrounds aren't just for tables and the main body of the document. Decoration isn't just for links. Borders aren't just for tables either, and can be around text.
Have fun with your experiments. You might want to start with the different Skins Cancer made and work from there. Play with transparent backgrounds in the tables to allow the words to appear to float right over an image. If you have an animated GIF you can use it for a background.
Just keep in the back of your mind, style sheet implementation is imperfect in most browsers. There is still not a single browser that even fully implements Level 1 of CSS. Some have a couple CSS Level 2 additions, but not all. Do some research if you like for all of the many properties out there. But don't rely on them to be exactly what you want.
Whatever you do, may I gently remind you as always... as with any change to your profile, edit your style sheet work in a text editor and save often. If you make a change that you don't like, you can back up and try again.
Enjoy the Rave,
The Elder Lurker Daniel
REAL VAMPIRES LOVE VAMPIRE RAVE
Vampire Rave is a member of
Page generated in 0.0763 seconds.
COMMENTS
-