Css Cheat Sheet

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

External link
In the head
Inline style attribute
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

maestrow/css-cheatsheet.md