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. (more…)