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 -
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 -
