The Three Types of Style Sheet Inline, Internal (Embedded), and External Style Sheet
Jun 26, 2015
The Three Types of Style Sheet
Inline, Internal (Embedded), and External Style Sheet
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>
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>
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>
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.
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
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.
More on CSS
CSS (Cascading Style Sheet)
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
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
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
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
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
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
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>