Differences
This shows you the differences between two versions of the page.
css1 [2009-09-03 10:11] Joakim Forsgren |
css1 [2022-07-18 13:20] |
||
---|---|---|---|
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 rel=" | ||
- | </ | ||
- | |||
- | 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: | ||
- | p {margin-left: | ||
- | body {background-image: | ||
- | |||
- | Do not leave spaces between the property value and the units! | ||
- | " | ||
- | |||
- | |||
- | -------------------------------------------------------------------------------- | ||
- | |||
- | 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 type=" | ||
- | hr {color: | ||
- | p {margin-left: | ||
- | body {background-image: | ||
- | </ | ||
- | </ | ||
- | |||
- | |||
- | -------------------------------------------------------------------------------- | ||
- | |||
- | 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=" | ||
- | |||
- | |||
- | -------------------------------------------------------------------------------- | ||
- | |||
- | 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: | ||
- | font-size: | ||
- | } | ||
- | |||
- | And an internal style sheet has these properties for the h3 selector: | ||
- | |||
- | h3 | ||
- | { | ||
- | text-align: | ||
- | font-size: | ||
- | } | ||
- | |||
- | 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: | ||
- | font-size: | ||
- | |||
- | The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by | ||
- | the internal style sheet. | ||
- | |||
- | |||
- | -------------------------------------------------------------------------------- | ||
- | </ | ||
- | |||
- | === 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 < |