Intro to CSS Presentation

INTRO TO CSS
PRESENTED BY
WPPITTSBURGH.COM
HOW TO MAKE SIMPLE EDITS
TO CUSTOMIZE THE LOOK AND FEEL OF YOUR WEBSITE

WHAT IS CSS?
• CSS is the abbreviated term for “Cascading Style
Sheet”.
• The code found within your theme’s CSS ﬁle
determines the appearance of your site by applying
style rules to HTML content, which has no style of
its own.

CSS vs. HTML
• Think of CSS as “clothing” and
the HTML as the “mannequin”.
• CSS controls things such as
colors, spacing, layout, mobile-‐
responsiveness and more!
• HTML is the site’s structure.
• We can change the “clothing”
anyIme without aﬀecIng the
structure of the site.
PHOTO CREDIT: PIXABAY.COM

This is the Twenty-‐Twelve WordPress Theme.

With a few lines of custom CSS and a few images we
can easily customize diﬀerent elements of the website.

LEARNING THE LINGO
CSS can be made easier to understand by breaking down each
“sentence” into it’s individual components.
Here is an example of a common CSS declaraIon, as well as a diagram
of what each CSS component is made of:

• The SELECTOR is what element of the website we want to change.
• The PROPERTY is what we want to change about it
• The VALUE is what we are changing.

HOW TO EDIT THEME CSS
It is important that you take care how/where you edit the CSS in your
theme, as you do not want to overwrite your changes with any theme
updates and risk losing all of your hard work!
Op#on A: Create a Child Theme
A child theme inherits the ﬁles of the parent theme, but allows you to
make changes to the theme ﬁles without risk of these changes being
lost in theme updates. Learn more about child themes here:
hXps://codex.wordpress.org/Child_Themes

If creaIng a child theme is not the right soluIon for you, or you would
like a simple way to edit CSS quickly and easily, you can use a plugin,
which is what we will demonstrate today.
Op#on B: JetPack Plugin
The JetPack plugin provided by
WordPress.com oﬀers a
number of features. You can
install it from the
WordPress.org plugin directory
or from within your WordPress
dashboard.
Learn more about JetPack here:
hXp://jetpack.me

TO ACTIVATE CUSTOM CSS IN JETPACK:
Navigate to
JetPack WordPress
Dashboard Menu.
Click on “Se^ngs”.

Next, hover over the “Custom CSS Module” and click on “AcIvate”.

You will now see the opIon “Edit CSS” under
the “Appearance” secIon of the menu.
*IMPORTANT NOTE!*
Below Edit CSS is the link for “Editor” which
will take you to the editor for ediIng core
theme ﬁles. It is VERY important that you do
not edit this secIon unless using a child
theme as all of your changes may be lost
when the theme is updated.

WE ARE NOW READY TO
EDIT CSS!

STEP 1:
FINDING YOUR THEME’S STYLES
For today’s exercises, we are going to use and modify the exisIng CSS
of the Twenty Twelve WordPress theme. Using an exisIng theme can
someImes be easier than coding from scratch.
In order to make changes to the CSS, we need to ﬁnd the selector we
wish to change ﬁrst.
The easiest ways to do this are through the developer tools available
in Google Chrome or Mozilla Firefox.
Today we will be using Google Chrome.

To launch the Inspector in Chrome, all you need to do is right-‐click on
the element you wish to change and choose “Inspect Element”.
Try It!
Click on Your Site
Title, Right Click,
and Choose
“Inspect Element”
from the Drop
Down menu.

You will see the HTML markup and the CSS Styles on the screen.
Source Code CSS Styles

Here is a closer view of the CSS style for the site #tle.
In this instance, the SELECTORS are .site-‐header h1 a, .site-‐header h2 a
The PROPERTIES are color, display, and text-‐decoraIon
And the VALUES of these properIes are #515151, inline-‐block, and none

EXERCISE 1: MODIFYING FONTS
For this exercise, we will
be making changes to the
blog Itle text found at the
top of blog arIcles on
your site. To locate the
CSS for this element, right
click on any blog Itle on
your test site’s home page.
Next choose the Inspect
Element opIon, which will
launch your browser’s
developer tools.

