Embed Size (px)
Citation preview
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>
