How To Customize CSS On A WordPress Website

Home » How To Customize CSS On A WordPress Website

How To Customize CSS On A WordPress Website

  • Editor Rating
  • Rated 5 stars
$29
  • 100%

  • CSSHero
  • Reviewed by:
  • Published on:
  • Last modified: May 12, 2017
  • Functionality
    Editor: 100%
  • Ease of use
    Editor: 95%
  • Pricing
    Editor: 90%
  • Support
    Editor: 95%

Although I teach you how to customize CSS using free tools, you can also use a commercial tool like CSSHero to visually customize your website.

If you want to take your website and make it your own, then you need to learn a little bit of custom CSS. But don’t worry, it’s not that hard.

Editing CSS on your WordPress website doesn't have to be that hard, learn how...Click To Tweet

Don’t Be Afraid To Edit CSS

First off, CSS is not going to bit you, yes it can be a little scary at first, but after a bit of practice, you will know enough to be dangerous.

In fact, with a bit of practice, you will be surprised wth the new level of control you have over the design of your website.

CSS Basics

So to get started, you need to familiarize yourself with the proper format for your CSS changes.

The first line is the class that you want to target. Then in the bracket is the properties that you want to change.

In this example, I am targeting the featured image of a post and I am setting the display property to none, which will hide the image.

How To Find CSS Classes

The hardest part of editing CSS is finding out the right class to edit. Luckily there are free web browser extension to make this process easier.

Personally, I tend to use Firebug which is a free web browser extension that is available for Chrome and Firefox.

How To Change CSS Properties

This is where the fun begins, changing the properties. But the problem is, how to know what you can change and how to format it.

This is the biggest challenge for beginners, but have to fear, google search is here. Yep you heard right, just do a simple google search learn exactly what to enter for the properties.

And Easier Way To Edit CSS

Guess what? Yes, there is an easier way, and it’s called CSSHero. It is a WordPress plugin that you can use to easily identify elements and easily change their properties.

In fact, you can see it in action in this blog post, the button what takes you to more info on CSSHero was designed in CSSHero.

Conclusion

It is really important to learn some CSS basics to unlock the true potential of your website. Whether you use a commercial tool or one of the free inspectors, don’t be afraid to experiment and learn.

Pros

Easy to use
Preset styles

How To Customize CSS On A WordPress Website - Beginners Guide

If you own a website in this video is definitely
for you my name is Adam from WPCrafter.com

where I make WordPress videos for non-techies
and in this video it's going to be my guide

for you on how to use CSS and custom CSS on
your website in order to cover a lot of topics

in this video first were to talk about what
CSS is there were to talk about what CSS looks

like there were going to talk about where
you're going to put CSS on your website and

then working to talk about how to find these
things called CSS classes that were going

to talk about the properties in these classes
and then some easier ways to get this all

done now if you are just someone who built
your own website and everything that you see

on your website is essentially these styles
are created with this thing called CSS and

you might've heard that before so if you have
a website and say you bought a WordPress theme

and you want maybe a font to be a little larger
in there isn't an option for it and then you

go to the theme developer and asked them how
to do that they probably gave you something

called CSS and it would be a little snippet
of code and this little snippet of code when

you put it in the right place in your WordPress
website it's going to change how that element

or whatever you want to change it's gonna
change it for you and so that is what CSS

does the controls all these various styles
on your website now let me get off of my website

really quick in working to be looking at this
website I designed and were to be doing some

CSS on it now you are typically going to use
CSS for lots of different things your colors

are going to be set with CSS your font sizes
and weights and colors and spacing that's

going to be done with CSS you're just in general
spacing of elements you know how how close

lines of text are together or maybe the width
of a button or if it has rounded coat corners

all these things are done in CSS and if you
can know just a little tiny bit of CSS I am

going to tell you that you can get by you
can make these changes on your own some things

a little tougher than others but I'm in a
teach you how to do some of these things on

your own right now now no matter what WordPress
theme that you purchase if it has options

to control fonts and colors and things like
that invariably there's going to be something

that you want change that there isn't an option
for I know for me the WordPress theme that

