General Syntax

Why isn’t part of my CSS syntax working?

• Colons: are any missing or accidentally a semicolon?
• Semi-colons: are any missing or accidentally a colon?
• Words: are any mispelled? Are you using the correct term?
• Values: are the values complete? For example: use 12px… not “12” or “px”.
• Tags don’t exist: are you trying to use tags that don‘t exist and aren’t recognized by the browser? For example: p2 and h7 are not valid tags and will not work!
• Properties listed twice: Make sure properties are not listed twice. For example: font-style:normal; and font-style:italic; listed in the same element.

None of my CSS is working! The content looks like I’m not even using CSS!

• Name: is the name of the CSS file the same as the name you’ve written in the syntax?
• Case: if the name *is* the same, do the cases match? For example: if the file is called “alignment.css” but in the syntax you’ve written “Alignment.css” the CSS will not work. Browers do not recognize “a” and “A” as the same character.
• Spelling: if the name *is* the same, are there any transposed letters or mispelled words?
• Spaces: are there any spaces in the name of the file or in the syntax? If so, remove them in both places.
• Folder: is the CSS file in the same folder as the HTML file? Unless you know how to link to a CSS file in another folder… keep them together!

I copied and pasted some syntax from a pdf or word file into my HTML file, and it doesn’t work.

• Curly Quotes: does the syntax include quotation marks? If so, go back and make sure they are NOT curly quotes in the HTML file. Browsers only read “dumb” quotes for elements, links, etc.

Color

My color isn’t working.

• Did you use a pound (#) sign before the binhex number?
• Are all 6 characters there?
• Did you use the colon and semicolon correctly?

divs

My div is the wrong width.

• Added space: Did you add padding or margin left or right? If so, you’ll need to remove the same amount from the overall width.
• Removed space: Did you remove padding or margin left or right? If so, you’ll need to add the same amount to the overall width.
• Borders: Did you add or remove borders? If so, you‘ll need to add or remove the same amount to/from the overall width.

I can only get my divs in the right place if I use negative (-) margins!

• Float: One of your divs probably does not have a “float:xxxxxx;” set.

I put in a row of divs, but one keeps bumping down.

• Check the total (width) measurement of the divs: the left/right margins, the left/right padding, and the left/right borders is probably greater than the width of your main_container. If the divs can’t fit, one will bump down.

I can’t even figure out what is wrong with my divs.

• Divs are hard to see if they don’t have a background color. Add a background color. I prefer a background color, because it won’t add to the width of your divs. Refresh your browser.
• Write a statement of what is wrong. Don’t worry about syntax, just write what you see. For example: One div is too big, the other div is too small, two divs look like they are overlapped, and another div is bumped down to the next line.
• Once you’ve identified what is wrong, you can start problem solving one div at a time. Start from the top left corner. Don’t try to fix everything at once, it will get tangled up like a knotted shoelace!

How do I crop something in a div? For example, I want some type cropped in a div, but it overflows into the main_container.

You want to hide the overflow.

• In the CSS add the line overflow:hidden; to the div the overflow is flowing into (in this case the main_container div).

Type

Why is my type bold? I didn’t make it bold.

• Heading tag: are you using an heading tag? Headings have a default bold. You need to specify weight:normal;.
• Classes: are you using a class to modify text that was bold? For example: your p is set to bold, but your p.author is not. If the original tag was set to bold, you need to “turn it off” in the classes associated with that tag. You need to specify weight:normal;.

I’ve run out of heading tags. Now what do I do?

First of all, you probably shouldn’t need more than 6 levels of hierarchy plus the p tag.

• Look for similarities: are you using heading tags for text that is almost identical (with only a change in spacing or color?).
• Create classes: decide which text will use the tag, and which will use a class associated with the tag. For example, maybe you use h2 to chunk your text, but when an h2 comes after a list it needs a little bit more space above it. Don’t make an h3. Instead make a class (h2.after_list).

Why isn’t my @font-face font working?

99% of the time, it is one of these problems:

• misspellings or transposed letters in the syntax
• missing colons or semicolons
• Font-family names don’t match: the @font-face font-family should match the font-family for the tag. For example, if you call the @font-face font-family ‘BeautifulESRegular’, and you want your h1 to be BeautifulESRegular, than the h1 font-family should also be called ‘BeautifulESRegular’
• Fonts are buried in a folder. All font files should be in the same folder as the CSS file. NOT in a folder inside the same folder as the CSS file!

What is the difference between italic and oblique, and which should I use in CSS?

• Oblique is another word for italic, and it refers to italic sans serif letters. CSS only recognizes italic, so use font-style: italic;

I’ve set my text bold, why isn’t it working?

• Make sure you are using font-weight:bold; (A common error is to type in font-style:bold;)

I’ve set my text as small caps. Why aren’t they working?

• Small Caps should work, but browser support for small caps can be spotty. My recommendation: use text-transform:uppercase; This will create all caps. If you want them smaller, reduce the font-size by a pixel or two.

Google Web Fonts is easy to use. Why bother learning how to use the @font-face syntax?

• If you understand how font-linking works, you aren’t limited to the fonts on Google Web Fonts (or any service provider). You can purchase web font licenses and link to them.
• Understanding how font-linking works takes the mystery out of how many web font service providers work.

Space

I’m using DreamWeaver. Why is there more space between elements in my browser than there is when I view them in DreamWeaver?

• Default margins and padding: you are probably using one or more default margins or default padding. That is, you haven’t specified margins or padding for at least one element. DreamWeaver’s default margins and padding are different from your browser’s default margins and padding.
• To get rid of this problem, set all of your margins and padding to 0 (using the universal selector) and then set specific margins and padding as needed.

Why am I having trouble getting the spacing between my headings and text to look just the way I want it?

• Again, it’s probably default margins and padding. You are probably using one or more default margins or default padding. That is, you haven’t specified margins or padding for at least one element, so the spacing is different from what you want. In addition, default margins and padding look slightly different across browsers.
• To get rid of this problem, set all of your margins and padding to 0 (using the universal selector) and then set specific margins and padding as needed.