CSS ID Selector
Before we discuss the “ID” selector in CSS, we must first distinguish between a class in CSS and an ID in CSS. Classes and IDs are similar in CSS as both will allow you to style specific elements of your choice. However, classes were designed to be used multiple times throughout a web page. CSS IDs were designed to only be used once in a single web page.
Classes use the period (“.”) sign to denote a class. On the other hand, IDs use the pound (“#”) sign to denote a CSS ID.
Let’s use an example with the <p> tag:
The word following the pound (“#”) sign is the name assigned to your ID. The name of the ID can be anything. In this example, if a <p> tag has the ID “redParagraph” assigned to it, the text in the paragraph would be colored red. To apply an ID to a <p> tag, we use:
<p id="redParagraph">This paragraph will be colored red.</p>
Remember, IDs should only be used once throughout an entire document. If you wish to apply a style more than once, use classes.
Internal and External CSS Stylesheets
Now that we have a basic idea of CSS syntax, we need to add the stylesheets and apply them to our website.
There are two types of style sheets: internal and external. External style sheets are best because they allow you to edit all your CSS in one file.
External Style Sheets
External stylesheets must be added before the </head> HTML tag. It must also be a file in “.css” format. Here’s an example:
<link rel="stylesheet" type="text/css" href="path/to/your/stylesheet.css" />
The external stylesheet should not contain any HTML or any other code. Only CSS is allowed. Here’s an example of what’s contained in an external style sheet:
Internal Style Sheets
Internal stylesheets are style sheets stored inside the same web page it’s styling.
Just like external stylesheets, internal stylesheets should be placed above the HTML </head> tag.
If a web page is using both an internal and external stylesheet, and both style sheets have definitions for the same element then CSS will use the definition from the external style sheet. For example, if a web page uses both an external and internal stylesheet that both contains definitions for the <h3> tag, the definition for the <h3> tag used in the external style sheet will be used on the web page.
CSS Colors and Backgrounds
In this chapter, we will learn how to apply colors and background images using CSS.
To apply a color to the foreground (i.e. text), we must use the “color” property as follows:
The above code will apply the color “blue” to any text wrapped around <font> tags.
If we want to set the background color of an element such as the <body> tag or the <div> tag, we can use the background-color property:
Using CSS, we can define a URL to be our background image. We can accomplish this using the background-image property:
Notice we enclosed the path to our background image using url(). Whenever you use a URL in CSS, it is necessary to use this function.
The background image should automatically repeat itself. If you do not want a repeating background image, just apply “no-repeat” property:
background-image: url("path/to/your/image.gif") no-repeat;
The “no-repeat” property should be on the same line as the “background-image” property. Make sure you end each line with a semi-colon.
Using CSS, we can style fonts and change the typeface, size, color, and more.
Changing the Font Typeface
We can change the typeface of text between the <font> tags by using the font-family property. Here’s how it can be done:
font-family: "Times New Roman";
Occasionally, the web surfer might not have the font installed. In this case, you can tell CSS to use a backup font. There are two types of fonts: serif and sans-serif.
Serif fonts all have “curls” around their end points; whereas, sans-serif fonts do not. Times New Roman has “curls” around it; while Verdana does not. Thus, we would want CSS to use a backup font closest to Times New Roman; in this case, it would be a serif font. To accomplish this, we use:
font-family: "Times New Roman", serif;
CSS will search the users computer for the closest available serif font as a backup if Times New Roman is not installed.
We can set the font size using the font-size property. There are four different units to measure font sizes: px, pt, %, and em. “px” and “pt” are absolute sizes meaning regardless of the browser size or screen size, the fonts will always be displayed the same size. % and em are relative sizes. To ensure your text is readable across multiple platforms, you should use relative sizes such as % and em. Let’s see font sizes in action:
Bold, Italic, and Underline
To make your font bold:
To italicize your text:
To underline your text:
Take note all the properties for these formatting elements are different.