Style sheet syntax is fairly simple: the name of the HTML tag you wish to modify, a space, an opening curly bracket, and then a list of modifiers and a closing curly bracket.
The modifiers themselves are a name, a colon, and then a value, followed by a semicolon.
tagname {
modifiername: value;
}
You can have as many tag names and modifier names as you want. If two modifiers conflict with each other, the last modifier takes precedence. For example, if you set all margins to 10%, and then set margin-left to 20% later, the left margin will be 20% and the rest of the margins will be 10%. But if you do it in the reverse order: first specify the margin-left and then specify all margins, then all margins will be 10%.
The last modifier you specify is the one that takes effect.
Let’s say that you want all of your headlines to have an indented border on the top and bottom. You can specify multiple tag names in for your style sheet definition by separating them with commas.
Add the following definition below the body definition that we already have:
h1, h2 {
border-top-style: inset;
border-bottom-style: inset;
border-width: .15em;
border-color: orange;
color: brown;
}
This changes the appearance of all of our h1 and our h2 tags. They get a border on the top and bottom, and their color changes to brown.
- Measurements
- The most common measurements used with style sheets are the percentage and the em-width, which we’ve already seen, and the pixel (px) and point (pt) which we haven’t. You should be very careful using static measurements such as pixels, points, and picas. They do not adjust themselves to the browser.
- Basic CSS syntax: Classes
- Often you will want to differentiate between two different classes of the same tag. You might, for example, want to have the paragraph that displays the author of this review display differently than the rest of the paragraphs.
- Font families
- Fonts are often unavailable on the computer of the person reading your web page. For this reason, CSS allows you to specify multiple fonts, and to specify generic font types. The first font that matches an available font is used by the browser.
- Contained by
- You have a number of ways of focussing in on specific tags. One of the most common is to try to affect only tags that are contained in other tags. For example, you might have a specific table class, and want to affect the header cells in that table.
Related Pages
