CSS Basics Reference
What is CSS?\ Cascading Style Sheets (CSS) is a markup language used to apply styles to HTML elements.
CSS is used for colors, background images, layouts, and more.
Basic Anatomy of a CSS Rule\ A CSS rule is made up of two parts: a selector and a declaration block.
selector {
property: value;
}
Viewport Meta Element\ This gives instructions to the browser on scaling:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Default Browser Styles\ Browsers apply default styles like margin and padding to elements.
CSS Types\ Inline CSS:
<p style="color: red;">Text</p>
Internal CSS:
<style>
p { color: red; }
</style>
External CSS:
<link rel="stylesheet" href="styles.css">
Width and Height Properties
width: 100px;
min-width: 50px;
max-width: 200px;
height: auto;
1
min-height: 100px;
max-height: 500px;
CSS Combinators
ul li {} /* Descendant */
.container > p {} /* Child */
h2 + p {} /* Next Sibling */
ul ~ p {} /* General Sibling */
Display Types
• Inline: span , a , img
• Block: div , p , section
• Inline-Block: display: inline-block;
Margin and Padding
margin: 10px 20px;
padding: 5px 15px;
CSS Specificity Values
/* Inline Style */
style="color: red;" /* (1,0,0,0) */
/* ID */
#header { color: blue; } /* (0,1,0,0) */
/* Class */
.navbar { color: green; } /* (0,0,1,0) */
/* Element */
p { color: black; } /* (0,0,0,1) */
!important Rule
p {
color: red !important;
}
Universal Selector
2
* {
margin: 0;
padding: 0;
}
Box Model
.box {
padding: 20px;
border: 1px solid #000;
margin: 10px;
}
Positioning
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
z-index
.modal {
position: absolute;
z-index: 100;
}
Overflow
overflow-x: scroll;
overflow-y: hidden;
Box-Sizing
box-sizing: content-box;
box-sizing: border-box;
Color Values
3
color: blue;
background-color: rgb(255, 0, 0);
border-color: #333;
Gradient Example
background: linear-gradient(to right, red, blue);
background: radial-gradient(circle, yellow, green);
Text Shadow
text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
Flexbox Example
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
Grid Example
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
Media Query Example
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
CSS Animation Example
4
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: slide 2s ease-in-out;
}
Importing Fonts
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Accessibility: Smooth Scroll Preference
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
Hidden Content for Screen Readers Only
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
Input Pseudo-classes\ These pseudo-classes are used to target HTML input elements based on the state
they are in before and after user interaction.
5
:enabled {}
:disabled {}
:checked {}
:valid {}
:invalid {}
:in-range {}
:out-of-range {}
:required {}
:optional {}
:autofill {}
Location Pseudo-classes\ Used for styling links and elements targeted within the current document.
:any-link {}
:link {}
:local-link {}
:visited {}
:target {}
Tree-structural Pseudo-classes\ Used to target and style elements based on their position within the
document tree.
:root {}
:empty {}
:nth-child(n) {}
:nth-last-child(n) {}
:first-child {}
:last-child {}
:only-child {}
:first-of-type {}
:last-of-type {}
:nth-of-type(n) {}
:only-of-type {}
Functional Pseudo-classes
:is(ol, ul) {}
:where(ol, ul) {}
:has(img) {}
Pseudo-elements
6
::before {}
::after {}
::first-letter {}
::marker {}
Color Theory and CSS Color Usage
• Named Colors: blue , darkred , lightgreen
• RGB: rgb(255, 0, 0)
• RGBA: rgba(255, 0, 0, 0.5)
• HSL: hsl(0, 100%, 50%)
• HSLA: hsla(0, 100%, 50%, 0.5)
• Hexadecimal: #FF0000
Gradient Types
background: linear-gradient(to right, red, yellow);
background: radial-gradient(circle, red, yellow);
Input Styling Best Practices
• Maintain accessible contrast
• Ensure focus is visibly indicated
appearance: none
input[type="checkbox"] {
appearance: none;
}
Overflow
overflow-x: auto;
overflow-y: scroll;
Transform Property
transform: translate(10px, 20px);
transform: scale(1.5);
7
Box Model Refresher
• content > padding > border > margin
box-sizing
box-sizing: content-box;
box-sizing: border-box;
CSS Reset Example
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
CSS Filter Examples
filter: blur(4px);
filter: brightness(120%);
filter: grayscale(50%);
filter: sepia(100%);
filter: hue-rotate(180deg);
Flexbox Properties
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
Align Items Property\ This property is used to distribute items along the cross axis.
align-items: center; /* centers items */
align-items: flex-start; /* aligns to start of cross axis */
align-items: stretch; /* stretches items */
Typography Overview
• Typeface: Design/style of a character set.
8
• Font: A variation of a typeface (e.g. bold, italic).
• Serif: Classical look (e.g., Times New Roman).
• Sans-serif: Modern, screen-friendly (e.g., Arial, Roboto).
• Weight: Thickness (e.g., light, bold).
• Style: Slant (e.g., italic).
• Width: Horizontal space (e.g., condensed).
• Baseline: Line characters sit on.
• Cap Height: Height of uppercase letters.
• X-height: Height of lowercase letters (excluding ascenders/descenders).
• Ascenders/Descenders: Extend above or below x-height/baseline.
• Kerning: Space between pairs of letters.
• Tracking: Space between all characters.
• Leading: Space between lines of text.
Best Practices with Typography
• Use clear fonts for readability
• Limit font families to 2–3 for consistency
• Create visual hierarchy with font size
CSS font-family Property
font-family: 'Roboto', Arial, sans-serif;
• Common families: serif, sans-serif, monospace
Web Safe Fonts
• Sans-serif: Arial, Verdana, Trebuchet MS
• Serif: Times New Roman, Georgia
@font-face Rule
@font-face {
font-family: 'CustomFont';
src: url('custom.woff2') format('woff2');
}
• Formats: woff, woff2, opentype, svg, truetype
• Optional tech() hints: tech(opentype)
External Fonts
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet">
9
text-shadow Property
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
• Supports multiple shadows separated by commas
Color Contrast Tools
• WebAIM Color Contrast Checker
• TPGi Colour Contrast Analyzer (includes color blindness simulator)
Accessibility Tree Used by assistive tech to understand page structure.
max() Function
img {
width: max(250px, 25vw);
}
Best Practices with CSS and Accessibility
• display: none; fully hides elements (including from screen readers)
• visibility: hidden; hides visually but retains layout
• .sr-only keeps content for screen readers only
Smooth Scrolling Preference
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
Hiding Content with HTML Attributes
<p aria-hidden>This is hidden from assistive tech.</p>
<p hidden>This is hidden from all users.</p>
Avoid Placeholder for Important Instructions Use labels instead of relying solely on placeholders.
Attribute Selectors
10
a[title] {
color: blue;
}
[data-lang="en"] {
font-style: italic;
}
Floats and Clearing
.float-box {
float: left;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
Positioning Types Recap
• Static: Default document flow
• Relative: Offsets from normal position
• Absolute: Removed from flow, positioned to nearest ancestor
• Fixed: Relative to viewport
• Sticky: Behaves relative until a threshold, then fixed
z-index Property Controls stacking of overlapping elements.
Responsive Web Design Basics
• Fluid grids: Use % or fr units
• Flexible images: Set max-width to 100%
Media Queries
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
• Media types: all , screen , print
• Features: aspect-ratio , orientation , resolution , hover , prefers-color-scheme
11
Media Query Logical Operators
• and , not , only
Common Breakpoints
• Small (phones): up to 640px
• Medium (tablets): 641–1024px
• Large (desktops): 1025px and above
Mobile First Approach Start styling for mobile devices, then scale up.
CSS Custom Properties (Variables)
:root {
--primary-color: #336699;
}
h1 {
color: var(--primary-color);
}
@property Rule
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
CSS Grid Basics
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
• Units: fr , px , %
• repeat() , minmax() , grid-template-areas
• Explicit vs. Implicit Grids
• Line placement using grid-column , grid-row
CSS Animation Basics
12
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.box {
animation: fadeIn 2s ease-in;
}
Accessibility and prefers-reduced-motion Use media query to respect users who prefer less animation.
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
13
