Cascading style sheets overview
Cascading style sheets (CSS) give you control over the presentation of your web pages. Using CSS, you can precisely position and set the appearance of elements on a web page.
A CSS can be external, internal, or inline, relative to a web page and a web page can use one or more of these types of CSS simultaneously. In general, styles that are defined in an inline CSS take precedence over those in an internal or external CSS, and styles in an internal CSS take precedence over styles in an external CSS.
External CSS
Use an external style sheet when you want to apply the same styles consistently across some or all web pages in your website. By defining styles in one or more external style sheets and attaching them to web pages, you can ensure your entire website has a consistent appearance. If you decide to change a style, you need to make only one change — in the external CSS — and the change is automatically reflected in all web pages that reference that style and CSS.
An external CSS is contained within a .css file, such as global.css. The syntax of an external CSS is the same as an internal CSS (see example in the next section in the current topic), except that the styles defined in an external CSS aren't surrounded by <style> tags.
Internal CSS
Use an internal CSS, sometimes referred to as embedded CSS, when you want to define styles only for the current web page and also when you want to override the styles that are defined in an external CSS attached to the current web page.
An internal CSS is contained within the <head> tags of a web page.
Example of an internal style sheet
<style type="text/css">
.alert {
font-weight: bold;
color: #FF0000;
}
h1 {
font-size: 16pt;
font-family: Arial, Helvetica, sans-serif;
}
#headlines {
border-color: #000000;
border-width: thin;
border-style: solid;
}
</style>
Inline CSS
Use an inline style to apply cascading style sheet properties to individual elements on a page and don't need to reuse the style. An inline style is defined within the start tag of an HTML element in the web page.
An example of an inline style
<p style="font-weight: bold; font-style: italic; color: #FF0000">