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 -
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 -
Sunday, 23. August 2009
The background-color property sets the background color of an element.
The backgound-image property applies a background image to an element, which will appear on top of any background-color.
body {
background-color:#000
}
h1 {
background-image:url(header.png);
}
Posted in CSS Adding Background Images 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 -
Thursday, 6. August 2009
Child selectors
Child selectors are used to selected an element that is a direct child of another elements parent. Child selectors will not selected all descendants, only direct children. For example, you might want to target an <em> that is a direct child of a <div>, but not other <em> elements that are descendants of the <div>
*Child selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.
div > em {
color: blue;
}
Adjacent sibling selectors
Adjacent sibling selectors will select the sibling immediately following an element. For example, you might want to target an <h3> element, but only <h3> elements that immediatly follow an <h2> element. This is a commonly used example because it has a real-world application. There is often to much space between <h2> and <h3> elements when they appear immediately after each other.
*Adjacent selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.
h2 + h3 {
margin: -1em;
}
Attribute selectors
Attribute selectors are used to select elements based on their attributes or attribute value. For example, you might want to select any image on an HTML page that is called “small.gif”
*Attribute selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.
img[src="small.gif"] {
border: 1px solid #000
}
Pseudo-elements
Pseudo-elements enable you to style information that is not available in the document tree. For instance, using standard selectors, there is not a way to style the first letter or first line of an element’s content. However, the content can be styled using pseudo-elements.
*Pseudo-elements selectors are not supported by IE 5, 5.5 or 6, but are supported by most other browsers.
p:first-line {
font-weight: bold;
}
p:first-letter {
font-size: 200%;
font-weight: bold;
}
Pseudo-classes
Pseudo-classes enable you to format items that are not in the document tree. They include :first-child, :link, :visited, :hover, :active, :focus, and :lang(n). Pseudo-classes will be covered in later posts.
Posted in CSS Selectors by frenchsquared -
Wednesday, 5. August 2009
Should you use id or class? Classes can be used as many times as needed within a document. IDs can only be applied once within a document. If you need to use the same selector more then once, classes are a better choice.
However, IDs have more weight then classes. If a class selector and ID selector apply the same property to one element, the ID selector’s value would be chosen.
Posted in Understanding CSS by frenchsquared -
Tuesday, 4. August 2009
Selectors are one of the most important aspects of CSS because they are used to “select” elements on an HTML page so the can be styled.
Sample HTML
<body>
<div id=”content”>
<h1> Heading Here </h1>
<p> Lorem ipsum dolor sit amet. </p>
<p>Lorem ipsum dolor <a href=”#”>sit</a> amet.</p>
<div>
<div id=”nav”>
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
</ul>
</div>
<div id=”footer”>
Lorem ipsum dolor <a href=”#”>sit</a> amet.
</div>
</body>
CSS Type Selectors
Type selectors will select any HTML element on a page that matches the selector. In the HTML shown above there are seven HTML elements that could be used as type selectors, includeing <body<, <div>, <h1>, <p>, <ul>, <li> and <a>. For example to select all the <li> elements on the page, the <li> selected is used.
li {
color: blue
}
CSS Class Selectors
Class selectors can be used to select any HTML element that has been given a class attribute. In the HTML sample shown above there are two HTML elements with class attributes <p> and < href =”#”>. To select all instances of the intro class, the .intro selector is used.
.intro {
font-weight: bold
}
You also can select specific instances of a class by combining type and class selectors. For example, you might want to select the <p> and the <a href=”#”> seperatly. This is done using p.intro and a.intro.
p.intro {
color: red;
}
a.intro {
color: blue;
}
ID Selectors
ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute. However, each ID can be used only once within a document, whereas classes can be used as often as needed. In this CSS, How To Tutorial IDs are used to identify unique parts of the document structure. such as the content, navigation and/or footer. In the HTML sample shown above, there are three IDs: <div id=”content”>, <div id=”nav”>, <div id=”footer”>. To select <div id=”nav”>, the #nav selector is used.
#nav {
color: blue;
}
Posted in CSS Selectors by frenchsquared -
