Introduction to Css
Adding CSS
Setting Up The HTML Code
Selectors are the most important aspects of CSS because they are used to "select" elements on an HTML page so that they can be styled.
Type Selectors
Type selectors will select any HTML element on a page that matches the selector.
Here is a list of common Type Selectors.
| body | <body> |
| div | <div> |
| h1, h2, h3, h4, h5, h6 | <h1> |
| p | <p> |
| em | <em> |
| q | <q> |
| blockquote | <blockquote> |
The <div> element is a generic container that can be used to add structure to an HTML document. Although it is a block level element, it does not add any other presentation to the content. The <div> element is usually used to contain logical divisions of content, such as navigation and footer information. These divisions of content can then be styled to suit your needs using descendant selectors, which are covered later in this lesson.
As an example of Type Selectors, if you would like to select all <li> elements on the page you are working on, the <li> selector would be written like this in your CSS file:
li {
color: blue;
}
Class Selectors
Class selectors can be used to select any HTML elements that have been given a class attribute. Such as <p class="intro"> and a <href="#" class="intro">.
For example to select all instances of the intro class, the .intro selector is used below in the style sheet as.
.intro {
font-weight: bold;
}
The Class Selectors used to make all CSS and HTML code a bold orange is:
in HTML
<p class="code">.intro {</p>
<p class="code">font-weight: bold;</p>
<p class="code">}</p>
in CSS
.code {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #FF561F;
font-weight: bold;
}
* Do NOT start a class name with a number! It will not work in Mozilla/Firefox
ID Selectors
ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute. However, each ID can be used only once within a document, whereas classes can be used as often as needed.
For example, when using selectors for unique sections of a web page aka HTML code such as container, navigation or footer you would use these three IDs:
<div id="content"> <div id="navigation"> <div id="footer">
When adding these to your CSS code. They would be represented like this:
#content {
}
#navigation {
}
#footer {
}
** Do NOT start an ID name with a number! It will not work in Mozilla/Firefox
Should you use ID or Class?
While class can be used as many times as needed within a document, ID's can be applied only once within a document; so if you use the same selector more than once, class would be your obvious choice.
However, IDs carry more weight than classes. If a class selector and ID selector apply the same property to one element, the ID selector's value would be chosen. For example, h2#into { color: red; } will override h2.intro { color: blue }.
Descendant Selectors
Descendant Selectors are used to select elements that are descendants of another element.
For example, if you were looking to change the styles for hypertext links aka <a> thats placed in an <li> tag in your navigation #navigation you would write the CSS code like this:
#navigation li a {
color: blue
}
With the use of descendant selectors you will only change the color of your hypertext links when they are within the ordered list and navigation tags. This allows for a larger number of options when styling your page as well highlighting important text in your site.