Homework SourseList and describe the levels of cascading style sheets CSSSo
List and describe the levels of cascading style sheets (CSS).
Solution
>Cascading style sheet (CSS)
A cascading style sheet (CSS) is a Web page derived from multiple sources with a defined order of precedence where the definitions of any style element conflict. The Cascading Style Sheet, level 1 (CSS1) recommendation from the World Wide Web Consortium (W3C), which is implemented in the latest versions of the Netscape and Microsoft Web browsers, specifies the possible style sheets or statements that may determine how a given element is presented in a Web page
There are three types of stylesheets:
1.Internal - Placed right on the page whose interface it will affect.
2.External - Placed in a separate file.
3.Inline - Placed inside a tag it will affect.
>Creating an internal stylesheet
Use an internal stylesheet when you want an HTML document to have a unique style. An internal stylesheet is defined using the <style> tag and goes in the head section of an HTML document.
The <style> tag specifies the content type of a stylesheet with its type attribute which should be set to \"text/css\"
Syntax:
<style type=\"text/css\">
styles go here
</style>
Example:
<html>
<head>
<style type=\"text/css\">
<!--
p {color: red;}
-->
</style>
</head>
<body>
<p>
The text in this paragraph will be red.
</p>
</body>
</html>
>Creating an external stylesheet
Use an external stylesheet when you want to apply one style to many pages. If you make one change in an external stylesheet, the change is universal on all the pages where the stylesheet is used.
An external stylesheet is declared in an external file with a .css extension. It is called by pages whose interface it will affect. External stylesheets are called using the <link> tag which should be placed in the head section of an HTML document. This tag takes three attributes.
Attributes of the <link> tag:
rel - When using an external stylesheet on a webpage, this attribute takes the value \"stylesheet\"
type - When using an external stylesheet on a webpage, this attribute takes the value \"text/css\"
href - Denotes the name and location of the external stylesheet to be used.
Example:
<html>
<head>
<link rel=\"stylesheet\" type=\"text/css\" href=\"style1.css\" />
</head>
<body>
<p>
The text in this paragraph will be blue.
</p>
</body>
</html>
>Creating an inline stylesheet
Use inline stylesheets when you want to apply a style to a single occurence of an element.
Inline stylesheets are declared within individual tags and affect those tags only. Inline stylesheets are declared with the style attribute.
Example:
<p style=\"color:pink\">This text will be pink.</p>
we are using the stylesheet command color to denote that the text in a paragraph will be pink
>Multiple stylesheets
You can have multiple stylesheet definitions on one page. For example, an internal stylesheet and an external stylesheet on one page or an inline stylesheet and an internal stylesheet on one page.
If a property has been set for the same tag in different stylesheet definitions on the same page, the definition that will be used will be from the most specific stylesheet. That is, the stylesheet that has the highest priority.
Stylesheets by priority:
>Inline stylesheet - An inline stylesheet has the highest priority. It will override styles declared in an internal stylesheet, an external stylesheet, and a web browsers default styles.
>Internal stylesheet - An internal stylesheet has the second highest priority. It will override styles declared in an external stylesheet and a web browsers default styles.
>External stylesheet - An external stylesheet has the third highest priority. It will override a web browsers default styles.
>Browsers default styles - A web browsers default styles have the lowest priority. A web browsers default styles will be used when there are no styles set for an element in an inline, internal, or external stylesheet.
