Learning CSS Basics – Part 1
CSS stands for Cascading Style Sheets. This magical code is what styles your HTML content (aka images and text 🖌).
Remember our handy Google Chrome Developer Tools in Section 1? Whenever we looked up the font size or background colors, that was the CSS magic in the works! 🎩
Cool, so how much CSS do I need to complete the course?
Good question! Squarespace is PACKED with native features (aka blocks), so you don’t have to write too much CSS.
Using the native features is a great way to ensure a smooth handoff to your client. In Section 3, we don’t grade on how much CSS you have, we are primarily looking at colors, choice of photos/graphics/illustrations (if you have them), how you use native features, and… fonts.
Unfortunately, the font library in Squarespace doesn’t include all the fun cool fonts that will really elevate your site. SO everyone should learn how to upload custom fonts!
If you’re new to CSS, it's important to understand the fundamentals, so when you need to add custom code, you know what to look for. Take a gander below to understand how to read and write CSS.
And remember, a few custom CSS tricks can up your design game, but they aren't necessary to complete the course. The rest is extra credit. 😉
In this clip from Live Office Hours, Puno walks through this resource and gives her tips on CSS
01 — The Syntax: How to Read & Write CSS
CSS consists of two parts:
Selector: the HTML you want styled
Example: h1
In Pedro, you might remember h1, h2, h3, and p.
Starts and ends with curly ramen brackets { } 🍜
Property: what CSS style you want to use
Example: font-size
The Property is always followed by a colon
Play around with it here.
Value: how you want it styled
Example: 20px
The value always ends with a semi-colon.
This is the syntax aka the rule you want to set.
Pro-Tip👇
You are NOT expected to know every CSS property or value! Most web designers AND developers are constantly learning and Googling for answers.
W3Schools is AWESOME for this! You'll usually find what you're looking for by opening a search browser and typing both your question followed by W3Schools.
EX: Search "Font weight property css w3schools" — here’s what you get. 👉
02 — Selectors: .Classes vs #ID
As a Squarespace designer, you’re always playing detective and trying to figure out how to style something, but you need to figure out what they named it.
This is where it’s very important to know how to identify a Class and an ID.
Classes (.)
Use a period .
When you want to style a group of elements
IDs (#)
Use a hashtag #
when you want to style one element
Squarespace uses a ton of classes!
Squarespace IDs usually have the word block in them.
03 — See classes in the wild!
In Section 1, you were playing detective, but we were telling you what to look for. Now you can select any element on a webpage and then literally change the CSS style and value in the Developer Tools.
Class Example
Let's say we want to create a blog page about the different ways to use our Nalgenes. 💦
We want every H1 header in the Nalgene shop to have these specifications:
Selector: header_nalgene
Declaration:
Color: #000 (or Black)
Font-family: Romana
Font-weight: 400
We’ll create an HTML class called “header_nalgene” to call out the CSS. Here's what this looks like in HTML and the CSS 👉
ID Example
Great! Now what if I want one specific H1 header to be green, so it reaaally stands out? 💚 IDs to the rescue!
Here’s my new specifications and what they’d look like now:
Selector: header_nalgene_green
Declaration:
Color: green
Font-family: Romana
Font-weight: 400
04 — Media Queries and Breakpoints
What is a Media Query?
Media query is a CSS technique and it uses the @media rule to style certain CSS properties only if a certain condition is true. With media queries, you can define completely different styles for different browser sizes.
So when you want a CSS rule to only apply to Mobile or Desktop, for example, you would use a Media Query.
Media Queries wrap the CSS rule and there is always a second set of brackets { }.
What is a Breakpoint?
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes.
Squarespace 7.1's Mobile Breakpoint is 767px which cannot be changed. This means that once your desktop browser size is at 767px, it switches from Desktop view to Mobile view (test it out yourself!). In 7.0 you can change the Mobile Breakpoint in Site Styles.
For example: to code a CSS rule that only applies to Mobile, you would use the code below. It means that only when a screen size is at a maximum width of 767px or smaller this rule can take place.
//ONLY APPLIES TO MOBILE//
@media screen and (max-width: 767px) {
{ /*ADD RULE HERE*/
}
}
This rule is saying, only on a screen size of 767px or smaller (tablets & mobile) Heading 1 will be the color green.
For example: to code a CSS rule that only applies to Desktop, you would use the code below. It means that only when a screen size is at a minimum width of 768px or larger this rule can take place.
//ONLY APPLIES TO DESKTOP//
@media screen and (min-width: 768px) {
{ /*ADD RULE HERE*/
}
}
This rule is saying, only on a screen size of 768px or larger (laptop & desktop) Heading 1 will be the color blue.
The breakpoint can change depending on what screen size you are coding for (you don't have to stick with these values 😉).
You can read more about them here.
In this clip from Live Office Hours, TA Erin goes through Media Queries and Breakpoints
More CSS Basics
CSS Introduction by W3Schools
Prefer something more interactive? Check out this nifty intro, with exercises you can do all in your browser.
CSS Basics Playlist by DevTips
Watch all 8 videos and get ready to be edu-tained! Each YouTube video is under 10-minutes and sums up the most important aspects of CSS to help you get started.