Skip to content

Instantly share code, notes, and snippets.

@maestrow

maestrow/css-cheatsheet.md

Last active April 19, 2018 21:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save maestrow/9d302c2c64cbeda32119 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save maestrow/9d302c2c64cbeda32119 to your computer and use it in GitHub Desktop.
Download ZIP
Css Cheat Sheet
Raw
css-cheatsheet.md

Resources

Adding CSS

External link (good DRY way):

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

In the head:

<head>
  <style>
    h1 {color: red; }
  </style
</head>

Inline style attribute: <h1 style="color: red;">Learning CSS</h1>

Applying and priority

  1. External link
  2. In the head
  3. Inline style attribute
  4. Using !important (ex background: #e0e2e6 !important;)

If we have same selectors:

.intro { 
  width: 900px;
  color: black; 
}
.intro { 
  color: red;          /* last definition overrides previous */
  margin-bottom: 5px;  /* non-conflicting properties will be combined */
}

Result:

  width: 900px;
  color: red;
  margin-bottom: 5px;

Selectors

Sample: <h1 id="main" class="article home"></h1>

element h1 { ... } class .article { ... } ID #main { ... } combined h1#main.article.home { ... } grouping h1, h2, p { ... } universal selector *: *.warning and .warning are equal

Attribute selector:

  • [attr]
  • [attr=value]
  • span[lang~="en-us"] <span lang="en-us en-gb en-au en-nz">
  • span[lang|="zh"] <span lang="zh-CN">世界您好</span>
  • a[href^="#"] all internal links
  • a[href$=".cn"] <a href="http://example.cn">Chinese</a>
  • a[href*="example"] all links to with "example" in the url

Combinations:

  • adjacent sibling li:first-of-type + li
  • general sibling p ~ span
  • direct children div > span
  • descendant div span matches <div><p><span>...</span></p></div>

Pseudo-elements: ::after, ::before, ::first-letter, ::first-line, ::selection

Pseudo-classes:

  • a :link, :visited, :hover, :active
  • :not ex: div:not(.outer)

@-rules

@charset, @import, @media, @supports

Counters

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

Properties

  • float: left | right | none

Visibility & Display

  • visibility: hidden
  • display: inline | block | none | ...

Box model

content - padding - border - margin

  • width, height, padding, border, margin, outline
  • overflow

Positioning

  • position:
    • static - by default - normal flow of the page
    • fixed - positioned relative to the browser window
    • relative to its normal position
    • absolute relative to the first parent element that has a position other than static
  • top, bottom, left, right

Floating

  • float: right | left
  • clear: none | left | right | both
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment