HEYGB.COM

How to Use External Files in CSS

My friends may be few CSS beginner learners already know about that it is possible to use external files as part of your CSS. For example, you may want to apply a background image to an element. This is done using the background-image style, and the related background style. These load images using the url value:

1

  background-image: url(background.jpg);

The url is relative to the file the CSS is in, so if you are using external CSS files, you can use the same file from pages in any directory, and the CSS will always reference the correct images.

You can also make a stylesheet import another stylesheet using the import rule (note that this is not supported by some old browsers). This also uses the url value:

1

  @import url(somestyle.css);

Once again, this is related to the CSS file.

The url value can use any valid file URL, including accessing files from other servers:

1

  @import url(http://example.com/somestyle.css);

Any @import fule must be at the top of your CSS file, before any normal CSS rules.

 
How to override Default Styles

In CSS to override any default style is called Inline style. An element can be given its own style by using the style attribute. This means that irrespective of what is specified in the stylesheets, it will always use these styles. That is not strictly true, since it is possible to make a selector that is considered more specific, but for most purposes, inline styles override stylesheets.

Using an inline style means that you largely lose control from stylesheets, meaning that if you decide to restyle your pages, you will be unable to restyle that part. It is generally not a good idea to use inline style attributes.

They are best suited to scripting that creates animation effects, where there is a need to apply certain styles (usually positioning) irrespective of the style.

1

  <div style="position: absolute; left: 10px; top: 100px;">