A very beginner intro to CSS

1. Intro to CSS
01
Michelle Frechette
Twitter: @michelleames
WP: @michelleames
Web: MeetMichelle.online

2. 2
What is CSS?
● CSS stands for Cascading Style Sheets
● CSS describes how HTML elements are to be displayed on
screen, paper, or in other media
● CSS can save a lot of work, as it can control the layout of
multiple web pages all at once

3. CSS can be
used to
create or to
overwrite
3

4. 4
Identifying WHAT to change
How to figure out where the code is to make a change

5. 5
On a page we will right click over
the area we want to change (click
“inspect”) to see what is already
there. Here we see all the button
styling info.
Let’s say we
want to change
the color of
those buttons

6. 6
button:visited, .button:visited,
.wp-block-button__link:visited,
input[type="button"]:visited,
input[type="reset"]:visited,
input[type="submit"]:visited {
background:
var(--global-palette-btn-bg);
color: var(--global-palette-btn);
}
● Everything before the curly brace
identifies the element to edit.
● Everything between the curly braces
is the styles we can edit.
○ Background
○ Color (font color)
○ Padding
○ Box-shadow
○ Etc.

7. 7
Where to make CSS changes on your
WordPress site:
● Appearance > Customize
● Front-facing site click
“Customize” in WordPress top
menu.
If we make changes here, they will NOT
be overwritten by any theme or
WordPress core updates. (This is why
we never edit core files.)

8. 8
button:visited, .button:visited,
.wp-block-button__link:visited,
input[type="button"]:visited,
input[type="reset"]:visited,
input[type="submit"]:visited {
background:
var(--global-palette-btn-bg);
color: var(--global-palette-btn);
}
Let’s say I want that button to be solid
blue instead of purple.
button:visited, .button:visited,
.wp-block-button__link:visited,
input[type="button"]:visited,
input[type="reset"]:visited,
input[type="submit"]:visited {
background: blue;
color: var(--global-palette-btn);
}

9. 9
button:visited, .button:visited,
.wp-block-button__link:visited,
input[type="button"]:visited,
input[type="reset"]:visited,
input[type="submit"]:visited {
background:
var(--global-palette-btn-bg);
color: var(--global-palette-btn);
}
Let’s say I want that button to be solid
blue instead of purple.
button:visited, .button:visited,
.wp-block-button__link:visited,
input[type="button"]:visited,
input[type="reset"]:visited,
input[type="submit"]:visited {
background: blue;
color: var(--global-palette-btn);
}

10. 10
What can we change?
Almost any style you want!
● Background color
● Font color, size, weight, etc.
● Fonts
● Padding
● Margins
● Text alignment
● Borders (weight, color, corners, etc.)
● Link colors
● Hover effects
● Opacity
● Hide elements
● And a lot more!

11. 11

12. 12
The Ace Up Your Sleeve
● !important
○ This should overwrite anything else attached to that element.
○ This is not recommended as best practice coding.
This code would make sure all link text is red. (You can also you
hex codes for colors to select specific shades.)
a {
color: red !important;
}
a {
color: #ff0000 !important;
}

13. 13
Resources
● https://www.w3schools.com/css/
● https://css-tricks.com/
● https://www.codecademy.com/learn/learn-css
● https://blog.hubspot.com/website/css-tutorial
● https://www.csstutorial.net/
● https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials

14. Thank you!
Questions? Ideas? Additional information?
14

15. Michelle Frechette
15
Twitter: @michelleames
WordPress.org: @michelleames
Email: michelle@worksbymichelle.com
Site: MeetMichelle.online