Differences

This shows you the differences between two versions of the page.

Link to this comparison view

css1 [2009-09-03 10:11]
Joakim Forsgren
css1 [2017-09-01 14:54]
Line 1: Line 1:
-====== CSS - Kort intro ====== 
-När en webläsare läser in en CSS så kommer den att formatera dokumentet efter CSS:n. 
  
-Det finns tre sätt att lägga in en CSS\\ 
-Extern - External Style Sheet\\ 
-Intern - Internal Style Sheet\\ 
-Inline - Inline Styles\\ 
- 
-Och nu lite Copy paste ;-) 
- 
-<code html> 
-An external style sheet is ideal when the style is applied to many pages. With an external style sheet,  
-you can change the look of an entire Web site by changing one file. Each page must link to the style sheet  
-using the <link> tag. The <link> tag goes inside the head section: 
- 
-<head> 
-<link rel="stylesheet" type="text/css" href="mystyle.css" /> 
-</head>  
- 
-An external style sheet can be written in any text editor. The file should not contain any html tags.  
-Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below: 
- 
-hr {color:sienna} 
-p {margin-left:20px} 
-body {background-image:url("images/back40.gif")}  
- 
-Do not leave spaces between the property value and the units!  
-"margin-left:20 px" (instead of "margin-left:20px") will work in IE, but not in Firefox or Opera. 
- 
- 
--------------------------------------------------------------------------------- 
- 
-Internal Style Sheet 
-An internal style sheet should be used when a single document has a unique style. You define internal styles in  
-the head section of an HTML page, by using the <style> tag, like this: 
- 
-<head> 
-<style type="text/css"> 
-hr {color:sienna} 
-p {margin-left:20px} 
-body {background-image:url("images/back40.gif")} 
-</style> 
-</head>  
- 
- 
--------------------------------------------------------------------------------- 
- 
-Inline Styles 
-An inline style loses many of the advantages of style sheets by mixing content with presentation.  
-Use this method sparingly! 
- 
-To use inline styles you use the style attribute in the relevant tag. The style attribute can contain  
-any CSS property. The example shows how to change the color and the left margin of a paragraph: 
- 
-<p style="color:sienna;margin-left:20px">This is a paragraph.</p>  
- 
- 
--------------------------------------------------------------------------------- 
- 
-Multiple Style Sheets 
-If some properties have been set for the same selector in different style sheets, the values will be inherited  
-from the more specific style sheet.  
- 
-For example, an external style sheet has these properties for the h3 selector: 
- 
-h3 
-{ 
-color:red; 
-text-align:left; 
-font-size:8pt 
- 
- 
-And an internal style sheet has these properties for the h3 selector: 
- 
-h3 
-{ 
-text-align:right; 
-font-size:20pt 
- 
- 
-If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: 
- 
-color:red; 
-text-align:right; 
-font-size:20pt  
- 
-The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by  
-the internal style sheet. 
- 
- 
--------------------------------------------------------------------------------- 
-</code> 
- 
-=== Multiple Styles Will Cascade into One === 
-  - Browser default  
-  - External style sheet  
-  - Internal style sheet (in the head section)  
-  - Inline style (inside an HTML element)  
-So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).