Wednesday, 16. December 2009
When designing a CSS based website it is very useful to understand Margins. I have found that it is much easier to deal with browser compatibility when one uses proper margin styles. Trying to set a top: -10px seems to cause browser issues that can be easily avoided by using margin-top:-10px.
Margins can be applied to the outside of any block level or inline element. They create space between the edge of an element and the edge of any adjacent elements.
Margins can be applied to the individual sides of an element.
p { margin-top: 0px}
p { margin-right: 5px}
h1 { margin-bottom: 3px}
h1 { margin-left: 4px}
Margins can also be used with a single short tag. If one value is set this value will be applied to all sides of the element.
p { margin: 5px}
If two values are set, the first value will be applied to the top and bottom of the element while the second value will be applied to the left and right margins.
p { margin: 10px 5px}
If three values are set the fist value is applied to the top, the second value is applied to the left and right and finally the third value is applied to the bottom.
p { margin: 10px 5px 7px}
If for values are set the first value is applied to the top, the second value is applied to the right, the third value is applied to the bottom and the forth is applied to the left.
Top, Right, Bottom, Left
p { margin:10px 5px 7px 3px}
Posted in CSS Box Model by frenchsquared -
Wednesday, 19. August 2009
Margins can be applied to the outside of any block level or inline element. They create space between the edge of an element and the edge of any adjacent elements.
Margins can be applied to individual sides of a box:
p { margin-top: 0;}
p { margin-right: -5px;}
p { margin-bottom: 10px;}
p { margin-left: 5px;}
Margins can also be applied using a single shorthand property. If one margin value is specified, it is applied to all sides of an element:
p { margin: 5px;}
If two values are specified, the top and bottom margins are set to the first value and the right and left margins are set to the second.
p { margin: 5px 10px;}
If three values are specified, the top is set to the first value, the left and right ar set to the second, and the botton is set to the third.
p { margin: 5px 10px 3px;}
If four values are specified, they apply to the top, right, bottom, and left.
p { margin: 5px 6px 7px 8px;}
It should be noted that you can use negative values for the margin. This can cause the element to overlap another element.
Posted in CSS Box Model by frenchsquared -
Wednesday, 12. August 2009
Some older browsers, such as Netscape Navigator 4 and IE 4, have poor support for CSS. It is possible to hide styles from these browsers using specific media types and @import rules.
All styles will be hidden from Netscape Navigator 4 by changing the link element’s media type from screen to screen, projection. Netscape Navigator 4 does not support multiple media types.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>CSS, How to hide content</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen, projection”>
</head>
<body>
</body>
</html>
The remaing styles will be hidden from IE 4 and several other older browsers by moving the <p> element rule set out of the original style sheet and into the imported style sheet. IE 4 can not read imported files.
@ import “advanced.css”;
//Code inside advanced.css
p {
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: gray;
}
All modern browsers will read the multiple media type screen. projection. as well as the imported style, so they will display the fully styled <p> element.
Header styles can also be hidden from older browsers by enclosing the contents of the styled element inside a comment.
<style type=”text/css” media=”screen”>
<!–
p {
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: gray;
}
–>
</style>
Posted in CSS Applying Styles by frenchsquared -
Monday, 10. August 2009
CSS, Inline styles can be applied directly to elements in the HTML code using the style attribute. However, inline styles should be avoided wherever possible because the styles are added to the HTML markup. This defeats the main purpose of CSS, which is to apply the same styles to as many pages as possible across your website using external style sheets. Styles that are applied inline can cause additional maintenance across a website because multiple pages might need changing rather then one CSS file.
<p style=”font-family: arial, helvetica, sans-serif; margine: 1em; padding 1em; background-color: gray; width: 10em;”>Lorem ipsum color sit amet, consectuer adipiscing elit…</p>
Posted in CSS Applying Styles by frenchsquared -
