Selectors
CSS, or Cascading Style Sheets, is a language that is used in combination with HTML that customizes how HTML elements will appear. CSS can define styles and change the layout and design of a sheet.
Common Selectors
| Name | Type | Description | Example |
|---|---|---|---|
| element | Type | CSS type selectors are used to match all elements of a given type or tag name. When using type selectors, elements are matched regardless of their nesting level in the HTML. | h1 { css properties } |
| .class | Class | The CSS class selector matches elements based on the contents of their class attribute. For selecting elements a '.' needs to be prepended. | .container { css properties } |
| #id | Id | The CSS ID selector matches elements based on the contents of their id attribute. The values of id attribute should be unique in the entire DOM. For selecting the element a '#' needs to be prepended. | #button { css properties } |
| * | Universal | As the name suggests, Universal Selector in CSS is used to select all the elements on the HTML page. It's useful for resetting paddings and margins, and adjusting the box model. | * { css properties } |
| element[attr.] | Attribute | The CSS attribute selector matches elements based on the presence or value of a given attribute. | a[href="#"] { css properties } |
Selector Specificity
Specificity is a ranking system that is used when there are multiple conflicting property values that point to the same element. When determining which rule to apply, the selector with the highest specificity wins out. The most specific selector type is the ID selector, followed by class selectors, followed by type selectors. In this example, only color: blue will be implemented as it has an ID selector whereas color: red has a type selector.
Combinators & Intermediate Selectors
| Name | Type | Description | Example |
|---|---|---|---|
| element.class | Chain | CSS selectors can be chained so that rule sets apply only to elements that match all criteria. For instance, to select <h3> elements that also have the 'section-heading' class, the selector h3.section-heading can be used. | h3.section-heading { css properties } |
| element element | Descendant | Is used to match elements that are descended from another matched selector. They are denoted by a single space between each selector and the descended selector. All matching elements are selected regardless of the nesting level in the HTML. | div p { css properties } |
| element, element |
Group | Match multiple selectors to the same CSS rule, using a comma-separated list. In this example, the properties for both h1 and h2 will be modified. | h1,h2 { css properties } |
| element > element | Child | The child selector in CSS is used to select elements in a webpage that are the direct children of a specified element. | div > h1 { css properties } |
Common Properties
| Name | Description | Example |
|---|---|---|
| color | Color name keywords can be used to set color property values for elements in CSS. | h1 { color: goldenrod; } |
| background-color | Controls the background color of elements. | div { background-color: lightgreen; } |
| background-image | sets the background image of an element. An image URL should be provided in the syntax url("#") as the value of the property. | body { background-image: url("#"); } |
| width | The width property in CSS specifies the width of the element's content area. This “content” area is the portion inside the padding, border, and margin of an element (the Box Model). | div { width: 600px; } |
| height | Same as width, the height property in CSS specifies the height of the element's content area. | img[src="#"] { css properties } |
Typography
| Name | Description | Example |
|---|---|---|
| font-family | Is used to specify the typeface in a rule set. Fonts must be available to the browser to display correctly, either on the computer or linked as a web font. If a font value is not available, browsers will display their default font. When using a multi-word font name, it is best practice to wrap them in quotes. | h1 { font-family: Helvetica; } |
| font-size | Is used to set text sizes. Font size values can be many different units or types such as pixels. | p { font-size: 16px; } |
| font-weight | Can be used to set the weight (boldness) of text. The provided value can be a keyword such as bold or normal. | h2 { font-weight: bold; } |
| text-align | Can be used to set the text alignment of inline contents. This property can be set to these values: left, right, center, or justify. | p { text-align: center; } |
| font-style | determines the font style in which text will appear. It accepts italic as a value to set the font style to italic. | .quote { font-style: italic; } |
The Box Model
The CSS box model is a container that contains multiple properties including borders, margins, padding, and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. The web browser renders every element as a rectangular box according to the CSS box model.
| Name | Description | Example |
|---|---|---|
| padding | Defines the innermost portion of the box model, creating space around an element's content, inside of any defined margins and/or borders.Padding values are set using lengths or percentages, and cannot accept negative values. We can set the different sizes of margins for individual sides with padding-top, padding-right, padding-bottom, and padding-left. | header { padding: 10px; } |
| border | The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. We can set the different values of borders for individual sides with border-top, border-right, border-bottom, and border-left. | nav { border: 1px solid black; } |
| margin | The margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders. Margins are set using lengths, percentages, or the keyword auto and can have negative values. We can set the different sizes of margins for individual sides with margin-top, margin-right, margin-bottom, and margin-left. | h2 { margin: 20px; } |
| overflow | If content is too large for its container, the CSS overflow property will determine how the browser handles the problem. It can be set to hidden, or to scroll, which will make the overflowing content accessible via scroll bars within the original container. | p { text-align: center; } |
| box-sizing | Controls which aspect of the box is determined by the height and width properties. The default value of this property is content-box, which renders the actual size of the element including the content box; but not the paddings and borders. The value border-box corresponds directly to the element's total rendered size, including padding and border with the height and width properties. | * { box-sizing: border-box; } |
Positioning
| Name | Description | Example |
|---|---|---|
| display | Determines the type of render block for an element. The most common values for this property are block, inline, and inline-block.
Block-level elements take up the full width of their container with line breaks before and after, and can have their height and width manually adjusted. Inline elements take up as little space as possible, flow horizontally, and cannot have their width or height manually adjusted. Inline-block elements can appear next to each other, and can have their width and height manually adjusted. |
li { display: inline-block; } |
| position | The position property can help you manipulate the location of an element. Check the values below for more details. | |
| relative | Enables an element to be positioned relative to where it would have originally been on a web page. The offset properties (top, right, bottom, left) can be used to determine the actual position of the element relative to its original position. | div { position: relative; top: 15px; } |
| absolute | Enables an element to ignore sibling elements and instead be positioned relative to its closest parent element that is positioned with relative or absolute. The absolute value removes an element entirely from the document flow. | ul { position: absolute; left: 20px; bottom: 50px; } |
| fixed | When the CSS position has a value of fixed, it is set/pinned to a specific spot on a page. The fixed element stays the same regardless of scrolling. The navigation bar is a great example of an element that is often set to position: fixed;, enabling the user to scroll through the web page and still access the navigation bar. | nav { position: fixed; top: 0; } |
| sticky | The element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick. | .scroll-up { position: sticky; right: 10; } |
| z-index | Specifies how far back or how far forward an element will appear on a web page when it overlaps other elements. The z-index property uses integer values, which can be positive or negative values. The element with the highest value will be at the foreground, while the element with the lowest value will be at the back. | div { z-index: 1; } |
| float | Determines how far left or how far right an element should float within its parent element. The value left floats an element to the left side of its container and the value right floats an element to the right side of its container. For the property float, the width of the container must be specified or the element will assume the full width of its containing element. | img { float: right; } |
| clear | Specifies how an element should behave when it bumps into another element within the same containing element. The clear is usually used in combination with elements having the CSS float property. This determines on which sides floating elements are allowed to float. | img { clear: left; } |