CSS Interview Questions

Margins and padding can be confusing to the novice Web designer. After all, in some ways, they seem like the same thing: white space around an image or object.

Padding is the space inside the border between the border and the actual image or cell contents. In the image, the padding is the yellow area around the contents. Note that padding goes completely around the contents: there is padding on the top, bottom, right and left sides.

Margins are the spaces outside the border, between the border and the other elements next to this object. In the image, the margin is the red area outside the entire object. Note that, like the padding, the margin goes completely around the contents: there are margins on the top, bottom, right, and left sides.

Keep in mind, if you are planning on doing really fancy things with margins and padding, that Internet Explorer doesn't implement the box model correctly. This means that your pages will look different (and sometimes vastly different) in other browsers.

Margins and padding can be confusing to the novice Web designer. After all, in some ways, they seem like the same thing: white space around an image or object.

Padding is the space inside the border between the border and the actual image or cell contents. In the image, the padding is the yellow area around the contents. Note that padding goes completely around the contents: there is padding on the top, bottom, right and left sides.

Margins are the spaces outside the border, between the border and the other elements next to this object. In the image, the margin is the red area outside the entire object. Note that, like the padding, the margin goes completely around the contents: there are margins on the top, bottom, right, and left sides.

Keep in mind, if you are planning on doing really fancy things with margins and padding, that Internet Explorer doesn't implement the box model correctly. This means that your pages will look different (and sometimes vastly different) in other browsers.

You can change the font on your page using CSS. You can change many aspects of the type on your Web pages, including the font size, family, and color. Find out more.

Using CSS, you will have control over additional font attributes like the boldness, variations on the font, and the style of font. Learn more about the font property.

If the user agent viewing your Web page does not have access to the font you have chosen, it will use a different font instead. If you indicate which generic font family you'd like the user agent to use, you can have a little more control over your Web page.

The generic fonts are:

cursive
fantasy
monospace
sans-serif
serif

CSS is written with US English spellings. So if you are writing colour:red; in your style sheets, none of your text will change color.

Make sure that when you write CSS color styles you use the US English spelling for them:

color
background-color
border-color
outline-color

These two style properties do two different things.

visibility: hidden hides the element, but it still takes up space in the layout.

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

You can see the effect of these style properties on this page. I created three identical swatches of code, and then set the display and visibility properties on two so you can see how they look.

While you can use an external style sheet to define the styles for every page on your site, you can't place content in that style sheet to be displayed on every page. CSS is not intended for content, but only for the styles or look-and-feel of your site.

Server Side Includes Can Do the Job

While you can't do it with CSS, there are other tools that you can use to write your website content once and use it in multiple locations. The oldest method is Server Side Includes (SSI) or SHTML. When you use SSI, you write the repeating content in a separate file and then call that file from within your HTML with an SSI directive. But this will only work if your server supports SSI.

Other Includes

If you don't have SSI or just don't want to use it, you can use other methods to include one HTML file in another. Tools like PHP or ColdFusion or ASP or even JavaScript. It's also possible to use a content management system (CMS).

The first thing you should realize is that the id attribute is used for more than just styles. You can use it as an anchor for links to point to as well as uniquely identifying parts of the page for future reference.

But if all you're using the id attribute for is to add styles to one specific element, it might seem to make sense to just add those styles inline rather than bothering with a style sheet. But there are some good reasons to still use external (or internal) style sheets.

IDs Can be Re-Used Across Pages

If you have a standard layout across multiple pages, you might use the id attribute to define certain areas of your page and give them styles with that. If you use inline styles then every time you change the layout, you have to change every page with those styles. If you use an external style sheet, you just need to change it in one place.

IDs Take Up Less Space than Inline Styles

You can have an id that is only one character long. This would add 6 characters to your HTML (e.g. id="a"). But if you tried to add even the simple color to your HTML as an inline style you're adding 11 characters to the HTML. And most styles, especially on ID'd items, are much longer than color: red;. So a page that is marked up with id attributes will load more quickly than one marked up with inline styles.

Ultimately, if you don't care about having well-written and valid HTML, there is no point. But here are some of the reasons I use both:

IDs are more specific than classes
IDs act as anchors for links
IDs provide structure to my code
When I first started writing CSS I didn't use many IDs, but as I grew into it, I started understanding why I might want to use them and found them more valuable. They aren't a critical portion of CSS, and if you choose to leave them out at first, that's fine. But they do serve a purpose, and eventually you will probably come across a situation where they would help you.