Coding Bootcamp (HTML & CSS)

Step 3, Cascading Style Sheets (continued)

In this step, we go through the following topics:

Id, Class and Generic tag selectors

So far we have looked solely at HTML selectors — those that represent an HTML tag. You can also define your own selectors in the form of class and ID selectors. The benefit of this is that you can have the same HTML element, but present it differently depending on its class or ID.

To define an ID, you put a square sign (#) before the name. To define a class you put a point (.). You can also define an entire generic HTML tag just by typing its name.


Class Selectors (simultaneously target different HTML elements)

A class selector allows you to simultaneously target different HTML elements regardless of their position in the document tree. If a series of HTML element have been labeled with the same class attribute value, then you can target them for styling by using a class selector, which takes the form: period (.) followed by the class name. In the example below I use A class selector several times to present news on Vikens kennel's front page.


Id Selectors (target a specific element by its id attribute)

An id selector allows you to target a specific element by its id attribute regardless of its type or position. If an HTML element has been labeled with an id attribute, then you can target it for styling by using an id selector, which takes the form: hash (#) followed by the id name. A good example of the use of id selector is when using div elements. Note that you should only be using an id once per page


Generic tag selectors

As you will notice from the example below, targeting generic HTML tags is easy: just use the tag name.


Id, Class and Generic tag selectors in practice

Below I apply all three selectors to Vikens kennel's front page. Note that I use a class selector several times to present news on Vikens kennel's front page.



Code inside the HTML- file

Note the id attribute, it specifies a unique id for an HTML element, also note that I use the same class selector several times to produce news.
Syntax:


Code inside the CSS- file

Below you can see that I use (.) to address a class selector and (#) to address a Id. When it comes to targeting generic HTML tags in just use the tag name, see at the bottom of the image how I address p, h1, h2, h3, h4!
Syntax:


Using The class Attribute on Inline Elements

CLASS can also be used on the specified area in an inline element. If you just want to format some words within a <p>, you can enclose the area to be formatted with <span>. In the example below, I change the text color in some places in the introductory paragrap:


Below you can see that I use (span.) to address a class selector on a inline element:
Syntax:

See how I embed <span class = "changeTextColor"> Rhodesian Ridgeback. </span> in the HTML code below:
Syntax: