Cascading Style Sheet (CSS) is the preferred way to style HTML. HTML has a style element and a global style attribute. These make it very easy to write unmaintainable HTML. For example, let's imagine that we have 10 elements on an HTML page for which we want the font color to be red. We create a span element to wrap the text that has the font color red, as follows:
<span style="color: #ff0000;"></span>
Later, if we decide to change the color to blue, we will have to change 10 instances of that element and then multiply this by the number of pages we have used the span element on. This is completely unmaintainable.
This is where CSS comes in. We can target specific elements/groups of elements to which we wish to apply a specific style. CSS allows us to define these styles, easily update them, and change them from one place to another.
This book will focus on the most used CSS selectors, units, rules, functions, and properties from CSS1, CSS2.1, and CSS3. For the most part, these should all work in any browser, but there are exceptions. A great rule of thumb is that newer browsers will have fewer issues.
We will get started with a quick overview of the different types of basic selectors.
A selector represents a structure. This representation is then used in a CSS rule to determine what elements are selected to be styled by this rule. CSS style rules apply in the form of a waterfall effect. Each rule that is matched is also passed on to each of its children, matched and applied based on the weight of the selector. This section will only focus on the most basic of selectors.
The basic selectors are either type selectors, universal selectors, attribute selectors, class selectors, ID selectors, or pseudo-classes.
Note
All CSS selectors are case-insensitive. Selectors can also be grouped together to share rules. To group selectors, you just have to split them with commas. Consider the following example:
p { color: #ffffff; }
article { color: #ffffff }Here, the following is the same as the preceding declaration
p, article { color: #ffffff }The type selectors selects based on the element name:
E ns|E
Here, E is the element name and ns is a namespace.
This is the simplest way to select elements—using their name. For the most part, when using just HTML, you not need to worry about the namespace, as all of the HTML elements are in the default namespace. An asterisk can be used to specify all namespaces, for example, *|Element.
When this selector is used, it will match all of the elements in the document. For example, if you have fifteen h2 elements and use a single h2 element, then this rule will match all fifteen.
Here are a few examples of the type selector. The first code sets all the h1 elements' font color to red. The next code applies red as the background color for all p elements:
h1 { color: #ff0000; }
p { background: #ff0000; }The asterisk (*) represents any and all qualified elements:
* ns|* *|*
This is essentially a wildcard selector. It will match every element. This is true even when used with other selectors. For example, *.my-class and .my-class are the same.
While you can use it as a single selector to match every element, it is most useful when used with other selectors. Following along with our preceding example, we may want to select any element that is a descendant of an article element. This selector is very explicit and easy to read, take a look at the following syntax:
article *
Here is an example. The first example uses attribute selectors to select any elements with hreflang in English, and the second example will select all elements in the document:
*[hreflang="en"] { display: block; background:url(flag_of_the_UK); }
* { padding: 0; }These selectors will match against attributes of an element. There are seven different types of attribute selector and they are as follows:
[attribute] [attribute=value] [attribute~=value] [attribute|=value] [attribute^=value] [attribute$=value] [attribute*=value]
These selectors are usually preceded by a type selector or universal selector.
This selector is a way to use a regular expression syntax in a selector rule. Each of the selectors will act differently based on the use, so they are listed with the differences here:
[attribute]: This matches an element that has the[attribute]attribute, irrespective of the value of the attribute.[=]: The value has to be an exact match.[~=]: This is used when the attribute takes a list of values. One of the values in the list must match.[|=]: This attribute must either be an exact match or the value must begin with the value followed immediately by a-.[^=]: This attribute matches the value that has this prefix.[$=]: This attribute matches the value that has this suffix.[*=]: This attribute matches any substring of the value.
The best way to really show the difference between these is to use some examples. We will look at the lang and href attributes. The examples will be in the same order in which they were introduced.
Here is the HTML file that the examples will be selecting.
<span lang="en-us en-gb">Attribute Selector</span> <span lang="es">selector de atributo</span> <span lang="de-at de">German (Austria)</span> <a href="https://example.com">HTTPS</a> <a href="http://google.com">Google</a> <a href="http://example.com/example.pdf">Example PDF</a>
Using the following, we should have all the spans with a lang attribute with a black background, Spanish will be grey, German will be red, English will be blue, anchor elements that have https attribute will be yellow, any PDFs will be red, and any anchor to Google will be green. Here are the preceding styles described:
span[lang] { background-color: #000000; color: #ffffff; }
span[lang="es"] { color: #808080; }
span[lang~="de-at"] { color: #ff0000; }
span[lang|="en"] { color: #0000ff; }
a[href^="https"] { color: #ffff00; }
a[href$="pdf"] { color: #ff0000; }
a[href*="google"] { color: #00ff00; }This selector will match the HTML elements based on the class attribute of the element.
element.class .class or *.class element.class.another-class
This is the most commonly used selector. Selecting based on the class attribute allows you to style elements in an orthogonal manner. Classes can be applied to many different elements and we can style each of those elements in the same manner.
The class selector can be stacked so that both classes will have to be present.
Here is some HTML with different elements that have a class attribute:
<h1 class="red">Red Text</h1> <span class="red">Red Text</span> <span class="green black">Green text, black background</span> <span class="green">Normal text</span>
Here is the CSS to style the HTML:
.red { color: #ff0000; }
.green.black { color: #00ff00; background-color: #000000; }When the red class is applied to an element, it will change the color of the text to red. The compound green and black will only select elements that have both classes defined.
This selector will match based on the ID attribute of the element:
#id element#id or *#id
The ID attribute should be unique for the document, so the ID selector should only ever target one element. This is in contrast to the class selector, which can be used to select multiple elements. As an example, you can use a class selector to make every image on your page have a certain amount of margin and have a rule that specifically targets just your logo to have a different amount of margin.
Here is an example CSS rule that targets an ID of a logo:
#logo { margin: 10px; }