Week 02 - CSS
Petr Wehrenberg
PB138 - Basics of web development and markup languages
Outline
Intro to CSS and how it works
Layouting vs. styling
BEM
Responsivity
Alternatives, tips and tricks
PB138 - Basics of web development and markup languages
What is CSS?
Stands for Cascading Style Sheets
Basic HTML is readable in a browser, but isn't aesthetically pleasing
Basic styling (colors, fonts) and advanced styling (animations, 3D transforms)
Allows to style different viewport widths (mobile vs desktop) within a document
PB138 - Basics of web development and markup languages
An example of CSS
.btn {
font-size: 1.15rem;
color: white;
padding: 1rem 1.5rem;
text-align: center;
background-color: #36393f;
}
PB138 - Basics of web development and markup languages
selector {
property: value;
}
PB138 - Basics of web development and markup languages
How to include styles
PB138 - Basics of web development and markup languages
Link
/style.css
.cool-navbar {
display: flex;
color: #343434;
}
/index.html
PB138 - Basics of web development and markup languages
Style element
/index.html
PB138 - Basics of web development and markup languages
Inline
/index.html
PB138 - Basics of web development and markup languages
So how it works
PB138 - Basics of web development and markup languages
"Cascading" meaning
PB138 - Basics of web development and markup languages
CSS Selectors
#identifier {
}
.class {
}
div {
}
PB138 - Basics of web development and markup languages
Specificity
element < class < identifier < inline
PB138 - Basics of web development and markup languages
CSS Pseudo elements
State: hover , visited , or focus
Ancestor relationship: first-child , last-child , only-child , nth-of-type , empty , etc.
.class:hover {
}
input:focus {
}
tr:nth-child(even) {
}
PB138 - Basics of web development and markup languages
CSS Atribute selectors
the presence of an attribute
specific value
a[title] {
}
a[href="https://example.org"]
{
}
PB138 - Basics of web development and markup languages
CSS Selectors
.comment.btn {
font-size: 2rem;
}
.comment h2 {
font-size: 2rem;
}
.comment > .content {
font-size: 2rem;
}
PB138 - Basics of web development and markup languages
Messy CSS
.header .navigation ul li a.active {
color: white;
background-color: blue;
}
body.homepage .content .article > p:first-child {
font-size: 20px;
}
.footer .widget-area .widget:first h3 {
font-weight: bold;
}
.sidebar .widget,
.footer .widget-link-list,
.header .dropdown-menu {
background-color: #f0f0f0;
}
PB138 - Basics of web development and markup languages
CSS Priority
1. !important
2. Specificity
3. Source (author, user, broswer)
4. Order in source file
PB138 - Basics of web development and markup languages
Browser Support
Visit caniuse.com to see what browsers support what features
PB138 - Basics of web development and markup languages
Checkpoint - Intro to CSS
Anatomy
Source (css files, css element, inline)
Selectors (identifier, class, element)
Pseudo selectors
Specificity
Priority
PB138 - Basics of web development and markup languages
Layouting and styling
PB138 - Basics of web development and markup languages
Layouting and styling
PB138 - Basics of web development and markup languages
Styling
Reusable Components: Buttons, cards, avatars.
Visual Attributes: Color, font, rounded corners.
Theming: Dark/light mode, brand colors.
Interaction Feedback: Hover, active, disabled states.
.btn {
border-radius: 1rem;
background-color: #33aa22;
font-size: 1.2rem;
}
PB138 - Basics of web development and markup languages
CSS Variables
:root {
--radius-sm: 0.8rem;
--radius-md: 1rem;
/* ... */
}
.btn {
border-radius: var(--radius-md);
background-color: var(--bg-accent);
font-size: var(--text-lg);
}
PB138 - Basics of web development and markup languages
CSS Units
body {
font-size: 12px; /* NOT Recommended */
font-size: 2em; /* 2x current font */
font-size: 2rem; /* 2x root font */
width: 10rem;
width: 10vh;
width: 10vw;
}
PB138 - Basics of web development and markup languages
Layouting
Component Positioning: Arrange elements spatially.
Content Flow: Logical structure, easy navigation.
Responsivity: Media queries, flexible grids.
Main tools: Grid, Flexbox
PB138 - Basics of web development and markup languages
Flexbox
PB138 - Basics of web development and markup languages
Flex container
.parent-element {
display: flex;
flex-direction: row;
flex-wrap: no-wrap;
justify-content: space-between;
align-items: center;
}
PB138 - Basics of web development and markup languages
Flex item
.child-element {
flex: 1 0 100px; /* grow, shrink, basis */
}
PB138 - Basics of web development and markup languages
Flex Guide
Pictures are worth more than 1000 words of the lecturer:
css-tricks.com/snippets/css/a-guide-to-flexbox/
PB138 - Basics of web development and markup languages
Grid
PB138 - Basics of web development and markup languages
Grid container
.parent-element {
display: grid;
grid-template-columns: 1fr 1fr 50px;
grid-template-rows: 30px 30px 30px;
}
PB138 - Basics of web development and markup languages
Grid item
.child-element {
grid-column-start: 2;
grid-column-end: 3;
grid-row: 1 / span 2;
}
PB138 - Basics of web development and markup languages
Grid Guide
Pictures are worth more than 1000 words of the lecturer:
css-tricks.com/snippets/css/complete-guide-grid/
PB138 - Basics of web development and markup languages
Positioning
PB138 - Basics of web development and markup languages
Static
.parent-element {
position: static;
}
PB138 - Basics of web development and markup languages
Relative
.parent-element {
position: relative;
left: 30px;
}
PB138 - Basics of web development and markup languages
Absolute
.parent-element {
position: relative;
}
.child-element {
position: absolute;
top: 10px;
left: 30%;
}
PB138 - Basics of web development and markup languages
Fixed
.child-element {
position: fixed;
top: 10px;
left: 30%;
}
PB138 - Basics of web development and markup languages
Sticky
.parent-element {
position: relative;
}
.child-element {
position: sticky;
top: 20px;
}
PB138 - Basics of web development and markup languages
Positioning: DEMO
PB138 - Basics of web development and markup languages
Checkpoint - Styling and layouting
Difference between styling and layouting
Styling (CSS variables, units)
Layouting (Flex, Grid, Positioning)
PB138 - Basics of web development and markup languages
BEM
PB138 - Basics of web development and markup languages
Problem
.header .navigation ul li a.active {
color: white;
background-color: blue;
}
body.homepage .content .article > p:first-child {
font-size: 20px;
}
.footer .widget-area .widget:first-of-type h3 {
font-weight: bold;
}
.sidebar .widget,
.footer .widget-link-list,
.header .dropdown-menu {
background-color: #f0f0f0;
}
PB138 - Basics of web development and markup languages
Solution
.nav {
background-color: #ee42fd;
}
.nav__item {
margin: 5px 0;
}
.nav__link {
color: black;
text-decoration: none;
}
.nav__link--active {
color: white;
background-color: blue;
}
PB138 - Basics of web development and markup languages
What is BEM?
The BEM methodology helps to think with components:
Block - a standalone entity that is meaningful on its own
Element - a part of a block with no meaning on its own, semantically tied to block
Modifier - a flag on block/element used to modify appearance or behavior
PB138 - Basics of web development and markup languages
BEM - Block
A BEM Block consists of a singular component, which can potentially be reused throughout the page
It encapsulates an entity on the page (search bar, navbar, button, avatar, ...)
CSS:
.avatar {
display: flex;
clip-path: circle(50% at center);
overflow: hidden;
}
HTML:
PB138 - Basics of web development and markup languages
BEM - Element
BEM elements are tied to the block
They are parts of the block that make up the whole component, meaningless* on their own
They are defined after the definition of the block in CSS
CSS:
/* This is an element of the "avatar" block. */
.avatar__image {
object-fit: cover;
}
HTML:
PB138 - Basics of web development and markup languages
BEM - Modifier
BEM Modifiers modify the block / element
Modifier can change a few properties, they usually change color, styling, visibility, etc.
They are defined after the definition of the block / element in CSS
/* Main styling of a block */
.message {
display: flex;
flex-direction: row;
color: #fff;
background-color: #232323;
}
/* Modifier of a block - inherits most of the properties
and changes some - for example colors, sizes... */
.message--highlighted {
background-color: #776a23;
}
PB138 - Basics of web development and markup languages
BEM - Modifiers
BEM Modifiers cannot be used standalone!
They do not inherit properties, only overwrite some of them.
Here is some content
Here is some other content (but wrong)
PB138 - Basics of web development and markup languages
BEM - Common mistakes
.button--icon__large {
} /* naming structure */
.card__header__button {
} /* nested elements */
.input__field--error--large {
} /* nesting and combining modifiers */
.menu_item_isActive {
} /* naming convention */
.form__submit--text {
} /* misusing modifiers*/
PB138 - Basics of web development and markup languages
BEM - Common mistakes
Obi-Wan Kenobi
Hello there!
PB138 - Basics of web development and markup languages
BEM - Example
Obi-Wan Kenobi
Hello there!
PB138 - Basics of web development and markup languages
Excercise
PB138 - Basics of web development and markup languages
Checkpoint - Styling and layouting
Block, Element, Modifier
Better CSS structure
No nesting!!
PB138 - Basics of web development and markup languages
Responsivity
PB138 - Basics of web development and markup languages
PB138 - Basics of web development and markup languages
Responsive design
Plain HTML is responsive
Today's websites should be developed mobile-first
Using browser dev tools to change viewport to simulate a phone screen
Tablet and desktop styles come later
But how do we distinguish which ones to use when?
Media queries
PB138 - Basics of web development and markup languages
Media queries
/* Base styles for mobile */
body {
padding: 20px;
}
/* Media query for tablets */
@media (min-width: 768px) {
body {
padding: 40px;
}
}
/* Media query for desktops */
@media (min-width: 1024px) {
body {
padding: 60px;
}
}
PB138 - Basics of web development and markup languages
Media queries - advanced
@media (min-width: 30em) and (orientation: landscape) {
/* … */
}
@media not print {
/* … */
}
PB138 - Basics of web development and markup languages
Container queries
PB138 - Basics of web development and markup languages
Card title
.post {
container-type: inline-size;
}
.card h2 {
font-size: 1em;
}
@container (min-width: 700px) {
.card h2 {
font-size: 2em;
}
}
PB138 - Basics of web development and markup languages
Load styles based on media width
PB138 - Basics of web development and markup languages
Responsivity: DEMO
PB138 - Basics of web development and markup languages
Checkpoint - Responsivity
Mobile first approach
Media queries
Container queries
PB138 - Basics of web development and markup languages
Alternatives
PB138 - Basics of web development and markup languages
CSS in JS
PB138 - Basics of web development and markup languages
// JSS example
const useStyles = createUseStyles({
myButton: {
color: "green",
margin: {
top: 5, // jss-default-unit makes this 5px
},
},
});
const Button = ({ children }) => {
const classes = useStyles();
return (
);
};
PB138 - Basics of web development and markup languages
// Emotion example
const Button = styled.button`
padding: 32px;
background-color: hotpink;
font-size: 24px;
color: black;
font-weight: bold;
&:hover {
color: white;
}
`;
() => ;
PB138 - Basics of web development and markup languages
CSS in JS
Good
JS variables
Locally scoped
Bad
Runtime overhead
Bundle size
We do not recommend this approach!
PB138 - Basics of web development and markup languages
Tailwindcss
Click me
PB138 - Basics of web development and markup languages
Tailwindcss
Good
Simple
Faster styling
Bundle size
Bad
Might lead to messy code
PB138 - Basics of web development and markup languages
Preprocessors and Frameworks
Sass, Less, PostCSS (and others) augment regular CSS
Add variables, mixins, computed values
Need to compile files to regular CSS before using in production
Over time, variables and other features were introduced to CSS itself
The need to use preprocessors has decreased
PB138 - Basics of web development and markup languages
Preprocessors and Frameworks
/* Nesting example */
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
PB138 - Basics of web development and markup languages
Preprocessors and Frameworks
Good
Faster styling
Better dev experience
Bad
Lots of features are now supported in CSS
Build time
UI frameworks and libraries
Because life is too short to write all the styles yourself
PB138 - Basics of web development and markup languages
UI frameworks and libraries
Bootstrap
DaisyUI
MaterialUI
RadixUI
Shadcn
Flowbite
AntDesign
PB138 - Basics of web development and markup languages
Checkpoint: Alternatives
CSS in JS
Tailwindcss
Preprocessors and Frameworks
UI frameworks and libraries
PB138 - Basics of web development and markup languages
Tips and tricks
Be consistent
Design First
Mobile-first approach
Keep it simple stupid (KISS)
Use clsx lib
PB138 - Basics of web development and markup languages
Questions?
PB138 - Basics of web development and markup languages
Week 02 - CSS
Petr Wehrenberg
PB138 - Basics of web development and markup languages