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 -
Friday, 31. July 2009
In this “CSS How To Tutorial”, you will learn the syntax and rules of the Cascading Style Sheet (CSS) language. You will learn the components of CSS rules, including selectors, declarations, properties, and values. You will learn how to style a series of simple HTML elements. You will also learn how to use shorthand properties.
Setting Up the HTML Code
The HTML code for this How To Tutorial will have three main elements the <h1>, <h2> and <p> tags.
<h1> CSS Headings One</h1>
<h2> CSS Heading Two</h2>
<p> Some text about your css tutorial would go here</p>
Creating a Rule Set
A css rule or css rule set, is a statement that tells a browser how to render the elements on an HTML page. A css rule set consists of a selector followed by a declaration block. Inside the declaration block, there can be one or more declarations. Each declaration contains a property and a value.
| selector |
Declaration block |
|
|
|
declaration |
|
declaration |
|
|
Property |
Value |
Property |
Value |
| .body |
{color: |
Red; |
padding: |
5px;} |
The first step in creating a rule set is to decide on a css selector. The selector “selects” the elements on an HTML page that are affected by the css rule set. The selector consists of everything up to the first left curly bracket.
The selectors for this CSS How To Tutorial or H1, H2, and P
The declaration block is the container that consists of everything between (including) the curly brackets. Inside the declaration block, there are one or more declarations. Declarations tell a browser how to draw any element on a page that is selected. A declaration consists of a property and one or more values, separated by a colon. The end of each declaration is indicated with a semicolon.
Setting Up the CSS Code
<style type=”text/css”>
<!–
h1 {text-align: center; }
h2 {font-style: italic; }
p {color: maroon;}
–>
</style>
The property is an aspect of the element that you are choosing to style. There can be only one property within each declaration unless a shorthand property is used.
The value is the exact style you want to set for the property. Values can include length, percentage, color, url, keyword, and shape.
The first rule set will target the <h1> element and align it to the center of the browser window.
The second rule set will target the <h2> element and render it in italics.
The third selector will target the <p> element color all the text found inside the element maroon.
Posted in Understanding CSS by frenchsquared -
