CSS History – A Brief Overview

Before Cascading Style Sheets (CSS) there was very little that could be done to change the design of a web page. While Hyper Text Markup Language (HTML) creates documents for the World Wide Web, it was specifically designed to hold the content of a web page. Housed in a separate file, CSS adds the style and design [ ...] [ ...]

Types of Selectors in CSS

Selectors can be grouped into four basic types: simple, compound, combinator, and complex. Simple selectors are the oldest form of CSS selector, and may be the type used most often. Simple selectors specify a single condition for matching elements. The universal selector ( * ) is a simple selector. So are type (or element) selectors [ ...] [ ...]

Combinators in CSS

As we saw above, a combinator is a character sequence that expresses a relationship between the selectors on either side of it. Using a combinator creates a complex selector. Using complex selectors can, in some cases, be the most concise way to define styles. In the previous section, we listed the four combinators: descendant (via [ ...] [ ...]

Attribute Selectors in CSS

Introduced with the CSS Level 2 Specification, attribute selectors make it possible to style elements based on the presence of an attribute, such as [controls] for a media player, or [disabled] for a form field. You can also use attribute selectors to match elements based on the presence of an attribute and its value. For [ ...] [ ...]

Pseudo-classes and Pseudo-elements in CSS

Most of the new selectors added in CSS3 and CSS4 are not attribute selectors at all. They’re pseudo-classes and pseudo-elements. Though you’ve probably used pseudo-classes and pseudo-elements in your CSS, you may not have thought about what they are or how they differ from each other. Pseudo-classes let us style objects based on information-such as [ ...] [ ...]

Pseudo-elements in CSS: ::before and ::after

The CSS Pseudo-elements Module Level 4 specification clarifies behavior for existing pseudo-elements and defines several new ones. We’ll focus on the ones that currently have browser support: ::after inserts additional generated content after the content of an element : -.before inserts additional generated content before the content of an element ::first-Letter selects the first letter [ ...] [ ...]

Pseudo-elements in CSS: Creating Typographic Effects with ::first-letter

While the ::before and ::after pseudo-elements inject content, ::first-letter works with content that exists as part of the document source. With ::first-letter , we can create initial letter effects, such as drop caps, as you might see in a magazine or book layout. This CSS snippet adds an initial capital letter to every <p> element [ ...] [ ...]

Pseudo-elements in CSS: Creating Typographic Effects with ::first-line

The ::first-Line pseudo-element works similarly to ::first-Letter , but affects the entire first line of an element. For example, the first line of every paragraph could have larger text and a different color from the rest of the paragraph: p::first-line { font: bold 1.5em serif; font-style: italic; color: #673ab7; } You can see the result [ ...] [ ...]

Pseudo-elements in CSS: Custom List and Summary Icons with ::marker

::marker is a pseudo-element that represents a bullet or number indicator of elements with a display value of list-item . In most current browser versions, the default user-agent stylesheet applies display: list-item to <li> and <summary> elements. Any element with a list-item display value will generate a marker box that can be selected and styled [ ...] [ ...]

Pseudo-elements in CSS: Styling Input – placeholder Values

Text-based form inputs have a pLacehoLder attribute that lets us add a hint about what kind of data the field expects: <form> <p> <label for=”subscriber_email”>Your email address</label> <input type=”email” name=”subscriber_email” id=”subscriber_email” →placeholder=”yourname@example.com”> </p> </form> Most browsers display the value of the placeholder attribute within the form control as black text with a reduced opacity, as [ ...] [ ...]

Pseudo- classes in CSS: Highlighting Page Fragments with :target

A fragment identifier is the part of a URL starting with a # character-such as #top or #footnote1 . You may have used them to create in-page navigation links-sometimes called  “jump links”. With the :target pseudo-class, we can highlight the portion of the document that corresponds to that fragment. Say, for example, you have a [ ...] [ ...]

Pseudo- classes in CSS: Styling Elements That Have No Children Using :empty

Sometimes WYSIWYG (what you see is what you get) editors add empty <p> elements to your content. These empty elements may affect your document layout if your stylesheet also uses p as a type selector. It’s possible to visually exclude these elements, however, with the :empty pseudo-class: p:empty { display: none; } Earlier versions of [ ...] [ ...]

Pseudo- classes in CSS: Concise and Resilient Selectors with :is()

The :is() pseudo-class is one of three logical pseudo-classes available in CSS—the other two being :not() and :where() (which we’ll discuss in the next sections). You can use :is() to create more concise and resilient selectors. It’s a functional pseudo­class that accepts a selector list as its argument. Here’s an example: article :is( hi, h2, [ ...] [ ...]

Pseudo- classes in CSS: Negating Selectors with :not()

The :not() pseudo-class is the opposite of :is() . It returns all elements except for those that match the selector argument. For example, p:not(.message) matches every <p> element that doesn’t have a class of message . Here’s an example of a form that uses textual input types and radio buttons: form method=”post” action=”#”> <h1>Join the [ ...] [ ...]

Pseudo- classes in CSS: Adjusting Selector Specificity with :where()

The CSS Selectors Level 4 specification calls :where() the “specificity-adjustment pseudo­class”. It’s also a functional pseudo-class that accepts a selector or a selector list as its argument. Using :where() limits the impact of a selector’s specificity without changing it. Consider this CSS snippet: a:not( :hover ) { /* Specificity of 0,1,1 */ text-decoration: underline 2px; [ ...] [ ...]

Pseudo- classes in CSS: Selecting Elements by Their Index

CSS also provides selectors for matching elements based on their position in the document subtree. These are known as child-indexed pseudo-classes, because they rely on the position or order of the element rather than its type, attributes, or ID. There are five: :first-chiLd :Last-child :onLy-chiLd :nth-chiLd() :nth-Last-chiLd() :first-child and :last-child As you’ve probably guessed from [ ...] [ ...]

Pseudo- classes in CSS: Selecting Elements of a Particular Type by Their Index

The pseudo-classes discussed in the previous section match elements if they occupy the given position in a document subtree. For instance, p:nth-Last-chiLd(2) selects every <p> element that’s the next-to-last element of its parent. In this section, we’ll discuss typed child-indexed pseudo-classes. These pseudo-classes also match elements based on the value of their indexes, but matches [ ...] [ ...]

Pseudo- classes in CSS: Styling Form Fields Based on Input

Let’s take a look at some pseudo-classes that are specific to form fields and form field input. These pseudo-classes can be used to style fields based on the validity of user input, whether the field is required or currently enabled. All of the pseudo-classes that follow are specific to forms. As a result, there’s less [ ...] [ ...]

File Organization in CSS

Part of a good CSS architecture is file organization. A monolithic file is fine for solo developers or small projects. For large projects—sites with multiple layouts and content types—it’s smarter to use a modular approach and split your CSS across multiple files. Splitting your CSS across files makes it easier to parcel tasks out to [ ...] [ ...]

Specificity in CSS

Developers who come to CSS from more traditional programming languages sometimes note that CSS has a global scope. In other words, using button as a selector applies those declarations to every <button> element, whether that was intended or not. The “global” nature of CSS is really an issue of specificity and the cascade in Cascading [ ...] [ ...]