When is external css used?

Answer 1

It is sipmply a link to a stylesheet that is separate from the HTML document and contained in the Head element of the document. This references something I did:

<link href="crigbypubs.css" type="text/css" rel="stylesheet" media="screen"/>

<link href="print.css" type="text/css" rel="stylesheet" media="print"/>

done in XHTML

Answer 2

external style sheets are .css files that are linked to your HTML file using @import or <link /> tags, as opposed to inline style sheets which are written inside of your HTML using a <style></style> tag or using the style attribute like <a style="color: red;" ></a>

Answer 3

Mostly when it is used to format multiple pages. That is the beauty and utility of an external style sheet; the formating of multiple pages can be changed by a single stylesheet simply changing a single one

Another hint is to use two; one that contains basic formatting and a more targetted one specific to the page.

Answer 4

There are two methods you can use to call an external stylesheet into an HTML document. The first is to use the link tag. The second is to use the CSS declaration, @import.

Using the LINK tag

The LINK tag contained in the HEAD section of the HTML document. It's used to describe the relationship between an external resource and the current document. LINK tags can only appear in the HEAD section, but you can have as many LINK tags as your heart desires.

Here it is, inside an HTML snippet.

The link tag in the above snippet will tell the browser to go out and download the our_styles.css file, from the location we gave in the href attribute. That could also be a complete URL if you wanted. The rel attribute is used to define what kind of reference is being made (so the browser knows to treat our CSS file asCSS.) And the type attribute is just the file's MIME type.

There is also a "media" attribute, that would allow you to target a sytlesheet specifically for a particular media (like "print") if you wanted. It takes a comma separated list.

Strangely, none of the above attributes are required by the HTML specification for the link tag. But it's an empty tag, so without these attributes, it won't actually do anything.

LINK tags can be used to relate several other kinds of information to the document, so you might want to check out the related link to see them all.

Using @import

The @import declaration is a CSS declaration. As such, it can be contained inside a set of

As you can see, the @import declaration is pretty simple. You pass a url parameter after it (similar to using background-image declarations) The double quotes are required for valid XHTML, but aren't necessary for everything to work right. After you've passed the URL you can optionally pass a comma separated list of media types. These are the same media types as the LINK tag would take. Finally, the declaration ends with a semi-colon (like all CSS declarations.)

So which one should I use?

If you search the web, you'll find out that LINK has been supported since the beginning of time, whereas @import is newer. Some web developers will argue that you shouldn't use @import, because some browsers don't support it, or don't support it entirely.

However all major browsers since internet Explorer 6 have had full @import support. At this point, the folks still using those ancient browsers are used to a very broken internet.

@import is best used when you need to be able to programmatically add a stylesheet to override a prior stylesheet. This is because the STYLE tag can show up in the BODY without making the validator flip out. But due to some serious performance impact (see "don't use @import" in related links) I recommend always using LINK, unless you have a pressing reason otherwise.

Answer 5

It is a sheet of code that is accessed with the <link /> attribute in HTML.