CSS provides an easy way to change the way a website looks from the browser defaults. This is sometimes referred to as the presentation of the website, or the presentation layer. This means that CSS allows for a lot of flexibility in how it is applied to the website, and in controlling how the website will look.
Where to put Your Styles
There are three ways to apply CSS to your webpage.
Embedded
- styles are applied within the same page only
- use the <style> tag set to enclose the styles
- should only be used on styles specific to that page
- if all layout is done on that page – it will make it difficult make a site wide update the site
External Style Sheets
- external files
- same file can be used by several other files
- makes it easy to make wholesale changes to a site
- you link to the external file with the <link> tag.
Inline Styles
- You should avoid using
- potential to be deprecated in future versions of HTML specifications
- use an embedded class preferably
Anatomy of a Style
Styles are made up of a rule attached to a selector. If you use an embedded style or an external style sheet, this is what you will expect to see. (In line doesn’t have the selector or the braces for the rule as it is an attribute attached to the tag.)
h1 { color: green; }
The parts that make this style up are the:
- h1 – selector
- { color: green; } – rule
- color: green; – declaration
- color – property
- green – value
You can have more than one declaration within a rule, and you can have more than one selector for a rule.
CSS Selector Types
In the above example, the selector was an HTML tag. However, there can be several different types of selectors that you can use. Below you will find the different types of selectors.
type/tag
This is to redefine the style of an HTML tag from its default settings. This is often to adjust the padding, margin, and font settings.
p { }
body { }
a { }
ID
ID selectors used to redefine a specific element on a web page. An ID can only be applied to a single element per one page. The same ID can be used on other pages, just not that page. As such, IDs are normally used for JavaScript, however, they can be used to define a CSS selector.
#header { }
Class
Classes are used to redefine (potentially) multiple elements on a web page, but not all the elements of the same type/tag. They can be mix/matched with different types of tags. Because they can be used multiple times on a single page – many people will define all the design elements with classes.
.required { }
.post { }
pseudo-class
This can be used to define a style of an element at a given state. This is most commonly used to define state of an anchor tag. Although additional pseudo classes have been added in CSS3.
Pseudo classes starts with a colon “:”.
a:hover { }
a:visited { }
Combined Selectors
To use more than one selector, simply put a comma between the selectors. Then any selector that matches will take on the display properties of the following rule. For example:
#nav a, #nav a:visited { }
/* equal to */
#nav a { }
#nav a:visited { }
An Introduction to CSS and Style Sheets was originally found on Access 2 Learn
