CSS
Styling organization
Inline
In any HTML tag in body, add for example <p style="color: blue; ...">text</p>
Head - Style with CSS Selectors
- head
- style
- h1 { - CSS Selectors: all h1 will be affected
- color: blue;
- }
- h1 { - CSS Selectors: all h1 will be affected
- style
- body
- element, like h1
External CSS stylesheet
In style.css:
body {
color: blue;
}
In head of html:
<link rel="stylesheet" href="style.css" />
Import
In CSS:
@import "relativepath.css";
And then override possible.
CSS Selector
ID - one specific element in the document
In CSS
#element-ID { ~ }
In html
id="element-ID"
One element can only have one ID
Classes
In CSS
.class-name { ~ }
In HTML
class="class-name"
or class="class1 class2"
Existing tags
In CSS file:
Full table here
Tag | Action |
---|---|
* {} | whole document |
h1, h2, p {} | every h1, h2, p |
ul > li {} | every li inside ul |
p + h2 {} | every h2 after a p |
[href] {} | every element with attribute href |
[title*="lem"] | every element with attribute title starting with lem |
li[title="lemons"] | every li element with attribute title:”lemons” |
input | every input |
input:checked | every element which is checked |
input[type="checbox"]:checked | every checkbox which is checked |
h2:hover | element which is under cursor |
ul > li:first-child ul > li:nth-last-child(3) | First child of each li inside ul 3 last child of each li inside ul |
Sizing
Tag | Action |
---|---|
100px | Fixed size in pixel |
80% | Relative to screen size |
2em | 2x~16px = double text size |
Styles
Font
Tag | Action |
---|---|
font-size: 20px | |
font-family: 'Courier' | define a font |
font-style: italic | |
font-variant: small-caps | |
font-weight: bold | |
text-shadow: 2px 3px 2px red | horizontal vertical blur color distance of shadow |
Color
Can use CSS name, #ffffff, rgb(0,0,0), hsl(0,0,0)
Tag | Action |
---|---|
color: blue | |
background-color: green | |
opacity: 0.5 | opacity of 50% |
Container arrangements
All classes display on W3Schools
Tag | Action |
---|---|
width: 100px | |
max-width: 500px | |
box-shadow: 5px 5px 5px grey | horizontal vertical blur color distance of shadow |
border: 1px solid black | width style color |
border-radius: 5px | Circular borders |
Padding - spacing inside the element
Tag | Action |
---|---|
padding: 10px | |
padding-top: 50px | also -bottom -left -right |
padding: 50px 10px 50px 10px | Clockwise: top, right bottom, left |
Margin - spacing outside the element
Tag | Action |
---|---|
margin: 25px | |
margin:-10px | Negative |
margin-top: 10px | also -bottom -left -right |
margin: 50px 10px 50px 10px | Clockwise: top, right, bottom, left |
Float - put elements on the side
Tag | Action |
---|---|
float: none | |
float: left | element on the left side, other content will be on the right |
float: right | inverse |
Display - how elements are displayed
Tag | Action |
---|---|
display: none | does not render the block |
display: block | takes all the width of the page - by default |
display: inline | takes only space needed - like span |
Positions
Static - follow definition in document
Relative - relative where it should be
Tag | Action |
---|---|
position: relative | |
top: 20px | position it 20px away from it should be also bottom left right |
Absolute - relative to the parent container
Tag | Action |
---|---|
position: absolute | |
top: 0px | position it at 0px relative to the parent container (or document) also bottom left right |
Fixed - relative to the viewport
viewport = the browser window viewport = the browser window
Tag | Action |
---|---|
position: fixed | |
top: 0px | keep the element at the top also bottom left right |
Flexbox - Grid layout
In CSS:
.flex-container {
display: flex; | Activate flexbox
flex-direction: row | Stacks box in a row
row-reverse | ... in reverse order
column | ... in column
justify-content: flex-start | Side box on the left
flex-end | ... on the right
center | ... on the center
space-between/around | ... with space between/around box
flex-wrap: wrap | Line wrap according to screen size
wrap-reverse
no-wrap
align-items: flex-end | Align items at the bottom
center | ... at the center
align-content: flex-start | Hold items on the top
center
space-center/between | ... with space around or between
}
In HTML:
div class="flex-container container"
div class="box flex-item"
- h1:1
style="align-self: center"
: Center this element
Animations
Direct transition:
@keyframes change-color {
from {color: blue;}
to {color: red;}
}
Transition with steps and with position change:
@keyframes change-color {
0% {color: blue; top:10px}
10% {color: green; top:20px}
100%{color: red; top:30px}
}
.box-animation {
animation-name: change-color | define the animation to use
animation-duration: 4s
animation-iteration-count: infinite | infinite animation
3 | 3 animations
position: relative
}
.box-anim:hover {}
: Selector possible
Reference
- CSS - Style Your Website, Tutorial by Mike Dane
- Flexbox Cheatsheetby Joni Bologna