What is CSS?
CSS is a language used for specifying how documents are presented to users — how they are styled, laid out, etc.
- A document is usually a text file structured using a markup language — HTML is the most common markup language, but you will also come across other markup languages such as SVG or XML.
Presenting a document to a user means converting it into an usable form for your audience. Browsers like Firefox, Chrome or Internet Explorer are designed to present documents visually, for example on a computer screen, projector or printer.
How does CSS affect HTML?
Web browsers apply CSS rules to a document to change how it looks and feels.
A CSS rule is formed from:
* A set of properties, which have values set to update how the HTML content is displayed, for example I want my element’s width to be 50% of its parent element and its background to be red.
* A selector, which selects the element(s) you want to apply the updated property values to. For example, I want to apply my CSS rule to all the paragraphs in my HTML document.
* A set of CSS rules contained within a stylesheet determines how a webpage should look.
A CSS selector is the part of a CSS rule set that actually selects the content you want to style. It is the part of a CSS style call that identifies what part of the web page should be styled. The selector contains one ore more properties that define how the selected HTML will be styled.
Selectors are one of if not, the most important parts of CSS.
Let’s look at all the different kinds of selectors available, with a brief description of each:
|.class||.intro||Selects all elements with class=”intro”|
|#id||#firstname||Selects the element with id=”firstname”|
|*||*||Selects all elements|
|element||p||Selects all <p> elements|
|element,element||div, p||Selects all <div> elements and all <p> elements|
|element element||div p||Selects all <p> elements inside <div> elements|
|element>element||div > p||Selects all <p> elements where the parent is a <div> element|
|element+element||div + p||Selects all <p> elements that are placed immediately after <div> elements|
|element1~element2||p ~ ul||Selects every <ul> element that are preceded by a <p> element|
|[attribute]||[target]||Selects all elements with a target attribute|
|[attribute=value]||[target=_blank]||Selects all elements with target=”_blank”|
|[attribute~=value]||[title~=flower]||Selects all elements with a title attribute containing the word “flower”|
|[attribute|=value]||[lang|=en]||Selects all elements with a lang attribute value starting with “en”|
|[attribute^=value]||a[href^=”https”]||Selects every <a> element whose href attribute value begins with “https”|
|[attribute$=value]||a[href$=”.pdf”]||Selects every <a> element whose href attribute value ends with “.pdf”|
|[attribute*=value]||a[href*=”w3schools”]||Selects every <a> element whose href attribute value contains the substring “w3schools”|
|:active||a:active||Selects the active link|
|::after||p::after||Insert something after the content of each <p> element|
|::before||p::before||Insert something before the content of each <p> element|
|:checked||input:checked||Selects every checked <input> element|
|:disabled||input:disabled||Selects every disabled <input> element|
|:empty||p:empty||Selects every <p> element that has no children (including text nodes)|
|:enabled||input:enabled||Selects every enabled <input> element|
|:first-child||p:first-child||Selects every <p> element that is the first child of its parent|
|::first-letter||p::first-letter||Selects the first letter of every <p> element|
|::first-line||p::first-line||Selects the first line of every <p> element|
|:first-of-type||p:first-of-type||Selects every <p> element that is the first <p> element of its parent|
|:focus||input:focus||Selects the input element which has focus|
|:hover||a:hover||Selects links on mouse over|
|:in-range||input:in-range||Selects input elements with a value within a specified range|
|:invalid||input:invalid||Selects all input elements with an invalid value|
|:lang(language)||p:lang(it)||Selects every <p> element with a lang attribute equal to “it” (Italian)|
|:last-child||p:last-child||Selects every <p> element that is the last child of its parent|
|:last-of-type||p:last-of-type||Selects every <p> element that is the last <p> element of its parent|
|:link||a:link||Selects all unvisited links|
|:not(selector)||:not(p)||Selects every element that is not a <p> element|
|:nth-child(n)||p:nth-child(2)||Selects every <p> element that is the second child of its parent|
|:nth-last-child(n)||p:nth-last-child(2)||Selects every <p> element that is the second child of its parent, counting from the last child|
|:nth-last-of-type(n)||p:nth-last-of-type(2)||Selects every <p> element that is the second <p> element of its parent, counting from the last child|
|:nth-of-type(n)||p:nth-of-type(2)||Selects every <p> element that is the second <p> element of its parent|
|:only-of-type||p:only-of-type||Selects every <p> element that is the only <p> element of its parent|
|:only-child||p:only-child||Selects every <p> element that is the only child of its parent|
|:optional||input:optional||Selects input elements with no “required” attribute|
|:out-of-range||input:out-of-range||Selects input elements with a value outside a specified range|
|:read-only||input:read-only||Selects input elements with the “readonly” attribute specified|
|:read-write||input:read-write||Selects input elements with the “readonly” attribute NOT specified|
|:required||input:required||Selects input elements with the “required” attribute specified|
|:root||:root||Selects the document’s root element|
|::selection||::selection||Selects the portion of an element that is selected by a user|
|:target||#news:target||Selects the current active #news element (clicked on a URL containing that anchor name)|
|:valid||input:valid||Selects all input elements with a valid value|
|:visited||a:visited||Selects all visited links|