I'm using on my website it has controls for
fonts like a whole bunch of colors and a bunch

of different things but I still see things
that I want to be different in that's where

this CSS comes in word if you know little
bit about this CSS you're to be empowered

to make these changes all on your own in your
knocking to be dependent upon a designer or

developer to help you make those changes you'll
be able to do it right on your own and so

that is a CSS in a nutshell you don't need
to be a master of and I'm not saying you're

in a learn that in this video nothing you
even need to be a master in it and I'll be

the first to raise my hand and say I am no
master at CSS add all but I know enough to

make changes that I want to make on my website
and that's what I want for you to know just

enough to make these little changes that you
want to make on your website so right now

I want to show you what some of these NCSS
entries actually look like and you might've

seen them before so actually before I get
started this what you're seeing right now

is of website we made in a video series I
recently release that teaches anyone how to

make a website that you're gonna deliver an
online course with and throughout the whole

video series I walk you through every single
aspect of building get but there is a part

in it where I put together a whole bunch of
custom CSS and I say just copy and paste it

in there and you do that and it changes the
styles of everything sorted actually be using

this website for this video so let me show
you what some of those CSS entries looked

like so for an example all your CSS entries
there to start with a CSS class and it usually

is gonna look something like this can have
a.and then it's going to have the class there's

no spaces in it and then sometimes are going
to see two classes side-by-side this is when

you're zeroing in and targeting something
a little closer and then what you have is

one of these brackets right here and then
you have the properties listed one by one

so I have the font size so this particular
little bit of CSS is gonna modify the title

of an area of this website so right here is
going to change the font size to 18 pixels

it's gonna make it a little thicker right
here font weight of 600 it tweaks the margin

and also it makes it so that the text bit
is aligned in the center of where it is to

see each of these properties they have this;
right here at the end and then this whole

statement is closed off with a bracket so
this right here is what a typical CSS change

or tweak or modification is going to look
like let me just show you another one right

here in this is a little bit more complicated
this is for an actual button and so there's

different properties on this one so were getting
more of a deeper target on this button right

here and right here I'm choosing a background
color of the button and this is just a typical

color code and then I've got a border on this
button and then I have what's called a border

radius this kind of rounds out the corners
of the button a little bit and then were specifying

right here the font family that the type of
font that is being used in this button the

thickness of that font and also the padding
around the text on that button so there's

a little bit of spacing around the text for
this button and that's what this is configuring

right here and so this is just another typical
CSS entry know where this looks complicated

you're not going to be writing this stuff
but I'm in a show you how were going to tweak

some of these things and it looks like I have
another one right here this is actually one

that I use a lot so if there something on
your page that you don't want to show so for

for example right here this is a CSS class
targeting a featured image on a particular

page and right here is the property display
none and what that says is don't show this

don't display this element even though it's
in the the code is hardcoded to show it this

is saying for the style let's just leave that
out I actually use this type of a property

a lot so for instance on my website if you
go to any my blog post there's all these entries

for author in posted date and publish Dayton
comments and all this kind of suck I just

hide a lot of that because I don't really
think that they need to be there so I use

this CSS property display none in order to
hide some of those things and so this is another

thing that you use a lot so this is typically
what you want to do with your CSS you want

to put it in your theme and there's a couple
places to do this there's more than one way

to skin a cat when it comes to WordPress so
a lot of times your theme might have in its

settings panel a location to put your CSS
that's one option there is also plug-ins that

you can add to your WordPress website where
you can paste it in there there is also a

place where you can kind of put it in a theme
file called your style.CSS file and you can

paste it in there if you like but there's
actually a newer way to do it in WordPress

they just release this I think in WordPress
4.7 there is a backend area in the customizer

to do that so if you are in your WordPress
websites you can click on customize right

here but if you're in the Bakken of WordPress
in the WordPress dashboard if you go to appearance

and then customize as well so I'm in a do
that from the front and right here to click

on customize this is probably where I would
recommend you putting your custom CSS and

so there's can be an option right here that's
his additional CSS now the nice thing about

this this is a WordPress thing and what's
also nice about this is when you paste in

this little bit of CSS if you're on the page
were that would affect that page on your site

