Wednesday, 3. February 2010
Padding can be applied to the outside edges of the content are of any block level or inline element. Padding creates the space between the edge of the element and its content.
Like margins, padding can be applied to individual sides of a box:
p {padding: 10px;}
h1{padding-top: 0px;}
h2{padding-right: 0px;}
h3{padding-left: 0px;}
h4{padding-bottom: 0px;}
Padding can also be applied using a single shorthand property. If one padding value is specified, it applies to all sieds of an element.
p {padding: 5px;}
If two values are specified, the top and bottom margines are set to the first value and the right and left margins are set to the second value.
p {padding: 5px 10px;}
If three values are specified, the top is set to the first value, the left and right to the second value and the bottom is set to the third value.
p {padding:5px 10px 0px}
If four values are specified, they apply to the top, right, bottom and left.
p {padding:5px 10px 3px 20px}
Posted in CSS Box Model by frenchsquared -
Saturday, 3. October 2009
The content are of a box can be given width, height, and color. Width and height can be specified in points (equal to 1/72 of an inch), picas (equal to 12 points), pixels, ems, exes, millimeters, centimeters, inches, or percents.
p { width: 100pt ;}
p { width: 20pc;}
p { width: 300px;}
p { width: 40em;}
p { width: 50ex;}
p { width: 600mm;}
p { width: 8in;}
p { width: 50%;}
The color property can be used to style the text color. Color can be specified in a number of ways, including keywords, hexadecimal, and RGB.
Keywords for color included: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Although some other words may work in some browsers, they are not part of the specification and should not be used.
Hexadecimal colors can be specified using only three or six hexadecimal characters. When a color has three pairs of hexadecimal digits (such as #ff0000), it can be shortened by removing one digit from each pair (#f00). RGB colors can be specified using three comma-separated integers or percent values. For example, the color red can be specified using either rgb(255, 0, 0) or rgb(100%, 0%, 0%).
p {color: red }
p {color: #f00 }
p {color: #ff000}
p {color: rgb(255,0,0)}
p {color: rgb(100%, 0%, 0%)}
Posted in CSS Box Model by frenchsquared -
Wednesday, 26. August 2009
The border properties specify the width, color and style of the border of an element. Shorthand border properties include border-top, border-bottom, border-right, border-left and border.
p {
border-top:
1px solid red}
p {
border-right:
2px solid blue}
p {
border-bottom:
1px solid red}
p {
border-top:
2px solid black}
h1 {border: 1px solid black}
Posted in CSS Box Model by frenchsquared -
Monday, 24. August 2009
Padding can be applied to the outside edges of the content area of any block level or inline element. Padding creates the space between the edge of the element and its content.
Like margins, padding can be applied to individual sides of a box.
p {padding: 10px}
h1 {padding-top:0px}
h2 {padding-right:5px}
h2 {padding-bottom:7px}
h3 {padding-left:10px}
Padding can alse be applied using a single shorthand property. If one padding value is specified, it applies to all sides of an element:
p {padding:5px}
If two values are specified, the top and bottom margins are set to the first value and the right margins are set to the second:
p {padding: 5px 0}
If three values are specified, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third:
p {padding: 10px 0 20px}
If four values are specified, they apply to the top, right, bottom, and left:
p {padding 5px 0px 7px 15px}
Posted in CSS Block Quote by frenchsquared -
Saturday, 15. August 2009
Setting the Box Width
The width of an element is applied to the content area. Other measurements such as padding, border and margins are added to this width.
For example, if an element is specified with width: 200px; the content area is 200px wide. If padding, boder, or margin are applied to the same element, their measurements are added to the overall width.
However, this method does not applie to IE 5 or 6, but who really cares. Anyone using IE 6 needs to upgrade.
Posted in CSS Box Model by frenchsquared -
Friday, 14. August 2009
Block level elements are normally displayed as blocks with line breaks before and after. Examples of block level elements include paragraphs, headings, divs and block quotes.
Inline elements are not displayed as blocks. The content is displayed in lines and there are no line breaks before and after. Examples of inline elements include emphasized text, strong text, and links.
All block level and inline elements are boxes that use the box model. Both types of elements can be styled with box model properties such as margin, background-color, padding, and border.
Some box model properties, such as height and width, do not apply to inline elements. Also, margin and padding applied to an inline element will affect the content on either side, but not the content above or below.
My next few posts will cover this concept in more detail…
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 -
Tuesday, 11. August 2009
The third method of applying styles to document involves linking to external style sheets. External style sheets are the most appropriate method for styling documents. If styles need to be changes, the modifications can take place in one CSS file rather than all HTML pages.
To change the header style to an external style, move the rule set to a new CSS file. That means copy the code to a new filed called something like style.css
@charset “UTF-8″;
/* CSS Document */
body {background-color: grey;}
p {
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: white;
width: 10em;
}
Next you have to link your HTML page to your CSS.
<!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>Untitled Document</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen”>
</head>
<body>
</body>
</html>
That is all the code required. Now you simply add the style sheet link in all of your html pages and you can control your entire site from on style sheet.
Posted in CSS Applying Styles by frenchsquared -
Tuesday, 11. August 2009
Header styles also can be used to style the <p> element. The CSS rules can be placed in the head of the document using the style element. Like inline styles, header styles, header styles should be avoided where possible because the styles are added to the HTML markup rather than in external CSS files.
There are cases where header styles might be the preferred option in specific instances, such as a CSS rule that is specific to one page within a large website. Rather than add this rule to an overall CSS file, a header style may be used.
The type=”text/css” attribute must be specified within the style element in order for browsers to recognize the file type.
<title>CSS Tutorial</title>
<style type=”test/css” media=”screen”>
p {
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: gray;
width: 10em;
}
</style>
</head>
Posted in CSS Applying Styles by frenchsquared -
Thursday, 6. August 2009
Universal selectors are used to select any element. For example , to set the margins and padding on every element to 0, * can be used.
*{
margin: 0;
padding: 0;
}
Universal selectors also can be used to select all elements within another elements. The code below will select any element inside the <p> element.
p * {
color: red;
}
Posted in CSS Selectors by frenchsquared -
