![Page 1: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/1.jpg)
The Three Types of Style Sheet
Inline, Internal (Embedded), and External Style Sheet
![Page 2: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/2.jpg)
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>
![Page 3: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/3.jpg)
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>
![Page 4: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/4.jpg)
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>
![Page 5: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/5.jpg)
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.
![Page 6: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/6.jpg)
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
![Page 7: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/7.jpg)
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.
![Page 8: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/8.jpg)
More on CSS
CSS (Cascading Style Sheet)
![Page 9: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/9.jpg)
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
![Page 10: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/10.jpg)
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
![Page 11: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/11.jpg)
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
![Page 12: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/12.jpg)
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
![Page 13: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/13.jpg)
Creating id’s and classes
<html>
<head>
<style>
.center{text-align:center;}
</style>
</head>
<body>
<h1 class = “center”> This heading is aligned center.</h1>
</body>
</html>
The class selector is defined starting with “.” followed by its name
![Page 14: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/14.jpg)
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
![Page 15: The three types of style sheet lesson two fourth quarter fourth year](https://reader036.vdocument.in/reader036/viewer/2022062708/558c8befd8b42a4e678b46b8/html5/thumbnails/15.jpg)
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>