CSS Syntax and Selectors
CSS Syntax
Comments in CSS:
/* CSS Comments look like this */
Comments should be used. They are useful for separating/sectioning group areas of code. They are especially useful if using filters/hacks/workarounds as they will remind you (or others following you) what the workaround was for and why.
selector {property: value;}
Semi-colons should always be used at the end of a rule, it's good habit and it avoids errors when adding more rules after the last one.
Selectors
Some common examples:
h1 {property: value;}: is a Type Selector it will match any element of that type within the document.
.classname {property: value;}: is a Class Selector any elements with the class attribute = to that classname will be matched
#idname {property: value;}: is an ID Selector any elements with the ID attribute = to that id name will be matched.
Note: An ID should only be assigned to a unique element within a page i.e. once. It should IDentify an area of a page as opposed to classes which can apply to multiple occurrences of an style within a page. ID should also be used as a "bookmark" anchor because "name" is deprecated. (see more in the section on Styling Links/ Link States in later section)
Selectors can and should be grouped for elements that have similar properties, rather than declaring the style multiple times in separate rules e.g. you want all your headings to be the same font-family but different from the one you already specified in your main body text. Grouped selectors should be separated by commas.
Example:
body {
font-family: verdana, arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: georgia, serif;
}
Updates:
«« Previous Page | Crib Sheet Index | Next Page»»
ChristinaYoung on