Differences

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

Link to this comparison view

css1 [2017-09-01 14:54]
 css1 [2022-07-18 13:20] (current)
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, in read order
 +  - 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).