«««< HEAD What is CSS =======
Cascading Stlye Sheets
CSS can be used for very basic document text styling — for example, for changing the color and size of headings and links. It can be used to create a layout — for example, turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation.
CSS is a rule-based language — you define the rules by specifying groups of styles that should be applied to particular elements or groups of elements on your web page.
h1 {
color: red;
font-size: 5em;
}
In the above example, the CSS rule opens with a selector. This selects the HTML element that we are going to style. In this case, we are styling level one headings (<h1>).
We then have a set of curly braces { }.
Inside the braces will be one or more declarations, which take the form of property and value pairs. We specify the property (color in the above example) before the colon, and we specify the value of the property after the colon (red in this example).
This example contains two declarations, one for color and the other for font-size. Each pair specifies a property of the element(s) we are selecting (<h1> in this case), then a value that we’d like to give the property.
CSS properties have different allowable values, depending on which property is being specified. In our example, we have the color property, which can take various color values. We also have the font-size property. This property can take various size units as a value.
A CSS stylesheet will contain many such rules, written one after the other.
The individual property pages on MDN give you a quick way to look up properties and their values when you forget or when you want to know what else you can use as a value.
As there are so many things that you could style using CSS, the language is broken down into modules. You’ll see reference to these modules as you explore MDN. Many of the documentation pages are organized around a particular module. For example, you could take a look at the MDN reference to the Backgrounds and Borders module to find out what its purpose is and the properties and features it contains. In that module, you will also find a link to Specifications that defines the technology (also see the section below).
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the element, inside the head section.
An external style sheet can be written in any text editor, and must be saved with a .css extension.
The external .css file should not contain any HTML tags.
Note: Do not add a space between the property value and the unit: Incorrect (space): margin-left: 20 px; Correct (nospace): margin-left: 20px;
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the
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.
Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.
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.
Cascading Order
What style will be used when there is more than one style specified for an HTML element?
All the styles in a page will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority:
So, an inline style has the highest priority, and will override external and internal styles and browser defaults.
195cf3a721d540515b6a3fa01b058d704612af8e