The three types of style sheet lesson two fourth quarter fourth year
•Download as PPTX, PDF•
2 likes•454 views
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Similar to The three types of style sheet lesson two fourth quarter fourth year
Similar to The three types of style sheet lesson two fourth quarter fourth year (20)
More from Perry Mallari
More from Perry Mallari (14)
Recently uploaded
Recently uploaded (20)
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.
- 8. More on CSS CSS (Cascading Style Sheet)
- 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>