Example Web Page

Cascading Style Sheets/Applying CSS to HTML and XHTML

CSS can be applied to HTML or XHTML using three methods: linked, embedded, and inline. In the linked method, the CSS is stored in a separate file, instead of directly in the HTML page. In the embedded method, CSS is stored as part of the HTML page, in the header section. In the inline method, CSS is stored directly in the style attributes of the HTML tags, as

.

The neatest method is probably the linked one, but the other ones are convenient and quick in the phases of prototyping a web page. The embedded and inline methods do not require having a separate file. The inline method saves you the trouble of considering what CSS classes your document should have. For a larger site, in which many web pages share the same styling, and in which the styling should be customizable by the user, the linked method is the only viable option.

The methods are treated in detail in the following sections.

Linking [ edit | edit source ]

With linked CSS, CSS rules are stored in a separate file. To refer to that file from the HTML page, add the link element (and its closing element within XHTML) to the head element, as shown in the following example, which assumes that the stylesheet is stored in the file named «style.css».

The link element in the example has three attributes. The first, rel , tells the browser the type of the target of the link. The second, type , tells the browser what type of stylesheet it is. And the third, href , tells the browser under which URL to find the stylesheet. In the example, the URL is relative, but it can also be absolute.

The «style.css» with a single rule contains only the following text:

This tells the browser that the text in the paragraph ( p ) element should be rendered as bold.

Text that will be formatted.

The source code for the complete HTML document is thus as follows:

     
Text that will be formatted.
  

Embedding [ edit | edit source ]

Dynamically generated webpages may need to use embedded CSS, but this should be kept to a minimum. Even in dynamic pages, any CSS that is common to multiple pages should generally be moved to a linked stylesheet.

Embedded CSS is CSS that is located in the header of the HTML document that requires styling. For example we would like the text in this HTML document to appear bold.

      
Text that will be formatted.
  

The CSS may be placed in the document’s header section:

The CSS is contained in a style element. Setting the element’s type attribute to text/css tells the browser that the enclosed sheetstyle is written in CSS and should be used to format the page. If the attribute type is missing or set to an unrecognized value, the CSS will not be applied to the page.

The bit of CSS in this example tells the browser to make all the text found in any paragraph ( p ) elements bold. The text on the page would look like this:

Text that will be formatted.

Here is the complete document including the CSS.

    p  
Text that will be formatted.
  

Remember, you should use linked stylesheets in preference to embedded stylesheets whenever possible. That will allow easy replacement of the general style information without having to keep track of styles within the various HTML files.

Inlining [ edit | edit source ]

Inline CSS is specified directly in the opening tag of the element you want it to apply to. It is entered into the style attribute within HTML or XHTML 1.1.

As mentioned, you should in general prefer linked CSS to embedded CSS, and both are preferred over inline CSS.

Источник

Add an external CSS stylesheet to an HTML or XHTML document

Suppose you are developing a website that uses a common CSS stylesheet for all pages. To avoid duplication and conserve bandwidth you have chosen to make this an external stylesheet, meaning that it exists as a separate file on the webserver which is downloaded separately from the pages that make use of it.

The stylesheet can be accessed using the site-relative URL /stylesheet.css .

Methods

Method (using link)

Tested with:

The simplest way to use an external stylesheet is to link to it by means of an HTML or XHTML link element. This should have a relationship type of ‘ stylesheet ’ and a content type of ‘ text/css ’. It should be placed within the head of the document.

The correct form of the link element depends on the document type. In XHTML the element (like all elements) must be explicitly closed. The preferred way to achieve this is by using an empty element tag in place of an ordinary start tag:

Note the space character immediately prior to the/> sequence at the end of the tag. Its purpose is to improve compatibility with web browsers that support HTML but not XHTML. Use of a space is recommended (but not required) by the XHTML 1.0 specification.

In HTML prior to version 5 the element must not be explicitly closed:

The content of a link element is declared to be EMPTY in the DTD, therefore it must not have an end tag. These versions of HTML do not allow empty element tags.

The draft HTML version 5 specification (as of July 2011) allows either syntax.

The link element exists in all versions of HTML from version 2 upwards and all versions of XHTML. The use of rel=»stylesheet» was not formally standardised until HTML version 4 and XHTML version 1, however it is described in early versions of the CSS specification. It would be reasonable to expect any browser that provides a standard implementation of CSS to support the link element as described above.

Method (using @import)

Tested with:

An alternative method is to import the external stylesheet into an internal stylesheet using an @import rule:

The following alternative forms of the @import rule are equally valid:

This method should work in any browser that supports CSS level 1 or better. There are some very old browsers which do not support @import in some or all of its incarnations, but which do support the link element. This behaviour has historically been used to serve different combinations of stylesheet to different browsers, but should not be needed on a modern standards-based website.

Variations

Linking to multiple stylesheets

It is possible to link to multiple stylesheets by using multiple link elements:

It is also possible to combine @import rules with other rules in an internal stylesheet, provided that the @import rules come first. For example, the first @import rule in the following stylesheet is allowed but the second one is not:

(A @charset rule would precede any @import rules, however @charset should not be used in an internal stylesheet.)

See also

Further reading

Источник

How to Link CSS to HTML – Stylesheet File Linking

Kolade Chris

HTML is the markup language that helps you define the structure of a web page. CSS is the stylesheet language you use to make the structure presentable and nicely laid out.

To make the stylings you implement with CSS reflect in the HTML, you have to find a way to link the CSS to the HTML.

You can do the linking by writing inline CSS, internal CSS, or external CSS.

It is a best practice to keep your CSS separate from your HTML, so this article focuses on how you can link that external CSS to your HTML.

How to Link CSS to HTML

To link your CSS to your HTML, you have to use the link tag with some relevant attributes.

The link tag is a self-closing tag you should put at the head section of your HTML.

To link CSS to HTML with it, this is how you do it:

Place the link tag at the head section of your HTML as shown below:

Attributes of the Link Tag

The rel Attribute

rel is the relationship between the external file and the current file. For CSS, you use stylesheet . For example, rel=»stylesheet» .

The type Attribute

type is the type of the document you are linking to the HTML. For CSS, it is text/css . For example type=»text/css» .

The href Attribute

href stands for “hypertext reference”. You use it to specify the location of the CSS file and the file name. It is a clickable link, so you can also hold CTRL and click it to view the CSS file.

For example, href=»styles.css» if the CSS file is located in the same folder as the HTML file. Or href=»folder/styles.css» if the CSS file is located on another folder.

Final Thoughts

This article showed you how to properly link an external CSS file to HTML with the link tag and the necessary attributes.

We also took a look at what each of the attributes means, so you don’t just use them without knowing how they work.

Источник