The three types of style sheet lesson two fourth quarter fourth year
1. The Three Types of Style
Sheet
Inline, Internal (Embedded), and External Style Sheet
2. Inline Style Sheet
▪ This is placed inside the tag itself
▪ They are declared with the ”style =“ attribute.
▪ Example:
<p style = “color:red”> This text will be color red. </p>
3. Internal Style Sheet
▪ Is used if you want your HTML to have a unique style
▪ Is define using the <style> tag and goes in the head
section of the HTML document
▪ The <style> tag specifies the content type of a style
sheet with its type attribute which should be set to
“text/css”
<style type=“text/css”>
Styles go here
</style>
4. Internal Style Sheet
▪ Example:
<html>
<head>
<style type=“text/css”>
p {color:maroon}
</style>
</head>
<body>
<p>this text is color maroon</p>
<p>and this one too</p>
</body>
</html>
5. Internal Style Sheet
▪ This style sheets specifies that the text in all
instances of the <p> tag in the <body> section will be
colored maroon.
6. External Style Sheet
▪ Used to apply one or more styles to many pages.
▪ If you make any changes with the external style
sheet, the change is applied to all the pages where
the style sheet is used
▪ Declared in a separate file with a .css extension
▪ Called by pages whose interface it will affect
▪ They are called with the used of <link> tag that is
place in the head section of an HTML document
7. External Style Sheet
▪ The <link> tag should be written like this:
– <link rel=“stylesheet” type=text/css” href=“test.css” />
▪ Wherein the tag above has three attributes
respectively as follows:
▪ rel- when using an external style sheet on a
webpage, this attribute takes the value “stylesheet.”
▪ Type - when using an external style sheet on a web
page, this attribute takes the value “text/css”
▪ href – indicates the name and location of the external
style sheet to be used.
9. Multiple Style Sheet
▪ You can use multiple style sheets in one
page
▪ You can apply an inline style sheet and
an internal style sheet at the same time
or an external and internal style sheet
simultaneously
▪ But consider what should have the
highest priority from the two
10. Style sheet by priority
▪ Inline Style Sheet
– It has the highest priority
– It will override styles declared in an internal
style sheet, an external style sheet, and a web
browser’s default style
▪ Internal Style Sheet
– An Internal style sheet has the second has the
second highest priority
– It will override styles declared in an external
style sheet and a web browsers default style
11. Style sheet by priority
▪ External Style Sheet
– Has the third highest priority
– It will override web browsers default
style
▪ Browsers Default Style
– Has the lowest priority
– It is used when there is no style set for an
element in an inline, internal, or external
style sheet
12. Creating id’s and classes
▪ The Class Selector
– It is used to specify a style for a group of elements
– Allows you to set a particular style for many HTML elements
with the same class
13. Creating id’s and classes
<html>
<head>
<style>
The class selector is
defined starting with
“.” followed by its
name
.center{text-align:center;}
</style>
</head>
<body>
<h1 class = “center”> This heading is aligned center.</h1>
</body>
</html>
14. Creating id’s and classes
▪ The id Selector
– Specify style for a single and unique element
– Its defined with # sign before its name
– Can be written in an external and internal style sheet
15. Creating id’s and classes
<html>
<head>
<style>
#center{text-align:center;}
</style>
</head>
<body>
<h1 id = “center”> This heading is aligned center.</h1>
</body>
</html>