Open main menu

Changes

Understanding Cascading Style Sheets (CSS)

6 bytes added, 18:15, 15 April 2009
no edit summary
In the early days of the world wide web all we had to create content on web pages was HTML. HTML does some things very well, but does not provide a great deal of control over style of web page content. Furthermore, what control it does give us has to be embedded into the content. Essentially this meant that style was not separated from content. If we wanted to change the overall look and feel of a web site we had to edit each individual web page and change the style settings.
Cascading Style Sheets allows allow us to specify the style of the content in a separate file which can be changed such that modifications are reflected in all pages that include that style sheet.
With the introduction of CSS it is now possible to define the document structure and content in HTML, while controlling the style and appearance using CSS.
Whilst it is possible to include all your CSS styles by embedding them into each HTML page this, to a certain degree, defeats one of the main objectives of CSS. It is much better to place the styles in a separate CSS file and import that file into each web page. This means that a change to the overall style only needs to be made to the external file in order for the change to take effect in all pages that include it.
First, we can create our external CSS file. This is the same concept as outlined for embedding the styles into an HTML file, except the <scriptstyle> tags are not required. For example we can create CSS filed myStyle.css as follows:
<pre>
== Creating CSS Rules ==
Each element of a style sheet is known as a ''rule''. To create a rule , simply specify the HTML tag that is to be modified by the style (such as the &lt;H1&gt; tag in the above example), followed by a list of properties and settings contained in braces.
For example to change the font style setting of the &lt;p&gt; tag simply write the following rule:
</pre>
and Further, it is also common to apply a single rule to multiple HTML tags by comma separating them:
<pre>
== Setting Styles for Individual Elements ==
To set the style for an individual HTML element in a web page , simply include the style rule inside the HTML tag. The following HTML tag specifies a color rule for just the current &lt;P&gt; tag:
<pre>
</pre>
Any HTML tag in whcih which we reference the class ''intotext'' will inherit those style settings.
== Summary ==