Tuesday, September 28, 2010

Introduction The Basics of Cascading Style Sheets (CSS)

Introduction
 Ever heard the term on top? Probably most will answer, "YES!!". If not, now so already.
Cascading Style Sheets (CSS) is a style that determines how components will be displayed in an HTML browser. Cascading Style Sheets (CSS) is not much different from the HTML tags associated with layout and text formatting (Font) color barrier attributes. Style to format text in a single document or multiple documents.
Manager web page format that can be done in three ways:

  • Inline : Styles are embedded right within the HTML code they affect.
  • Internal : Styles are placed within the header information of the web page and then affect all coresponding tags on a single page.
  • External : Style are coded in a sperapate document, whic is then referenced from within the header of the actual web page. This means a single external style sheet can be used to affect the presentation on a whole group of web pages.
You can use any or all of these types of style sheets in a single document. However,if you do include more than one type, the rules of cascading order take over: these rules state that inline rules take precedence over internal styles, which take precedence over external styles. 
In a nutshell, CSS styles apply from general to specific. This means a ruleset in the <head> tag of a document overrides a linked style sheet, while a ruleset in the body of a document overrides one in the <head> tag. In addition, more local (or inline) styles only override the parent attributes where overlap occurs.

Here, i will give examples of how CSS using Inline style.



<!DOCTYPE html PUBLIC "–⁄⁄W3C⁄⁄DTD XHTML 1.1⁄⁄EN" "http:⁄⁄www.w3⁄org⁄TR⁄xhtml11⁄DTD⁄html11.dtd">
<!–– 4tatc.co.cc : inline.html ––>

<!–– using inline styes ––>


<html xmlns="http:⁄⁄www.w3.org⁄1999⁄xhtml">

<head>

<title>CSS Inline Styles>⁄title><⁄head>

<body>

<p>This text doesn’t have any style applied to it...<⁄p>

<!–– The style attribute allows you to declare ––>


<!–– inline styles. Separature multiple styles ––>



<p style="font–size: 18pt⁄>This text has the <em>font–size<⁄em> stye applied to it, making it 18pt.

</p>

<p style="font-size: 18pt; color:#0000FF">
This text has the <em>font-size<⁄em> and <em>color<⁄em> styles applied to it, making it 18pt. and

blue.<⁄p>

<⁄body>
<⁄html>




This text doesn’t have any style applied to it...



This text has the font-size stye applied to it, making it 18pt.

This text has the font-size and color styles applied to it, making it 18pt. and

blue.

No comments:

Post a Comment