Css Selectors Cheat Sheet

 



  • A CSS rule set contains one or more selectors and one or more declarations. The selector(s), which in this example is h1, points to an HTML element. The declaration(s), which in this example are color: blue and text-align: center style the element with a property and value. The rule set is the main building block of a CSS sheet.
  • CSS Cheat Sheet contains the most common style snippets: CSS gradient, background, button, font-family, border, radius, box and text shadow generators, color picker and more. All these and other useful web designer tools can be found on a single page.
  • Since CSS has so many selectors and declarations that might be hard to remember, we’ve put together a complete CSS and CSS3 Cheat Sheet to help you master the language. Download CSS Cheat Sheet in.pdf. Download CSS Cheat Sheet in.jpg. Once you’ve downloaded the CSS Cheat Sheet, save the file to your device or print one out.
  • The result is a printable CSS 3 scrib sheet, created and released exclusively for the readers of Smashing Magazine. Thank you for your great work, Chris Hanscom! In this post we present a printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the.
  1. Css Code Cheat Sheet
  2. The Ultimate Css Selectors Cheat Sheet Pdf
  3. Css Selectors Cheat Sheet Pdf
  4. Css Selectors Cheat Sheet Free
  5. Css Style Cheat Sheet
  6. Css Selectors Cheat Sheet

Selector Types 23 Outline 25 WebsiteSetup.org - Beginner’s CSS Cheat Sheet 1. 3D / 2D Transform 25 Generated Content 26 Line Box 28 Hyperlink 31 Positioning 31 Ruby 32. Beginner’s CSS Cheat Sheet 20. Pseudo-Element::first-letter Adds special style to the first letter of a text::first-line.

What is CSS?

CSS is a foundational element of the Internet. CSS stands for Cascading Style Sheets. It was created in 1994 by Håkon Wium Lie during the early days of the modern World Wide Web. The “style” term in the acronym gives the one-word explanation of what CSS is. The coding language specifies the style and design elements of a website.

CSS is distinct from HTML (Hyper Text Markup Language), which specifies the content. Separating the style from the content allows website developers to better manage websites. HTML elements could be styled in-line in the early days of the Internet. Many browsers still support some HTML attributes for style, which mimic CSS.

For example, to make an item bold in CSS, the code used is font-weight: bold;. the code used in HTML is strong. The best practice for coding is to use CSS for styling and not use any in-line HTML styles.

One advantage of using CSS is that the design style can be separated from the in-line, on-page code. This means that developers can edit the text in one location and the changes will be reflected across the website.

This benefit is realized if the developers specifies the names of CSS Classes and IDs in the code on the page. In conjunction the developer writes the CSS code to style elements in an external CSS file. Which will be placed in the head of your document.

With CSS code, all sorts of element design parameters can be specified. The color, size, spacing alignment, and other characteristics of blocks of text, images, and many other elements can be controlled. Modern CSS continues to evolve to give developers more and more control and creativity with design. The latest set of guidelines being developed is CSS3.

CSS Selectors

CSS Selectors are the foundation of using CSS. You use selectors to target specific elements that you want to style. Below is how the syntax works.

Xpath css selector cheat sheet

Descendant

Selects all li within an unordered list ul

Css
  • ul li

Adjacent

Selects all p elements that are placed immediately after ul elements

  • ul + p

Direct children

Selects all a elements where the parent is a p element

  • p > a

Sibling combinator

Selects every a element that are preceded by a p element

  • p ~ a

Attributes

Selects all elements with a target attribute

  • a[target]

Backgrounds

Property

Values

background

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

background (shorthand)

background: bg-color bg-image [position/bg-size] [bg-repeat] [bg-origin] [bg-clip] [bg-attachment] [initial|inherit];

Example

Property

Values

background-position

  • top left
  • top center
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
  • x-%
  • y-%
  • x-pos
  • y-pos

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Css Selectors Cheat Sheet

Borders

Property

Values

border (shorthand)

border: width style color;

Example

Property

Values

border-style

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • dashed
  • ridge
  • inset
  • outset

Property

Values

border-bottom

  • border-bottom-width
  • border-style
  • border-color

border-left

  • border-left-width
  • border-style
  • border-color

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

border-top

  • border-top-width
  • border-style
  • border-color

Property

Values

Property

Values

Property

Values

Property

Values

border-right

  • border-top-width
  • border-style
  • border-color

border-radius

  • border-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • border-top-left-radius

Property

Values

Property

Values

Box Model

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

margin

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

margin (shorthand)

margin: top right bottom left;

Example

Property

Values

Property

Values

Property

Values

Property

Values

padding

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

padding (shorthand)

