cascading style sheets web page design css. types of style sheets 4 external style sheet –external...
TRANSCRIPT
Cascading Style Sheets
Web Page Design
CSS
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.
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;}
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>
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>
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>
Multiple Style Sheets (Cascading)
Cascading Order (when using more than one style sheet)
– Inline Style– Internal (Embedded) Style Sheet– External Style Sheet
CSS Properties and Values
Visit…. http://www.w3schools.com/css/css_reference.asp