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 -
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 -
Saturday, 1. August 2009
Border properties can be converted to the shorthand border property. The <h1> element can be styled with border-width, border-style. and border-color or with a single border property.
Longhand Properties
h1, h2 {
text-align: center;
color: navy;
}
h1 {
border-width: 1px;
border-style: solid;
border-color: gray;
}
h2{
font: italic small-caps bold 100%/120% arial, helvetica, sans-serif;
}
p {
color: maroon;
font: 80% arial, helvetica, sans-serif;
}
Shorthand Border
h1, h2 {
text-align: center;
color: navy;
}
h1 {
border: 1px solid gray;
}
h2{
font: italic small-caps bold 100%/120% arial, helvetica, sans-serif;
}
p {
color: maroon;
font: 80% arial, helvetica, sans-serif;
}
Posted in Understanding CSS by frenchsquared -
