CSS Cheatsheet Introduction
CSS stands for Cascading Style Sheet. CSS converts boring HTML page into beautiful/aesthetic website. This basically describes the presentation of a web-page which includes color, fonts and alignment of text. It can help us adapt presentation to different types of devices, which we can “responsiveness of a websites”.
There are three ways to add CSS to HTML.
- 1- <style> tag ---- Adding <style> … </style> to HTML.
- 2- Inline CSS ---- Adding CSS using style attribute.
- 3- External CSS ---- Adding a stylesheet (.css) to html using <link> tag.
CSS Selectors
A CSS selector is used to select an HTML elements for styling.
body{
color: red; This is declaration – (property:value)
background: pink;
}
Note: ‘body’ is a selector.
Element Selectors
It is used to select an element based upon the tag name.
h2{
color: blue;
}
Id Selectors
It is used to select an element with the Id.
#first{
color: white;
background: black;
}
Note: # is used to target by Id.
Class Selectors
It is used to select an element with a given class for example:
.red{
Background: red;
}
We can group selectors like this:
h1, h2, h3, h4 div{
color: blue; h1, h2, h3, h4 and div will be blue.
}
* is the universal selector. Which means this will select all the elements.
Colors & Backgrounds
The Color Property
The color property can be used to set the text color inside an element.
RGB – Specifies color using Red, Green, Blue values rgb(200, 98, 70)
HEX – Specifies the color using hex code (#123333)
HSL – Specifies the color using HSL (hue, saturation and lightning) (22, 90%, 22%)
The background-size properties
Cover – Firs and no empty space is left.
Auto – Display in original size.
Contain – Fits & image is fully visible.
Width – You can also specify the width manually.
Background image
Used to set an image as the background.
body{
background-image: url(“lecturely.png)
}
This will set background image.
Background size
It can be auto, cover or you can manually give the size in px.
Note: Cover means image will cover the entire div.
Background repeat
This CSS property will repeat the image in image depending on the property value.
Borders
Border width
This will describe border’s width.
Border-style
This will style the border i.e. dotted, solid or none.
Border-color
This will change the border color.
Box Model
Height
This will set the height.
max-height.
This will set the maximum height.
max-width
This will set the maximum width.
min-height
This will set the minimum height.
min-width
This will set the minimum width.
Padding
Padding-bottom
Sets the bottom padding.
Padding-top
Sets the top padding.
Padding-right
Sets the bottom padding.
Padding-left
Sets the left padding.
Overflow-x
This will make this overflow based on its values.
Visibility
This will deal with the visibility of the text.
List & Markers
list-style-none
This will style your list, can be none or asterisk based on its value.
list-style-image
Instead of asterisk, you can also set an image using this CSS property.
Animations
animation-name
This will set the animation name.
animation-duration
used to set animation time.
animation-timing-function
This will set the animation, like transition and effect of animation. Either can be ease, or ease-in based on its value.
animation-delay
This will set the amount of time to wait before applying the animation.
animation-play-state
This will either be paused or running the animation.
Pseudo-Class
:active
It is the active element.
:focus
It is the element in focus.
:link
It is the unvisited link.
:enabled
It is an element which is enabled.
:active
It is an element which is disabled.
:hover
It is an element when you hover your mouse over it.
:checked
When the element is checked.
:nth-of-type(n)
The element which is nth sibling.
:nth-last-child(n)
It is the element which is the nth sibling counting from the last sibling.
:first-child
first sibling.
:last-child
Last sibling.
:first-of-type
First sibling of its type.
:last-of-type
This is the last sibling of its type.
:empty
Element with no children.
:root
This is the root element of the document.
::first-letter
This adds special style to the first letter of an text.
::first-line
This adds special style to the first line of any text.
::before
This inserts some content before an element.
::after
This inserts some content after an element.
Relative Measurements OR CSS Units
px
(pixels) This is the pixel of the device.
gd
It is grid defined by layout-grid
em
This is the font-size of current element.
rem
font size of root element.
vh
This is the viewport height.
vw
This is the viewport width.
Download your free Ebook
Download a free copy of our newest E-book on "Metadata HTML Elements".
Awesome!
Download a free copy of our newest E-book on "Metadata HTML Elements".