you will see it applied in real time so you
can see if you like it before you commit to

it so for example let me go to most of the
custom CSS I put in here affects these courses

in the course layout so let me just jump into
this one right here and working to see a poll

of intimacy I use custom CSS that actually
customize the look of a lot of these things

so this is how it looks with my custom CSS
in their summoner click on additional CSS

this is this custom CSS I've added him and
actually remove all of this and it goes to

hear and actually I can just highlight it
all and remove it and now you can see how

it looks without my custom CSS you can see
the colors changed a little bit there and

some of these fonts change this is an as wide
as it was this color changed all these things

change the stuff right here in the sidebar
words listing out all these lessons you can

see the font became a lot larger I like the
smaller font because it just overpowers it

and so this is what it looks like without
my custom CSS, to go ahead and save it and

publish that and what I want to do now is
show you how you can begin and this is beginner

friendly changing some of these CSS properties
and you can have more control over your website

so what I need you to do is download a tool
for your web browser now if you want a website

you really should have multiple web browsers
on your computer personally I have Safari

which I use for most things I also have chrome
and I also use Firefox now the nice thing

about chrome and Firefox are they allow you
to add these things called web browser extensions

what these do is they add new features to
your web browser and you should really get

in the habit of using an taken advantage of
some of these extensions so the one I need

you to install if you're using chrome which
I many use for this tutorial and I would prefer

you use that if you're following along you
can go to Google and do a Google search for

firebug for Chrome and actually firebug is
also available for Firefox so you can go ahead

and Firefox and do a similar search and search
for firebug for Firefox and then you can download

and install this extension so here I am on
chrome I would downloaded on this link right

here where it says the chrome.google that's
the chrome extension store you don't have

to buy anything there is no checkout process
is literally just the official place to get

the extensions for your web browser so just
go ahead and click on this link right here

and then you're gonna see this pop-up happen
in for meats is added to chrome but for you

you'll just click on the button right there
in the right top right-ish area and you'll

go ahead and install firebug in your web browser
and then you're getting get a new option in

the menu area or the control panel whatever
you want to call it of your your web browser

and it's right here there's like a little
blunt bug here now I actually use several

different extensions in my Firefox browser
and you should too I use this one right here

to find colors and it's called color Zillah
so you can just do a search for color Zillah

for chrome and you can find this extension
herein allows me to find the exact color code

of any color on any webpage I use that a lot
because I'm a collector of colors and then

there's this other one right here called what
font I used to actually call this the wrong

name I would say what the font but is not
called what the font is called what font you

can do a search on Google for what font chrome
and then you can add that to your web browser

what this does is it actually allows you to
see the exact font that anyone's using on

any website so this is how you can kind of
get an idea of what fonts that you like and

how they they work together but in this video
work and only use firebug's you have this

little bug right here so go ahead and add
firebug to your web browser and essentially

skin allows to inspect things on your website
and that's how organa can to get to this information

on these CSS classes so I'm in a go now that
I have that installed on the new XML leave

this in the customizer right here here's the
thing firebug stuck in a work if you're in

the customizers is not to work right you need
to not be in the customizer so right here's

what I'm a do I want to go to the front end
of my websites and I'm going to go to that

same course page that see right here you can
see some of this was customizes well actually

when we started on here so you can change
all kinds of things with CSS so one of the

things I did was I change this I had a different
font I had it centered I had it more bold

I was hiding some of this information here
that I didn't want to add there because I

just didn't like the way it visually looked
so much as jump in there and see what we can

do with CSS so what you need to do is click
on the little bug right there in his can reveal

this panel right here okay so here is our
panel and let me go right here and move that

that's is high is my page will go that's fine
and then you want to click on this and inspect

button soma click on inspect and let's see
so here is that font right there you can see

how when I have the inspect button pushed
and I start moving my mouse cursor there's

this blue box that kind of wraps around different
elements are right here it's wrapping around

this image and right right here if I move
it off to the side a little bit it doesn't

just do the images does the image and all
the stuff beneath it so this is how you can

target exactly what you want to change so
for instance right here is that font that

