Download presentation
Presentation is loading. Please wait.
1
Cascading Style Sheets
Web Page Design CSS
2
Types of Style Sheets External Style Sheet
External style sheets are linked to HTML documents from external text files. Internal (Embedded) Style Sheet Internal or Embedded style sheets are <style> elements within the html page. In Line Style Sheet In Line style sheets are element attributes. The paragraph tag inserts a blank line between each line of text, the line break tag does not.
3
External Style Sheets Separate text file Contains no html code
File extension for external style sheet is .css Example: body { color: #339999; background-color: #FFFFCC; font-family: Arial, sans-serif; } h1 { text-align: center;
4
Linking the external CSS
Example <html> <head><title>Linking External CSS</title> <link rel="stylesheet" type="text/css" href="my_style.css" /> </head> <body> <!-- page content goes here --> </body> </html>
5
Internal (Embedded) Style Sheet
Example <html> <head><title>Embedded Style Sheet</title> <style type="text/css"> body { color: #339999; background-color: #FFFFCC; font-family: Arial, sans-serif; } h1 { text-align: center; </style></head> <body> <!– Text Goes Here --> </body> </html>
6
In Line Style Sheet To design a specific element during development.
Example – <html> <head><title>In Line CSS</title></head> <body> <p style=“font-style: italic; font-weight: bold; font-family; Arial, sans-serif;”>A paragraph with italics, bold, Arial style.</p> </body> </html>
7
Multiple Style Sheets (Cascading)
Cascading Order (when using more than one style sheet) Inline Style Internal (Embedded) Style Sheet External Style Sheet
8
CSS Properties and Values
Visit….
Similar presentations
