Selectors – what are selectors? How do I write selectors? How do selectors select elements or attributes in CSS, and once they have selected them, how do I put them on my webpage?
While trying to answer my questions, I realized that selectors are the foundation of CSS. Just as HTML provides the structural foundation for a web page, CSS, through its use of selectors, provides the decorations. They bring the page to life. They target HTML elements on the webpage, which allow users to add styles based on their id, class, type, and attributes to name just a few. For brevity’s sake, I will focus primarily in this post on the concept of simple selectors and how I was able to answer my questions using them.
Although there is a syntax for selectors, they differ in type and how they interact with or “select” HTML elements. When writing a selector, you write the selector name, followed by a space, and then a curly bracket. You then write a property name, a colon, and then the value for that property followed by a semicolon. You close off your list of properties for that selector by writing a closed curly bracket.
This is the syntax you must use when writing a selector. You can add more than one property for each selector, separated by a comma and the closed curly bracket, but you must stick to the syntax, or else your page will not be styled i.e. no decorations – just your written words with no color, font or alignment.
Simple selectors are the most basic form of selectors. They include:
the Type Selector,
the ID selector,
the Class Selector and
the Universal Selector.
The Type/Element Selector targets elements by their tag name. It is written in the HTML code on your document.
The Id Selector targets a unique element with a specific ID attribute. It is written with a hash (#) character followed by the id of the element [#idname]. You should use the ID selector for elements that appear once per page, like headers or footers.
The Class Selector targets elements by their class attribute. It is written with a period in front of the class name – .classname. It allows you to apply a style to different elements as long as they have the same class.
The Universal Selector targets all elements in an HTML document. The Universal Selector is useful when resetting browser defaults. It is represented by the character * in front of it.
The Group Selector selects all the HTML elements with the same definitions. It allows you to apply the same style rule to multiple elements, thus saving you time and space. In order to group selectors, you separate each selector with a comma.
Whichever selector you choose to style your page, it is added to your HTML document in one of three ways: Inline, Internal, or External. When adding HTML elements Inline you use the style attribute in the HTML element to add CSS. To add it Internal – you use the <style> tag inside the <head> tag in your HTML document. For external CSS, you add a link to it in the <head> section of each HTML page. The file cannot contain any HTML code and must be saved with a .css extension.
Simple selectors are powerful tools in CSS that allow you to target and style HTML elements and turn your ordinary layout into an extraordinary webpage. For additional information about CSS, CSS Selectors, or HTML, two useful resources are W3Schools https://www.w3schools.com and GeeksforGeeks https://www.geeksforgeeks.org/.
Happy Coding!