Tips
Group Your Margin Attributes
This code works in IE 3.02 and 4.0. When using Style Sheets, you can set margins for the entire document in the BODY section. The margin-left, margin-right, and margin-top attributes set the side margins and top margin. You can specify the margins in points, inches, centimeters, or pixels in positive and negative numbers. For example:
BODY {
margin-left: -10px;
margin-right: -10px;
margin-top: 20px}
However, instead of setting the margin attributes separately, you can combine them into one attribute called margin. Instead of the code above, you can simply use:
P {
margin: 20px -10px-10px}
The implied order for margin is top, right, and left. If you specify a single value, it will be applied to all three margins.
Graphic List Bullets
You've wanted to do this for years.
You want a list, but you don't want it numbered.
You don't want regular bullets, either.
You want a custom graphic bullet.
In short, you want a list just like the one described above. Before CSS 2, you had to build a table. Now it's so easy you'll laugh. Just put this in your style sheet:
ul {
list-style-image: url("example.gif");}
And replace example.gif with the pathname to the image that you want to use.
Link Color
If you want to make a link a different color than the other links on you page, use this:
Link
Mouse over Link Color
Use this if you want your links to change color when someone puts their mouse over them.
Works in IE4 & IE5 only!
Link
Remove line under links
Want to remove the line under certain links? Use this:
Link
If you want to remove the lines under every link use this:
Headlines
Want to make a special headline for your page with out using big, slow images? Try this:
  Â
  Â
      Â
ARCHIVE
       Zach's
  Â
Text Drop Shadow
Want to make a Text drop shadow but you don't want to use a large slow image? Try this:
  Â
  Â
      Â
Zach
       Zach
  Â