is the title right here so if I click on it
right there I'm now kind of locked into this

element now right here you see two panels
right here on the left you see this panel

that's showing you a bunch of code and this
is the different code that gives the web browser

the instructions to I want to show on your
website but right after the right here is

that custom CSS that I was talking about in
so you can see the looks familiar from what

we were just looking at right here with these
different CSS queries the IDs and all the

properties and so right here we see that same
thing now what's nice is it's showing us these

CSS properties for what we clicked on this
element we clicked on and so what I like to

do usually is just test my changes here and
then copy and paste it into the customizer

and this is pretty much how you identify your
CSS classes and make changes so for instance

here's a property that says a border top five
pixels and that's the space above this element

right here so if I wanted to increase that
I can increase the number so instead of 15

I can put I'm sorry instead of five I could
put 15 and you could see it or immediately

pushed it down now it's not that dramatic
but if I put a bigger number like 45 you can

see it's a lot more dramatic and this is how
you start to change CSS so you can put these

other properties in there as well so if I
double-click right here in there's a new entry

that I can enter in here for a CSS property
I might want to add to this maybe to align

it to the center or something along those
lines and here's the thing you have to find

the CSS properties if it isn't already listed
here and what you do is you go to Google right

here and you just do a simple search so I
can do see a simple search for CSS center

alignment text so there it is I just did a
real simple search first center in line text

and I put CSS not to believe you're going
to see the first result be this W3 schools

you can get so used to seeing this website
here and so I just click around in there and

I'm looking right here so says I can put text
align and then center and maybe that might

do it so let's let's give it a shot some going
here and I'm gonna put what was it text align

center Solomon enter that now okay. As I entered
text align a center and did you see what happens

now my course title or this element that I
just targeted is now centered and I did that

by just going to Google searching CSS alignment
text center and then it pulled up this page

and it teaches you some other things we want
to line it left you want to line it right

this is essentially all you need to do this
is the property that you need to put in there

and so now if I wanted to keep this change
it's not live because I'm just doing it in

this firebug what I would do is I would highlighted
here in firebug and then I would put it in

my clipboard so for me it's command to see
or if you're on a PC it's control C and that

puts it in the clipboard or you can right-click
and do a copy memo to go to the customizer

here and actually here let me get to that
same page the course index page so this is

what it looks like before my CSS and then
when I pasted in here that's what it looks

like after you see I just changed it and then
to make this alive on the front end of the

website I click save and publish and now my
text has been centered so that is some basics

of how were going to do this kind of stuff
so now why don't I get into one of these courses

let me click on this right here and let's
see what else we can do here so this title

is enormous actually my theme probably has
an option there to lower that and we just

looked it well let's see maybe I will show
you swimming do and inspect on its and their

I'm grabbing it now I will tell you that with
CSS and using firebug it's really easy to

change your text and things like that sometimes
you might come across an element that's a

little harder to find so anyways I've highlighted
that it's his entry title and this is actually

it right here it's this entry title H1 property
so it's showing is itself 40 pixels so I might

want to lower that to say 30 so I can change
it from 40 to 30 in there it is you saw the

font when in the lower right away sometimes
when you change something in CSS it might

affect other areas of your website that's
why it's always good when you copy it into

the customizer to take a look at your website
and see how it might be affecting other things

here's the fontweight in it says bold so it
is kind of bold and if you don't know all

of the options of what you can put in when
it says fontweight you would just go to Google

and search CSS font to wait and then you'll
find that same W3 schools or whatever or whatever

website pulls up but it's going to usually
be that website you just go there and you

can see all the various properties that you
can enter in actually one which has do that

in this video so let me go back and it says
CSS I'm going to enter in a fontweight okay

so I entered and fontweight out and here is
Google actually giving me some information

so there's a bold and it's equivalent to 700
I can put normal border lighter whatever so

let's see what normal looks like, so it's
as bold eminent type normal like that you

can see it went to a more normal fontweight
so this is how you're going to find these

classes then you're gonna go to Google and
find out what you can put in these properties

to make these changes you're gonna make it
in firebug then you're going to copy the change

you're gonna put it in the customizer see
how it looks and then save it it's all really

simple okay so that's fonts but let's look
at some colors right here so we have these

is blue here I don't necessarily know if I
like it so let's let's see what we can do

here some click on inspect and okay there
it is CM in a go right there and I'm in a

click on my mouse and now I have it identified
so here it is it says LMS axis plan title

by the way these pages are all generated by
plug-in called LifterLMS which is what I use

personally and I used in that video series
to add the ability to facilitate online courses

enroll students in all these kinds of cool
things now with this plugged in they don't

give you any options really to to fine tune
control these colors and some of these things

so you have to tune all in custom CSS really
but you can see how easy it is so one of the

things I like about using firebug is when
you see a color so it's his background right

there when you have your mouse over it it
actually shows you the color color code obviously

but it actually shows you the colors you can
know you have the right thing so the background

is the blue and works is color that is actually
the font color that's inside this little area

here so I wanted to change both of those I
could change it right here for me to show

you by putting in a different color code now
in the video series I did go over color codes

finding these color codes and finding a color
palette and all that but I'll just give you

a quick snapshot every color is represented
by a six digit six character color code and

so that color code is can have letters and
numbers in it and so this blue is this a six

digit color code right there so let me change
it to six threes which is black so there it

is I just changed it to black and it was that
easy to do guys so if I wanted to keep that

as black and if I wanted to tweak some of
the other things we've got padding now padding

is a spacing property padding is the space
inside what you're looking at margin is the

space outside so if I wanted to push these
two columns away that's margin it's gonna

push him away but in this box if I wanted
there to be more space in it that's gonna

be my padding let me to show you so it says
that the padding of 10 to know let's just

see what happens when I change that to 30
you can see how it became a lot bigger I believe

this is the padding on the top and the bottom
in the left and the right but since it's already

centered you don't see it left and right changes
just the top and the bottom so if I wanted

I could make this five minutes it's it's thinner
than how was by default I actually like that

a little more so here some custom CSS we just
came up with so I can highlight copy at my

clipboard or you can right-click and copy
and I want to put it in here some neck and

put it on the same line I'm in a go down to
lines like that and paste it in so were knocking

to see anything happen on the front end here
it's because it doesn't this query doesn't

affect this page it's when we were actually
looking at one of these courses so we just

take up take a look in there and I scroll
down and there it is it's that different color

and I kinda thinned it out a little bit like
that so let's go back and see what else we

can do so we are and he knows how to change
these fonts and things like that let's go

ahead and see what we can find with this particular
button right here buttons or something you

might want to change from time to time so
I'm going to highlight the button you can

see it's easy to grab the blue box around
the button and him to go ahead and click on

that and let's see right here is the position
this first bit here is the position of the

button and then beneath it is just your general
button properties so now that that's done

let's let me show you how to hide something
with CSS and so right here some information

that automatically gets pulled and I actually
don't like this information being here as

well and I probably gonna want to hide it
some and to try to inspect that so here's

an entire block I probably don't want shown
oh wait there it actually looks like we just

highlighted the entire box I probably would
want to hide this entire box to let me go

ahead and click on the mouse right here we
see the class for this entire box there so

I want to use that display none that I showed
you earlier some of the double-click here

and I'm then enter that in and there it is
display none and you can see what it did that

whole box that I highlighted in the inspector
and put the box around it just hit the whole

thing by using this property display none
some to go ahead and copy and paste this one

in II like that a lot let me go ahead and
put that down right here and you can see just

went away just that quick so this is kind
of the basics of changing some basic things

now changing basic things is easy it's actually
very easy but some things are going to find

her actually a lot harder to target with a
firebug or something like that and they really

take more experience with CSS and coding so
some things are going to just be really hard

to find so if I was on the front end here
I know it like this background area here's

a little bit hard to find some these things
are going to be a lot harder to find and to

target so princes if I wanted to change this
background color right here you can see I'm

I'm looking for something says background
and and has this color code but I'm really

just not seeing it in then when I highlight
the whole box here let's see if I can get

the whole box like that not seeing grandma
to be able to change that background color

but actually looks like I just found it right
here like so let's see what happens when I

