CheatsheetCSS
CSS (Cascading Style Sheets) is a programming language used to style and format HTML documents. It is used to control the layout, typography, colors, and other visual aspects of a web page. CSS works by targeting specific HTML elements in a document and applying style rules to those elements. With CSS, web developers can create visually appealing and engaging websites that are easy to navigate and interact with. CSS can be written inline, in a separate file, or in a style block within an HTML document. It is a critical tool for web developers and designers, as it allows them to create consistent and professional-looking websites.
Basic Usage
Adding CSS to your document
CSS can be directly added in an html page using the <style>...</style> tag or an external file. To link an external file called styles.css to the page index.html, add the following line somewhere inside the <head> of the HTML document:
<link rel="stylesheet" href="styles.css" />
Adding a class
To apply a css style to a particular HTML element, specify one or several class names in the class attribute of the HTML element. In the file styles.css, define the style of the class name special by creating a selector that starts with . and by adding some css attributes.
<ul>
<li>Item one</li>
<li class="special">Item two</li> // 'Item two' will be stylized
<li>Item <em>three</em></li>
</ul>
.special {
color: orange;
font-weight: bold;
}
Styling things based on their location in a document
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item <em>three</em></li> // 'three' will be stylized
</ul>
li em {
color: rebeccapurple;
}
Styling things based on state
a:link {
color: purple;
}
a:visited {
color: green;
}
a:hover {
color: orange;
}
Selectors & combinators
/* selects any <span> that is inside a <p>, which is inside an <article> */
article p span {
}
/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1> */
h1 + ul + p {
}
SASS
Variables
Sass uses the $ symbol to define a variable.
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Nesting
Sass let you nest your CSS selectors in a way that follows the same visual hierarchy of your .html. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
Partials/Modules
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule.
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
@use 'base'
.inverse
background-color: base.$primary-color
color: white
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
.inverse {
background-color: #333;
color: white;
}
Mixins
@mixin theme($theme: DarkGray)
background: $theme
box-shadow: 0 0 1px rgba($theme, .25)
color: #fff
.info
@include theme
.alert
@include theme($theme: DarkRed)
.success
@include theme($theme: DarkGreen)
.info {
background: DarkGray;
box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
color: #fff;
}
.alert {
background: DarkRed;
box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
color: #fff;
}
.success {
background: DarkGreen;
box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
color: #fff;
}
Extend/Inheritance
Using @extend lets you share a set of CSS properties from one selector to another.
/* This CSS will print because %message-shared is extended. */
%message-shared
border: 1px solid #ccc
padding: 10px
color: #333
// This CSS won't print because %equal-heights is never extended.
%equal-heights
display: flex
flex-wrap: wrap
.message
@extend %message-shared
.success
@extend %message-shared
border-color: green
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}