padding: top right bottom left;

Example

Property

Values

Property

Values

Property

Values

Property

Values

display

  • inline
  • inline-block
  • block
  • flex
  • inline-flex
  • grid
  • inline-grid
  • table
  • none
  • initial
  • inherit

Property

Values

Property

Values

Property

Values

Property

Values

Text

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

text-decoration

  • none
  • underline
  • overline
  • line-thorugh
  • blink

Property

Values

word-break

  • normal
  • keep-all
  • loose
  • break-strict
  • break-all

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Font

Property

Values

font

  • font-style
  • font-weight
  • font-size/line-height
  • font-family

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

font-weight

  • lighter
  • normal
  • bold
  • bolder
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • inherit

Lists

list-style

Css selectors cheat sheet example
  • list-style-type
  • list-style-position
  • list-style-image

These are just a few. To see all list style types visit w3schools.

Property

Values

Colors

Property

Values

Tables

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Animations

Property

Values

animation

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

Property

Values

Property

Values

Property

Values

animation-timing-function

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-Bezier

Css Code Cheat Sheet

Property

Values

Transitions

Property

Values

transition

  • transition-property
  • transition-duration
  • transition-duration
  • transition-timing-function
  • transition-delay

Property

Values

Property

Values

Property

Values

The Ultimate Css Selectors Cheat Sheet Pdf

transition-timing-function

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubicBezier

Recieve resources directly to your inbox

Sign up to get weekly insights & inspiration in your inbox.

Please enable JavaScript to view the comments powered by Disqus.

Introduction: : CSS Selectors help to select HTML elements (ex: DIV, P, H1) to apply styles. Here different CSS selectors are explained with examples and DOM tree.

Selects all child elements under the parent element. Here style is applied to every element under the parent element. Its weight is more and to be used with care.

Above example sets text color red and background color green to all elements inside the body(parent) element.

2. Class Selector

Selects specified CSS class applied elements on the page. CSS class selector name starts with “.” followed by name.

Above example,

  • Sets text color green to CSS class “.heading” applied H1 element.
  • Sets text color red to CSS class “.firstItem” applied two P elements.

3. ID Selector

Cheat

Selects element which has a specified ID name. CSS ID selector name starts with “#” followed by name.

Note: ID name to be unique in a web page.

Above example,

  • Sets text color green to element with ID “headerElement”.
  • Sets text color red to element with ID “firstElement”.

Css Selectors Cheat Sheet Pdf

4. Element Selector

Selects elements based on element type.

Above example sets font weight bold to all P elements on the page.

5. Descendant Selector

Css Selectors Cheat Sheet Free

Selects all specified descendant child elements under the parent element.

Css Style Cheat Sheet

Above example sets font background color green to all decedent P child elements under the DIV parent element (<div>).

6. Child Selector

Selects all specified immediate child elements under the parent element.

Above example sets font background color green to immediate P child elements under the DIV parent element (<div>).

7. Adjacent Sibling Selector

Selects specified elements which are immediate to an adjacent element.

Css Selectors Cheat Sheet

Above example sets text color light green to P element which is next to DIV element with ID “divb” (<div>).

8. General Sibling Selector

Selects all specified elements which are siblings to an adjacent element.

Above example sets text color light green to all sibling P elements to DIV element with ID “divb” (<div>).

Note: 1) Using Document Object Model (DOM) tree, CSS selectors are explained. 2) Selected elements are marked (node border color is changed) and styled in the DOM tree. 3) Use CSS Attribute Selectors link to get details about different CSS attribute selectors.

CSS Selectors cheat sheet


Different CSS selectors combinations cheat sheet


Following table gives CSS code and list of CSS selectors used in the code.

CSSSelectors used
  • ID Selector (#d1)
  • Element Selector (div, p)
  • Child Selector (#d1 > div, div > p)
  • ID Selector (#d1)
  • Element Selector (div, p)
  • Descendant Selector (#d1 div, div p)
  • ID Selector (#d1)
  • Element Selector (div, p)
  • Child Selector (#d1 > div, div > div)
  • Descendant Selector (div p)
  • Element Selector (p,div)
  • Adjacent Sibling Selector (p + div)
  • Child Selector(div > p)
  • Element Selector (p, div)
  • Adjacent Sibling Selector (p + div)
  • Descendant Selector (div p)
  • ID Selector (#d11)
  • Class Selector (.childcntl)
  • ID Selector (#d1, #d11)
  • Child Selector (#d1 > p, #d11 > p)
  • ID Selector (#d11)
  • Class Selector (.childcntl)
  • Adjacent Sibling Selector (#d11 + .childcntl)

Related selectors are explained using following links.