change this color I'm a just change it to
let's change it to all white even though I

probably wouldn't want this all why it's so
all-white is success actually looks like I

did find that there but you know it takes
a little getting used to trying to ID and

find these targets and stuff like that and
you'll be able to play around with it and

just try to figure some of these basics out
and go to Google but I wanted to show you

another way a tool that you could use in order
to make some of this stuff a bit easier now

they have these tools there plug-ins that
you can add to your WordPress-based website

that are going to make it easier to kind of
target these different CSS classes now one

of them is right here is called a CSS hero
and what this is is the plug and that's can

add this option here that instead of having
to keep going to Google and finding the different

properties that you can add to any CSS elements
or class you can do it all within this tool

and what's needed is it also has a bunch of
premade or ready-made styles and I've actually

been using this on my website to hit those
areas that I'm having a really hard time finding

because I really don't want to spend all day
to change the font or to change the color

of a button or something like that now this
tool right here is actually not that expensive

it's only thing is $29 or something like that
and I I look to see if there was a free plug-in

that allowed you to do this and gave you this
power but I really couldn't find any there

were all kind of basic they really don't do
much other than give you place to put the

CSS which you don't even need anymore anyway
there is another one that's a couple dollars

less that is on code Canyon but I've been
using this one and it's pretty amazing I think

says on their website they sold about 10,000
copies of this so it's a very widely used

plug-in and I want to just show you that this
plug-in right now so I want to go ahead and

install it so let me just actually save this
stuff that I did already let me get out of

here and go into the back end and then I'm
in a go ahead and go to plug-ins add new and

I'm going to upload and install this plug-in
GOING to drag and drop it over here now I

haven't tested this plug-in on this site I've
only use this plug-in on my website it to

change in buttons around and things like that
actually actually show you that on my website

so let me pull up a page really quick let's
see I know right here I changed out some buttons

to let me click on that okay so here I am
on my website and I change this button style

was more basic button and I used this CSS
hero to target this button and put this really

neat animation and there in this neat style
so we actually see if I can do that on the

the website that I'm just showing you right
now that's one example also on my website

I have a hard time changing this the white
for some reason my theme did not have an option

to changes it was in a hat inheriting up the
black color and so you could barely see it

and so I was I just couldn't figured out but
then with this this one a CSS earplug and

I was able to do it and you can see I was
able to do some other fun things as well so

let's go ahead and see what we can do with
that it's already uploaded let's activated

now I do need to click on this button right
here in order to authorize it so this thing

essentially slips in the license code someone
do that now okay when I do that it takes me

to this page which is really cool it shows
me I only have a five site license and this

will be my third installation so I'm a in
go ahead and click on get a license and then

it's going to boot me back to this really
cool screen right here that kinda tells me

how I can use it and then I'm a click on this
and got it let's go so now it's actually installed

on my website so I have this new option right
here that says CSS hero so I am on this page

still so let me do a refresh and so there
it is CSS hero and also gives me this little

lightning bolt to activate it so I mean I'm
just shooting off the hip let's just go ahead

and click on CSS hero and see what happens
so it's going to do this little bit here where

it turns it on and what it's gonna do is analyze
my page actually took me to the homepage I

don't I don't want to change anything on this
home pay someone to go back to that course

page and I'm able to do that, to go here as
well okay this is where I want to be so let's

see if it allows us let's just see how easy
it is that maybe change this blue what you

do with the CSS hero and I've been using it
a while it just takes a little bit of getting

used to so what you want to do is click on
this little blue icon here in the what you

do is it does something similar to firebug
where when you move over elements like that

it tries to identify this a CSS class and
I can click on it and start editing its properties

if I wanted to what you start here let me
go right there let me click on it and show

you what it does so that when you first click
on it it gives you all of these various options

here of what you are trying to target in your
typically it's going to be the first one right

here it's the content title here so then when
you click on that now gives you all of these

options right here so for the text I can click
on text and now it's what I'm comfortable

with right I can look here and I can see that
the text color is white and I can change it

right here if I wanted to change the font
family I can going to drop down right here

