Learn CSS By Use Cases
ebook by Joe Harrison
Syntax
Properties
Properties
Syntax
Intro
The largest part of CSS to learn is definitely the
extensive list of properties available. The whole
reason I made this ebook, is to focus your mind on
the core set of properties mentioned here - for
this reason I focus mainly on teaching properties.
Syntax Overview
As I mentioned earlier, CSS is a collection of rules
consisting of a selector and block. Inside the
block we have property pairings which have their
own simple to learn syntax.
Property Property
Property Value Property Value
Properties
Syntax
Core Properties
Now let’s do a quick run through of the properties
I focus on in this ebook (these are what I call my
Core Properties).
height and width - Apply size to our elements.
They both also come with mix and max
properties.
margin - Apply spacing outside and around the
element.
padding - Apply spacing between the border and
content of an element.
font, text and color - Apply styling to elements
that contain textual content.
Core Properties
width
height Home
font, text and color padding
margin
Properties
Syntax
opacity - Apply transparency to elements.
cursor - Assist user experience by showing a
visual hint when the mouse is over that element.
background - Apply background effects to
elements such as solid colors, gradients and
images.
border - Add lines around elements.
border-radius - Apply rounded corners to
elements, can also be used to make abstract
shapes.
box-shadow - Apply shadows to elements, useful
when portraying elevation.
Properties
Syntax
position - Add advanced positional behaviour to
elements - mainly float elements outside the
normal flow of a website.
top - Works alongside the position property to
apply an offset from the top of it’s parent.
right - Works alongside the position property to
apply an offset from the right of it’s parent.
bottom - Works alongside the position property to
apply an offset from the bottom of it’s parent.
left - Works alongside the position property to
apply an offset from the left of it’s parent.
z-index - Defines how the element will appear
when it overlaps other elements.
Core Properties
position
opacity
border-radius
Home
border-radius cursor
background border
box-shadow
Properties
Syntax
overflow - Define what will happen when content
overflows an element’s dimensions.
transform - Apply effects to elements. Effects
include scale, rotate and move (translate). This
property is most relevant when creating CSS
animations. Multiple functions can be applied.
display - Define how the element appears in the
website document (mainly block or inline). We
also use the display property to trigger flexbox
and grid behaviour on a parent element.
Single Use Properties - Properties I consider to
have a single or minimal amount of use cases. I
explain the primary usage of each one in my
Single Use Properties chapter.
Core Properties
display flexbox
overflow scrollbars
transform center on
self (move/translate)
Properties
Syntax
Flexbox Properties
align-items - Align flex items on the Y axis. When
flex-direction column comes into play - align-
items and justify-content switch roles.
justify-content - Align flex items on the X axis.
When flex-direction column comes into play -
justify-content and align-items switch roles.
flex - Apply proportional sizing to flex items.
gap - Define spacing between flex items.
flex-direction - Change the default direction
from row (horizontal) to column (vertical)
Core Properties
justify-content center
align-items center Search Hotels flex-direction row
gap
flex flex
Properties
Syntax
Grid Properties
place-items - Apply spacing between the border
and content of an element.
grid-template-rows - Apply styling to elements
that contain textual content
grid-template-columns - Apply styling to
elements that contain textual content
grid-template-areas - Apply styling to elements
that contain textual content
gap - Apply styling to elements that contain
textual content
Core Properties
display grid
grid-template-rows
gap
Mike van Dijssel
5 July 2021 @ 4pm
grid-template-columns
Alternatively grid-template-areas could be
used to declare these four grid areas
Pseudo Class
Syntax
Knowledge Gained
CSS has a lot of properties to learn, which
make up the largest part of the language
CSS is easier to learn if you focus on a
core set of properties
CSS property pairings allow us to apply
styling to elements
CSS property syntax is easy to learn
Flexbox and grid have their own set of
specific properties