Centered Tables
[Thanks to Ian Hickson for giving me the solution for this one.]
You've put this into your style sheet:
.centered {text-align: center;}
And this HTML:
Test of Centering
Table of cities and states
Pekin Illinois
San Jose California
Here's what you get:
Test of CenteringTable of cities and states Pekin
Illinois
San Jose
California
Aha? you think. ?My shiny new browser is broken.? No, it isn't. It's working exactly as CSS level two says it should. Section 16.2 of the specification says that text-align describes how inline content of a block is aligned. If you look at the Document Type Definition (DTD) for HTML, you will discover that tables are not inline elements. Here's how you fix the problem. Add this to your style sheet:
.centered-table {margin-left: auto;margin-right: auto;}
Setting the margin-width to auto makes the browser calculate the margins according to the formula in section 10.3.3 of the specification. In this case, it makes the left and right margins equal, thus centering the table. Your HTML now changes to this:
Test of Centering
Table of cities and states
Pekin Illinois
San Jose California
And you get the desired result:
Test of CenteringTable of cities and states Pekin
Illinois
San Jose
California
Indented paragraphs
Here is something simple: indenting the first line of each paragraph. Many people find that easier to read than empty lines between the paragraphs, especially for long texts, and it also allows to reserve empty lines for more important breaks. The trick here is to only indent paragraphs that follow other paragraphs. The first paragraph of a page doesn't need to be indented, and neither do paragraphs that follow a diagram, a heading or something else that is offset from the text. The rule is in fact very simple:
p + p {text-indent: 1.5em;margin-top : 0;}
This indents the first line of only those paragraphs that follow another paragraph. But in practice you will find that you still need exceptions.In this page, for example, there are P elements that are used as captions for images (see the example above). We have centered them, and thus they should not be indented. A simple rule
p.caption {text-indent: 0;}
takes care of it. You can see that we indeed used that rule in the example.We can now use various amounts of whitespace between paragraphs to indicate important breaks in the text. Let's define three different classes: stb (small thematic break), mtb (medium thematic break) and ltb (large thematic break). We have given this paragraph a class of stb, so you can see the effect.
p.stb {text-indent: 0;margin-top: 0.83em}p.mtb {text-indent: 0;margin-top: 2.17em}p.ltb {text-indent: 0;margin-top: 3.08em}
A pinned-down menu
The menu you see in the top right corner of this page is simply a DIV with some A elements inside. All the work to make it stay fixed in its place is done by rules in the style sheet. Here is the mark-up:
ActivitiesTech.?reportsTranslationsSoftwareSite indexSearchNearby:StyleCSStips?&?tricks
In a browser without CSS, or with CSS turned off, it will just be a normal paragraph with links. But thanks to the rules below, it will appear to "float" on top of the page, pinned to the upper right of the browser window:
div.banner { margin: 0; font-size: 80%; [*smaller*] font-weight: bold; line-height: 1.1;
text-align: center; position: absolute;[*Fallback if 'fixed' is not supported*] position: fixed;
top: 2em;
left: auto;
width: 8.5em;
right: 2em;}div.banner p { margin: 0;
padding: 0.3em 0.4em;
font-family: Arial, sans-serif;
background: #900;
border: thin outset #900;
color: white;}div.banner a, div.banner em {
display: block;
margin: 0 0.5em;}div.banner a, div.banner em {
border-top: 2px groove #900;}div.banner a:first-child {
border-top: none;}div.banner em {
color: ##CFC;}div.banner a:link {
text-decoration: none;
color: white;}div.banner a:visited {
text-decoration: none;
color: #CCC;}div.banner a:hover {
background: black;
color: white;}
The interesting rules here are the 'position: fixed', that makes the DIV stay fixed on the screen, and the 'display: block', that makes the A elements inside the DIV into block elements, and thus displayed below each other, rather than all on one line. Be careful with the order of the last three rules. They all have the same specificity, so the last one that applies determines the color. If the mouse hovers over the link, we want :hover to apply, so it has to be last. The rest, the margins, borders, colors, etc. can be removed or changed according to personal taste. Note, however, how we did the rules between the links: there are borders above all links, except the first, thanks to the rule with ':first-child'. A pair of rules like this (border-top on all elements plus a border 'none' on the first child) is very convenient for creating borders between elements. If you look at the actual style sheets that are linked from this page, banner-o.css and banner.css, you will see some additional rules that appear to contradict each other. Those are there to protect against bugs in a few older browsers. In particular, in banner-o.css, the banner is hidden and in banner.css it is displayed as a block. This has the effect of hiding the banner from Netscape 4, because it skips the @import of banner.css. In banner.css, there is also a rule that makes the banner 'absolute' followed immediately by one that makes it 'fixed'; This is to make the banner absolutely positioned in Netscape 6, which doesn't implement fixed positioning.)
Un-colored
scrollbars in Some browsers (IE, Konqueror) have recently started supporting the non-standard properties 'scrollbar-shadow-color', 'scrollbar-track-color' and others. These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-"). But luckily you can easily disable them. To make sure the scrollbars of your browser keep their normal colors, you use the user style sheet and the '!important' declaration. The user style sheet can usually be configured via the options/settings menu of the browser. In IE you find it under the "Accessibility" tab, in Konqueror under the "Stylesheets" tab.
If you don't have a user style sheet yet, start by creating a new CSS file. You can put it anywhere.
Add the following lines to this style sheet file:
body, html { scrollbar-face-color: ThreeDFace !important; scrollbar-shadow-color: ThreeDDarkShadow !important; scrollbar-highlight-color: ThreeDHighlight !important; scrollbar-3dlight-color: ThreeDLightShadow !important; scrollbar-darkshadow-color: ThreeDDarkShadow !important; scrollbar-track-color: Scrollbar !important; scrollbar-arrow-color: ButtonText !important;}
Enter the path to this file in the corresponding dialog box of your browser.
Box Drop shadows
CSS2 doesn't have a property to add a shadow to a box. You can try to add a border to the right and bottom, but it won't look right. However, if you have two nested elements, you can use the outer one as a shadow for the inner one. For example, if you have a text like this (HTML):
Die Rose duftet - doch ob sie empfindet
Heinrich Heine (1797-1856)
Die Rose duftet - doch ob sie empfindet
...
you can use the outer DIV as a shadow for the inner one. The result might look like this separate page. First, give the BODY a background (light green in this example), the outer DIV a somewhat darker background (green-gray) and the inner DIV another background (e.g., yellow-white):
body {background: #9db}div.back {
background: #576;}div.section {{
background: #ffd;}
Next, by using margins and padding, you offset the inner DIV a little to the left and up from the outer DIV:
div.back {padding: 1.5em}div.section {
You also have to move the outer DIV a little to the right. And if you have multiple sections, you probably want some space between them, too:
div.back {
margin: 3em 0 3em 5em}
That's basically it. You can add a border around the inner DIV if you want. You'll probably also want some padding inside it, e.g.:
div.section {
border: thin solid #999;
padding: 1.5em;}
Of course, you can vary the size of the shadow to your taste.
ID's
With the id attribute you can define a unique style that you can use with many elements. You must have "#" before the name of your ID in your CSS file. For example:
#fontcolor1{
color: #FF0000}now in your HTML coding you would put
The font color will be the colorspecified in the fontcolor1 class.
The font color will be the colorspecified in the fontcolor1 class.
Classes
A selector can have different classes, allowing the same element to have different styles. For example:
.color1{
color: #000000}
now in your HTML coding you would put
The font color will be the colorspecified in the color1 class.
Embedding a CSS
Embedding a cascading style sheet is pretty easy, just follow the examples below and you should be fine.
Make sure the coding is between the tag.
Selectors
Any HTML tag is a possible CSS selector. The selectoris simply the element that is linked to a particular style. For example, the selector in
H1 {
color: #000000}
would be H1.
Grouping Selectors
You can also group selectors like this
H1, H2, H3, H4, H5{color: #000000}
now H1, H2, H3, H4, and H5 will all have the same font color.
External Style Sheet
With an external style sheet you can change the look of your site by changing one file.
The file should not contain any html tags. An external style sheet can be written in any text editor. Your style sheet should be saved with a .css extension. Between the tag you will put the link code. Example:
  Â
Boxes boxes!
Just like with the fonts above, we can cram a load of box properties into single rules to make life easier.
.someclass {
margin: 5px;}
Note that apart from px you can also use any other form of css measure (em, % etc). The above rule will give your element a 5px margin on each of its four sides. Different lengths can be applied to each side of the element by using the following format.
.someclass {
padding: 10% 3% 12% 5%}
The specification order is: TOP - RIGHT - BOTTOM - LEFT. Note that you can even give different sides different measurement units if you want. e.g.: you could do the top and bottom in px and the left and right in em if you like. Additionally, you can set the top/bottom and left/right margins at the same time. The rule below specifies that the top and bottom margins are 20px while the left and right margins are 10px.
.someclass {
margin: 20px 10px}
This shorthand replaces the margin-top, margin-bottom, margin-left, margin-right (or padding-* as appropriate) properties.
Borders
Similar to the font shorthand above, the border shorthand condenses all of the border properties into one.
.bigbox {
border-width: 2px;
border-style: solid;
border-color: #f00;}
The above rule can be replaced by:
.bigbox {
border: 2px solid #f00}
Forms
Internet Explorer and various other browsers have a habit of introducing a line break whenever you open or close a
. Happily enough you can control this by using the CSS margin property. The css rule looks like this:
form {margin: 0px;}
The bit just below shows this rule in action. The form is opened directly underneath the header text and closed right after the submit button (i.e.. everything in the gray box).
Search Engines
Some search engines take outbound links into account when they rank your page. For example, linking to a well-known page about root beer and including the words "root beer" in the link text could boost your ranking for those words. Occasionally, it would be nice to get this advantage without encouraging visitors to leave the site. The solution is to use a bit of CSS to hide the link from human visitors. Because search engines don't see what is happening on the screen, they can't differentiate the hidden link from the normal links on your page. Simply include the following in an external CSS file:
A.sample {
text-decoration: none;
color: black;
cursor: text;}
This removes the underline from the link and changes its color to black. Should the browser support CSS2, it will also prevent the cursor from turning into a hand when it is located above the link. Then use the following in your HTML:
link text
The oldest trick in the book is to place keyword-rich text on a page and then hide it from humans. In the past, this was usually done by using the same color for the background and the text. However, search engines have figured this trick out long ago, so hiding text with HTML tags is definitely out of question. CSS makes it possible to add several new twists to the old trick. This trick is best used in combination with HTML. First, define for example a black background color, red text color and a background image in the HTML of the page:
Of course, example.gif should be nothing more than a fully white image. So, most visitors would see red text on a white background, while those with background images turned off would see red text on a black background. Now, let's suppose you were to create a CSS class that turns the text color to white:
.adjust { color: white }Because the background image is white, a paragraph such as
blah blah blah
would be extremely hard to spot. Basically, this trick works exactly in the same way as the classic HTML "invisible text" trick did. However, because CSS has been added to the mix, search engine robots won't be able to notice it as easily. But why are we setting the background color to black in the HTML? Well, we're simply placing a safeguard just in case we happen to encounter a very intelligent spider. Comparing the HTML background color statement with the text color defined in CSS is hard for spiders, but not impossible. On the other hand, comparing the color of the background image with the CSS-defined text color is much, much harder.
|
