Hey, y'all. Welcome to another
WordPress Wednesday.
My name is Kori Ashton here at
WebTegrity in San Antonio, Texas.
This WordPress Wednesday we're going to
be talking about Div classes.
I understand that sometimes CSS can be a
little bit intimidating, especially to those
that don't exactly understand how to write
nerd code. So, if you're trying to go in
and make some changes to your WordPress
website, and you're kind of turned around
on it, and you really don't either understand
what a div class is, or maybe you understand
it but want to figure out how to write your
own, play around with some of your own
styling ... I'm going to teach you how to do that.
Really super simple. I'm going to walk you
through step-by-step so that you're
not overwhelmed. All right!
Before we get started I need to give a shout
out really quickly to our three awesome
sponsors that cover our classes here in
San Antonio, and even online.
So be sure to check us out at
WebTegrity.com to learn more about our
classes. We love WP Engine. They're
incredible hosting. I just had a client call
me today and say that she switched over
to them and it blew her mind at how amazing
their support is, as well as their staging
environment, and backups, and restoration
for any errors that might happen on your
website. Phenomenal. And you'll also have
incredible speed. Then there's also
WP Elevation. If you're a freelancer
using WordPress, you need to check out
their tracks. Incredible direction on how
to grow your brand and grow your business.
Then there's WP 101. If you love WordPress
tutorials like you're watching right now,
get ready to have your mind blown.
Go check them out because they take
video tutorials for WordPress to the next level.
Here we go!
Are you ready to learn some nerd code.
I'm gonna shrink down so you all can
kind of check this stuff out. Let's see.
So, I'm actually over in an environment
that you can go to right now.
I'll put the link in the description box below
in case you can't check this out.
This is where you go. Watch this.
It's just codepen.io
I'm going to click enter.
It's going to ask me,
"Are you sure you want to leave?"
It comes here. What I want you to do
is just click New Pen.
Up here at the top, click New Pen.
They've got a couple of different layouts.
Let's see if I can show you this.
I can't show you. At the very bottom
of the screen they've got a few icons
down here in the bottom corner of the
screen, right down here. Okay.
You can choose your layout.
This is the layout I like.
We don't need Javascript right now
so we're just going to stay here in
HTML and CSS for the time being.
I'm going to teach you what a
Div Class is. All right.
You know how whenever you start
your WordPress website a lot of times
it just says, "Hello world."
And this is my text happening right over here.
HTML. All HTML is is text intermingled
with a little bit of nerd code which
is the actual HTML that gives it structure.
That's all it is. I want you to think
of a div class — if you understand
what I'm saying right now —
it's this <div. It's a div class.
I want you to thin of a div class
as just a box. That's all it is.
And it can be any shape you want.
It's just a container.
Whatever content you want inside
that container, you can assign different
styles to, different font sizes, different
color background. You can do whatever
you want to inside of that container.
This is like a shipping container:
we're going to put everything inside
of that box. Then, on the outside
of that box, we're going to say
whatever label we want to address.
That's how we know how to affect
it inside the CSS.
Are you following me? Watch this.
Don't say, "No" yet. You're following me.
Here we go. I'm going to give this a class
which is the label for it.
That's all it is. You open quote and close it.
We want to jump ahead right now
and at the end of this Hello world we
want to close our box, or close our div tag.
This basically says we're going to open
the box here, we're going to put Hello world
inside of it, and we're going to close the
box after it. This is our div class.
In order to make changes to the content
sitting inside of here, we've got to give
it a unique name, which is our class.
Name. And then that's how we address
it inside or our CSS. I'm just going to call
this right here "header title"
That's what we're going to call this.
Nothing should change here.
Nothing should change yet.
We need to go address things to hello world.
We need to go give it some styles.
We're going to go into our CSS which
applies style. We're going to put
a period (that stands for class) and we
have to do it verbatim so header-title
is how we open this, and then it closes.
Inside the header title, I'm going to say
that I want this hello world to be
right dead center in the middle of my screen.
We're just going to say text-align: center.
Look at that. Look at this slide over right here.
It slide over right there.
And what if I wanted to say I want
my font size to be ginormous.
Let's say font-size: and I'm going to say 44 pixels.
Nice and big. Whoa! Look at that bounce out.
That's pretty incredible. Let's see if we
can go even crazier. Let's say background-color.
We're going to give it some background color.
You have to put a hashtag there.
#eaeaea. And you can play around with
all the different color codes. Look at that
nice little grey that came in there.
And let's give it some padding around it.
Let's say padding: and lets give it some
40 pixel padding. So it's nice and big.
Do you see how everything inside of
this div class is being affected.
What if I put something down below this
div class? "this is a sentence"
Look at this. This appears outside of
my box that I built because it's outside
of this div class. Do you see what I'm
doing here? Outside of the div class sits
my box, "this is a sentence"
If I wanted "this is a sentence" —
this little area right here —
to do something else, to look different,
I could assign a different box, or a
different divider — div class.
That's all you're doing with div classes.
How does that apply to WordPress?
I'm going to switch over to WebTegrity's website.
I want you to see that everything inside
of our website is coded in a different div class.
This orange tag up here at the very top,
this is all sitting in its own div class
to tell it to have an orange background.
Then it switches over to the menu
and it says have a blue background.
The way you find those things out
if you're trying to troubleshoot,
or figure out what your author may have
called that div class so that you can
overwrite it (we're thinking ahead) ...
I actually browse with Firefox.
I've trained with you guys before on some
other videos. I use their add-on, their free
add-on called Firebug. I can come in here.
It's basically an inspect element.
That's all it is.
I'm going to go up here to this top line
and I'm going to see that this div class —
look right here if you can —
this div class is called "top header container."
I'm going to move out of the way here.
So I want you to see that this says
"top header container" in my style sheet.
This is our HTML; this is our style sheet
(our CSS file) and look at this.
This little area right over here is our orange.
If we wanted to change that to our grey
that we were just playing around with,
we could say #eaeaea. And look at that.
This top line up here just changed from
orange to grey. That's how you go in and use
the idea of div classes inside of your website.
How cool is this, you guys?
I have another video about the basics of CSS.
I will put the link in ... Actually, I'm going to
put the link just right here for you so you
can click on that and, again, get another
perspective of what CSS is, how it affects
your website, but this was more trying to
understand specifically what a div class
does and is. I'm going to give you one
more link that you're going to be able
to play around with. It is over on W3 schools.
You can go over to W3 schools. I'll give you
a link in the description box below that
you can click on. I want you to come here
and I want you to click on this green box
right here that says "Try it Yourself."
Because when you do, it's going to open
up a screen very similar to what we were
just playing with over on CodePen.
I want you to see that the div classes
that are assigned here are unique in some ways.
You've probably seen this one before.
The means paragraph. That's actually,
in a sense, a div class. It's just one of those
that always exists so it doesn't have to have
the word div in front of it. The word
is another one. This says the entire of
our website. It has an open and a close, just
like the paragraph has an open paragraph here
and a close paragraph. In a sense, these are
kind of like div classes. You've probably seen
them also with the or header tags.
We're putting it kind of in bookends, or
in the open box, then we close the box.
Same concept completely with using a div
class here. You can play around with some
of these things and see the results immediately
right over here. How cool is this, you guys?
I hope you're nerding out with me and that
you're understanding a little bit more about
div classes and CSS inside of your
WordPress website. If you do make changes
to any of your stylesheets, you can always go
to your custom CSS box inside of your
WordPress website and drop in all of your
changes here and that completely overrides
whatever your author did.
And it's safe whenever you're doing
updates. You don't need a child theme
if you're using some sort of a custom CSS
box to do edits.
I hope you're having a great day.
Be sure to subscribe to our YouTube channel
over here in the corner. Click that little
play button that says Subscribe to our
channel so that you're checking us out
every single WordPress Wednesday
here on YouTube. We're giving you all
sorts of great goodies for WordPress.
Hope you're having a great one.
Catch you next week. Bye bye, y'all.