and I click on save this font and you can
see the font changed okay so you see how easy

it is a fire it's 18 if I wanted the size
to be 20 I can easily do that right there

if I wanted it to be thicker or thinner I
could just go up to Boulder something like

that or go down you can see I got my font
styles here I can make it YOU can basically

have full control over the style and even
end in a more easier way to target these various

styles with CSS hero I can change my alignment
to be left or centered I can change all these

properties now once you go through these properties
you can go up this little arrow right there

and now I can start changing some other things
if I wanted to so right here was the backgrounds

let me click on that and you can see there's
the black color I can change it or if I wanted

to I can put one of these different background
images in their or a pattern or something

like that and Lemme go back and you've got
all these things for spacing positioned there

so many different things that you now in a
more easier way have control over using a

tool like this to let me go ahead and click
on save and now it's actually saved and it's

going to be live on the front end of the website
so now we can start editing some of the properties

of this so if I wanted to say change some
properties of this font right here I can go

to text and if I wanted to say make it a little
smaller I can do that are larger it's whatever

I want now let me go back and I can also buy
wanted to put a border I can go ahead and

input a border taken off there's all these
various styles that I can do if I wanted to

say round out my corners a little bit I think
I could do it like this yeah you see how it

rounded it out a little bit leave that it
the sleeve that it 10 you can easily do that

while that actually looked kind and I said
I think I like that others all these different

options that you can do so for background
we can let's see there's a color picker here

if I click on it I can do whatever I wanted
with the background color if I wanted it to

be white I can do that but it has is nice
easy to use color picker right here or if

I wanted to use a background image I can do
that or there's a gradient tool right here

actually this is kind of dangerous to do because
I don't have any of the color codes I would

want in there to do a gradient let's even
had some here sums preset settings here actually

don't like some of them but let's go through
them black-and-white so you get the point

right there's all these different options
and it's a little easier then targeting get

with firebug and then searching for the property
and that you can put in there and doing all

these various things it's just a little bit
easier so there's all these different things

that you can tweak and though you could do
other things as well so for instance on my

menu navigation here let's see if we can change
something there let me click on save and then

I'm in a go ahead and target my menu it's
just reloading the page when it targets these

menu items right here so let's see them in
a target this right there on this one I think

I want to click here and let's see if we can
make the font a little larger if that works

and you can see I actually got that one wrong
let me just go back and let me close this

let me read target that like this I clicked
on the wrong link let's see if I got the text

now see up there we are were making our text
larger or smaller whatever you want but what's

really nice is being able to change the font
to whatever you want right here so anyways

you can see how with a tool like CSS hero
it makes some things a bit easier but you

can to get started use everything manually
I like I showed you are ready that's how I

edited CSS for probably the last four years
I've only recently started this month using

CSS hero even though I've known that it's
been around I've only recently begun using

it and if you want to learn more about how
to use this maybe I can do some more videos

on how to use a CSS hero get the most out
of it now I do have a link down below in the

video description and in the pin comment to
these CSS your website I think I might put

together like a bonus package if you do end
up buying it through my link a lot of times

I put together a bonus package where I might
give you one of my paid training courses I

think I might add this to that so when you
do click on that link to send you straight

over to their website I'll send you to my
website where I'll tell you about the bonus

package that I'm in a put together if you
do purchase it maybe it can help lighten this

thing of having to purchase something but
for me I really want to control the styles

of my website and have an easier way to do
that and I really find that CSS hero makes

it easy to do that actually didn't make this
video to tell you about CSS euros more just

to try to empower you on how to make these
style changes all on your own on your website

and I hope that I've accomplished that in
this video now if you have specific CSS related

questions let's go ahead and get the discussion
going down below in the comment section I'd

love to hear what questions you have about
CSS I'm sure I left something out and that

would've been on purpose go ahead and leave
the question down below I'd love to start

this dialogue with you guys about CSS and
get everybody helping each other to customize

our websites and really make them look the
way that we want them to look

Adam @ WPCrafter

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Leave a Comment

Your email address will not be published. Required fields are marked *

Share
Tweet
Share
Pin
Buffer
Email
Scroll to Top