The TOP of the browser window is your SITE.
The BOTTOM LEFT is the HTML of the site.
The BOTTOM RIGHT is where you ﬁnd your CSS STYLES.

We can make changes right in our browser window to
preview what the new style may look like. These
changes are ONLY TEMPORARY -‐ in order to apply
them to your site, you must place the code in the “Edit
CSS” code editor provided by the JetPack plugin.
Look for this snippet of code in the CSS Styles Window:

In this example, right now the only styling for the Blog
Post Titles is that there is no underline underneath
the link.
We can edit this code in our browser window to
change the font-‐size, font-‐weight and font-‐style.

Click on the CSS box and create a new line of
properIes.
The First Property we will be adding is Font-‐Size.
Type Font-‐Size, then hit tab to enter “40px”
Next, hit enter and type Font-‐Weight, hit tab, type in
“bold” and press “Enter”.
Lastly, type “Font-‐Style”, hit tab, type in “italic” and hit
enter.

Here is what your screen should look like:

Select this code and “Copy” to your clipboard so you can paste
it into the Jetpack Custom CSS Editor.

Navigate to your WordPress Dashboard and Select “Appearance -‐> “Edit CSS”.
Paste the code into the Custom CSS Editor and click the blue “Save
Stylesheet” BuXon to save your changes.

Our Blog Titles Now Look Like This:

EXERCISE 2:
BACKGROUND COLORS AND PADDING
For this exercise, we will change
the background color of the
sIcky post from white to blue
using background colors and
padding.
A “sIcky post” in WordPress is a
post which “sIcks” or stays at
top on the front page of the blog.
This is a great way to place a welcome message, special announcement, or
other informaIon that does not change frequently and draw aXenIon to it
for your website visitors.

To get started, ﬁrst select the “Featured Post” secIon and right-‐click
to launch the Inspector in Google Chrome.

We are going to be doing something else to our sIcky posts, so hide this feature
by simply adding the following rule:
display:none
This causes the “Featured Post” element to no longer be displayed. s for this
element are already in the theme’s CSS, we only need to add our custom
declaraIon.

Because this change is only in the inspector, we will again need to
copy this into our JetPack CSS editor in the Dashboard. Unlike last
Ime though, we can simplify this to only include the rule we
added, like so:
Doing this keeps our custom CSS from ge^ng too bloated. Since
the other styles for this element are already in the theme’s CSS, we
only need to add our custom declaraIon.
arIcle.sIcky .featured-‐post {
display: none;
}

arIcle id="post-‐4" class="post-‐4 post type-‐post status-‐publish format-‐
standard sIcky hentry category-‐uncategorized"
Now let’s style the SIcky Post itself. Find and highlight the long line on the
HTML pane in the inspector that says:

You will noIce that when you highlight this line of code,
there isn’t any matching CSS we can use to style this
sIcky post. The only one displayed is .site-‐content arIcle
when ideally we would be looking for a style with .sIcky
in it.
The good news is we can use the inspector to add new
styles to our site!

To Add a new style to your site -‐ click on the “+” icon to add a new
style rule.

You will noIce that when the new declaraIon is created in the inspector,
it shows the selector as:
article#post-‐4
However that is not quite what we want. If leo as-‐is, this style rule would
only apply to arIcles with an ID that is equal to “4” which is the exact
post we are on, as it is the 4th post we have created on our test site.
In this case, we will need to create a new style declaraIon on our own,
rather than use one that exists already.
We can get around this by modifying the selector to instead say
arIcle.sIcky which, in plain English works out to something like “Apply
this rule to all arIcles that have the class equal to “sIcky” which means
this post, plus any sIcky posts we make in the future.”

Click on the selector to change it to arIcle.sIcky

ID vs. Class
You may noIce while working with CSS, some selectors have a “#” in
front of them, and some have a “.” in front of them. This is used to
denote if there is an ID or a class associated with this HTML element.
Let’s look at the original HTML that was highlighted in our inspector:
arIcle id="post-‐4" class="post-‐4 post type-‐post status-‐publish
format-‐standard sIcky hentry category-‐uncategorized"
In this case, you would add a “#” in front of #post-‐4 because in the
original markup it appears as id=”post-‐4ʺ″ whereas we added a “.” in
front of .sIcky because it appears as class=”sIcky” in the original
markup.
In most cases, IDs are used for non-‐repeaIng secIons of a website
{such as header, navigaIon, or footer} -‐ classes are used for the
majority of the other elements which may repeat for easier styling.

Now that we have created our new selector, let’s add some styles to it.
Start by applying the following background color:
background: #D0EAF3;
This will give us a screen that looks like this:

If you want to experiment with the color a bit, you can click on the Iny swatch
next to the hex code #D0EAF3 which will bring up a color mixer tool.

Since the original theme CSS ﬁles did not include a background color, you will
see the text and the image go all the way to the edge of the box. The way to
ﬁx this is to add some padding.

To add padding, type this in the Inspector Window right below the
background declaraIon:
padding: 20px;
Now our screen will look like this:

REMEMBER: Styles entered in the Inspector Window are NOT
permanent and will disappear when the page is refreshed.
Let’s copy our style as we did in the
previous exercise and paste into the
JetPack Custom CSS Editor and
save our changes.
Now, refresh your browser window
and admire your work!

EXERCISE 3:
SITE TITLE AND BACKGROUND IMAGE
Our ﬁnal exercise is to change the site Itle to an image logo and to
create a background image. This is an easy way to add your own
custom branding to your website.

CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme, we
need to ﬁrst upload our image to the media folder. Click on “Add New” to
drop or select a ﬁle for uploading. In our resources available to download,
we have included an image for you to use as your background.

Once uploaded, copy the link for the image which is
located in the top right as the URL ﬁeld.

For this exercise, click on the element of the HTML highlighted below.
This will bring up the body .site class to be styled in the inspector.

Add the following to the line below:
background: url(‘hXp://yourimagelinkhere.jpg’)
Paste the URL of the image you uploaded to replace
hXp://yourimagelinkhere.jpg

Currently, the image is Iling along the page. Since the image is
designed to fade to white, let’s add a bit of code to this:
#FFF url(‘hXp://yourimagelinkhere.jpg') no-‐repeat
The #FFF declares the
background will be white
and the no-‐repeat aoer the
URL declares the image
should only appear once.
Copy the code to your
clipboard and paste in the
JetPack Custom CSS Editor
and save your changes.

Here is what our custom CSS ﬁle looks like so far:

Our ﬁnal step is to add a logo. Once again, go to the Media Library
and upload or select your logo image and copy the URL.

We are going to add the logo just as we did the
custom header background image.
Click on the Site Title and Inspect Element.
Add the following code to the .site-‐header h1 a, .site-‐
header h2 a selectors:
background: url('hXp://mycustomlogolink.png') top leo no-‐repeat;
In this example, we are adding “top leo no-‐repeat” to the
value to state we only want the image to appear in the top
leo of the website and to not repeat across the page.
Be sure to replace hXp://mycustomlogolink.png with the
URL you copied in the previous step.

Right now, our logo looks something like this:
We can make this look much beXer by adding just a few
addiIonal properIes.

Add this line of code:
text-‐indent: -‐9999px;
Hiding the Site Title Text
In our earlier example, when we wanted to hide an element we used
“display:none”. However, you need to display the Itle of your site to
make it user-‐friendly and accessible to those who may be using a
screen reader or other method for using the internet.
So, in this instance, we are going to indent the text by -‐9999px
which will move it oﬀ the screen, but sIll make it accessible by those
who may need the text version of the site Itle.

height: 100px;
width: 440px;
Lastly, we need to make the “box” for the logo space to ﬁt the
dimensions of the logo. This can be achieved simply by declaring a
height and width. Add this to the code you have so far:
Copy your changes and paste into the JetPack Custom CSS Editor.

QuesEons? Want to Learn More?
Connect with us!
hMp://wppiMsburgh.com/
hMps://www.facebook.com/groups/wppiMsburgh/
hMp://twiMer.com/wppgh/
hMp://www.meetup.com/PiMsburgh-‐WordPress-‐
Developers-‐Designers/

Intro to CSS Presentation

More Related Content

What's hot (19)

Similar to Intro to CSS Presentation (20)

Recently uploaded (20)

Intro to CSS Presentation