Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Notes collected from FreeCodeCamp.org YT tutorial at https://www.youtube.com/watch?v=1Rs2ND1ryYc&t=8170s
										DRAFT

CSS Cheatsheet and notes

This is a collection of notes that I took from a 6-hour YouTube tutorial posted by FreeCodeCamp.org. It's based out of Jad Khalili's Udemy Course CSS-From Zero to Hero.

Cascading Style Sheets

  • A language used to style and design to websites
  • Goes hand in hand with HTML.
  • A standard maintained by W3C

Selectors

A way to grab part of HTML and manipulate them for styling * element is the simplest * class - add a classname - add to any element (to use in css, prefix . symbol). Use dashes to separate words, short words as per convention. * id selector - give an id name (prefix # symbol to use in css)

Specificity

The more specific the selector, the more powerful it is. I.e. the more chances of it getting applied

The sequence of specificity is => inline style > id selector > class > element

pseudo-selectors

selector: eg. h2:hover

Some other pseudo-selectors are: hover, first-child, last-child, nth-child(n), only-child, link, visited,

Advanced selectors:

They are lower than pseudoselectors for specificity. Some examples:

  • adjacent sibling using + (eg. h2 + a -> all anchor tags after h2)
  • general sibling combinator using ~ ( eg. textarea ~ button - > they have to follow each other in same parent)
  • child selector using > (eg. ul > li => Every li inside a ul)

Attribute selectors:

using [attr=value]

Use [attr^=value] for 'starts with' (This is like regex)

Another e.g. [attr*=value]

Use quotes if the actual attribute in a tag uses it.

You can add multiple selectors to an html tag.

Properties

The element of style that is being manipulated 2 components - actual property itself, and the value property : value ;

CSS block - A collection of properties

selector {
	property1 : value1 ;
	property2 : value2 ;
}

Coloring

hexcode uses - 3 pairs of hexcodes - each pair representing r, g and b ff 255 at the rightmost pair - blue

convention - element selectors should be at the top

background: red; (instead of background-color)

functions in css: some examples: More to follow: rgb, url("")

Background properties

background: url("link\to\image")
background-color can be used for color and background-img for image but background covers both thus the better choice
background-repeat: no-repeat; (repeat is default, image would be tiled)	
background-size: 50px 100px (set to a particular size)
background-size: cover; (Cover the entire element's background so depends on parent element)
background-size: contain; (Use original size and leave the rest empty)

Opacity properties

use rgba function which is similar to rgb() function but uses a fourth parameter - opacity (0 - 1) eg. rgba(204, 229, 255, 0.4) for 40% opacity ("a" stands for alpha. It is also known as opacity, transparency)

Gradients properties

2 types of gradients - radial and linear radial means outwards (or inwards?) and linear means top-down, left-right, diagonal

background: linear-gradient(to right, red, blue);
background: linear-gradient(to right, rgb(), rgba(0)) <= This is a good option to use in side menus

Some of the options that can be used as the first parameter are: to right, to bottom right, -90deg, 146deg

The radial equivalents are:

radial-gradient(red, blue, green)
radial-gradient(red 20%, blue 40%, green 55%)
radial-gradient(circle, red, blue, green) <= To specify the shape of the gradient itself, use one of circle or ellipse(default) as the first parameter

Types of Units

2 types of units: absolute/relative relative - dependent on something (like size of parent, size of viewport). eg. percentages. Percentage is good for responsiveness. font-size: 2em; twice the standard size vh, vw (view-hieght, view-width) <= percentage of total viewport and not any body part Example of absolute

font-size: 2cm;
height: 400pt slightly larger than px
height: 400pc signficantly larger than px (12 pt)

Stick to use relative units instead of absolute of pixels, cms, mms

Text Manipulation

Things you can change no matter the font e.g. underlining, capitalization text-decoration:

text-decoration: none|underline|line-through|overline;
text-transform: uppercase|lowercase|capitalize
text-align: left|right|center|justify

Font-size, bolding, style

font-size:1.25em
font-weight: 0-infinity(bounded by what the font supports)
| makes the text wider or bigger (400 is normal range)
font-style: normal|italic|oblique
Font-family

A collection of fonts that have similar features 3 families - serifs, san-serifs and monospace

  • serifs - small lines at edges, mostly used in academic papers etc; eg. Tomes New Roman, Georgia
  • san-serifs - easier to read, most modern websites use it (Calibri, Arial)
  • monospace - puts more space (e.g. Courier New) 2 ways to use font-family
font-family: "Times New Roman", serif; <= use std serif font if TNR is not available
Including external fonts

Say using fonts.google.com. Customise fonts, but that comes at the cost of load time. Google Fonts provide CSS url to load fonts and the font-family properties

CSS: The Box Model

Every element is surrounded by a box, boxes are connected together, box shapes and layers can be modified. More basic layout features compared to flexbox and grid.

The order to keep in mind from innermost to outermost => content > padding > border > margin where:

  • padding <= space b/w content and border
  • border <= divider b/w content/padding and margin, invisible by default but can be changed
  • margin <= space b/w other elements - external space around external elements

Changing content size height and width - use relative units preferably - width more importantly

Using other Box related properties

border: size (1-3px normal) style (solid|dashed|dotted|double) color (name, rgb, color hex); eg. border: 2px solid rgb(204, 229, 255);

padding: 20px <= all sides

padding- for whichever side you want eg. padding-right, -top, -bottom, -left alternatively, use shorthand - padding: 100px 40px 5px 0 order is top, right, bottom, and left

margin is similar to padding but for external space

A common way to use in CSS: margin: 80px 40px <= top-bottom first and left-right second

float & display types

change how an element floats in a page e.g. float: right; display <= to change display property of an element that is default e.g. div, p are block elements - but can be changed to inline with display OR span is inline element - change to block

display: none; <= hide the entire box
display: inline-block <= inline element with block level spacing

CSS:flexbox

Techniques for advanced website layouts

display: flex <= Add this to a container class to provide multiple properties for layouts for easy arrangement organized into a container element and other items within. flex items are child elements of the container elements underneath fits available width

Some properties available with flex:

flex-direction: column; =< puts items in column. Other options are column-reverse (flips direction), row, and row-reverse. 
flex-wrap: wrap|wrap-reverse|nowrap
Content Alignment

horizontal alignment justify-content: center|flex-end|space-between|space-around; vertical alignment. align-items property default is stretch align-items: center|flex-start|flex-end|stretch|baseline

Flex Item Order specify order order: <n>

Flex Grow and Shrink

flex-grow: 1; <= every item gets the same amount of width. It can be other numbers as well; higher the value, more the space it gets, depending on the other items in the flex container
flex-shrink: 0; <= Do not shrink an item
flex-shrink: 3; <= that value should shrink 3 times
flex-basis: 100px; <= minimum size - put a baseline in aligning items

flex: grow shrink basis <= all the above 3 in the same line - a short form of achieving the same result
eg. flex: 1 1 100px
align-self: flex-start; <= align to the start of a container (align a particular item otherwise similar to align-items for values)

Grid Vs FlexBox Similar in what outcomes both help us achieve but Grid system is much more malleable, a lot more tools. Another difference is that Grid focuses on both width and height unlike Flex which has more control on the width aspect.

Creating a Grid

Activated using a display property (like Flexbox) display: grid; Makes available a whole lot of properties for manipulation

Use template columns and rows to split the container with either pixel values, any other units or auto. Examples:

grid-template-columns: 10px 50px 10px
grid-template-rows: 50px 250px
grid-template-columns: auto auto auto
grid-template-rows: auto auto

Justify and Align Grid

justify-content: end <= justifies the entire container. Other options are: end|start|space-around|space-evenly
align-content: adjust in the height level - up or down

Row and Column gaps

grid-column-gap: 150px;
grid-row-gap: 300px;
grid-gap: <row> <column>;
eg. grid-gap: 300px 150px;

Each column is given a line. This can be used to control the span of elements. For example:

grid-column: 1 / 3; <= Start at line 1 and end at 3
grid-row: 1 / 3; <= have it span rows

you can provide a span value for end point instead of an endpoint grid-column: 1 / span 2; Grid Area <= summarizes the above 2 in one line

grid-area: row start/column start row end/column end;
e.g. grid-area 2 / 1 span 2 / span 3;

The Transition Property

If properties change on the basis of pseudoselectors, transition can be used to put effects on that. Most commonly, the time for transition. use transition on the base selector transition: background 2s ease-in-out 1s; Transition is very good from a effects point of view - eases things - without it gets jarring. Other easing property values are ease|ease-in|ease-out use 'all' for transition to have the transition for all properties. In above example, use it instead of background if there are more properties.

Transformation Functions* Physical changes, movement, rotation functions

transform: translate(50px, 30px )
translate (x-axis, y-axis)
scale(2.5) scale everything 2.5 times all including
rotate(-45deg)
skewX(45deg)

matrix function summarizes everything into one go Clunky function - don't use it.

Include prefix for browser specific css functionality -webkit-, -moz-, -o-

Creating Animations with KeyFrames

design your own animation

@keyframes red-to-black {
  from {background: red; transform: translate(0px, 0px)}
  to {background: black;transform: translate(20px, 0px)}
or use percentages
  0% {background: red;}
  50% {background: yellow;}
  100% {background: black;}
}
Adding an Animation

In the selector

animation-name: red-to-black;
animation-duration: 4s;
animation-timing-function: ease|linear|ease-in|ease-out|ease-in-out
animation-delay: 2s; When the animation starts after event (page load)
negative delay is possible, the animation starts at a point where it would have to advance to otherwise
animation-iteration-count: 2|infinite
animation-direction: normal|reverse|alternate|alternate-reverse

shorthand property: animation: red-to-black duration timing-function delay iteration direction;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment