CSS Inserting


How do you insert CSS code into your HTML document? There are three different ways to do that. Once inserted, the browser will then read the style sheet and format the HTML document according to the styles in the style sheet. Here are the three ways according to w3schools.com’s CSS How To tutorial

  1. External style sheet
  2. Internal style sheet
  3. Inline style

External Style Sheet

This is generally the preferred way to style HTML. With an external style sheet, you can change the look of an entire website by changing just one file! Each page must include a reference to the external style sheet file inside the link element. The link element goes inside the head section and can appear any number of times. The link HTML element is an empty element, it contains attributes only. The rel attribute is required and specifies the relationship between the current document and the linked document. The type specifies the media type of the linked document. The href specifies the location of the linked document. In the example below we are using a relative URL. If we were using an absolute URL, it would point to another web site (like href=”http://www.example.com/theme.css”).

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

In your CSS file (shown below), do not add a space between the property value and the unit (such as margin-left: 20 px;). The correct way is: margin-left: 20px;

body {
    background-color: lightblue;
}
h1 {
    color: navy;
    margin-left: 20px;
}

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the style element, inside the head section of an HTML page.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Inline Styles

An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. The example below shows how to change the color and the left margin of an h1 element. There are a couple of other posts at this site that show examples of inline styles: HTML Styles and HTML Inline Styles.

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used. For example, we could have an external style sheet that we link to and an internal style sheet that uses the style tag. If both are styling the same element with thew same attribute which one “wins”? If the internal style is defined after the link to the external style sheet, the internal one “wins”.

Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority.

  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section)
  3. Browser default

So, an inline style (inside a specific HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or a browser default value.

Leave a comment

Your email address will not be published. Required fields are marked *