CSS change background color using simple CSS – Cascading Style Sheets Tutorial


hi guys and welcome to this simple CSS
video this is Jamie from http://www.system22.net and http://web-design-and-tech-tips.com in this series of
videos we’re just gonna cover some simple CSS tweaks that you can easily
make your website now what is CSS well CSS stands for cascading style
sheets and that’s the actual information that the website pulls in and it
dictates what the actual websites gonna look like background colors font sizes
and styles etc so I’ve got a very simple looking site here for anybody that wants
to follow along with this site I’ll make it downloadable I’ll put a download link
below this video now this is a little bootstrap site if I
pull this folder over here this is all it is it’s just a few files in here it’s
got an index.html document which is what we’re looking at at the moment I’ll just
show you that we open our brackets text editing software this brackets text
editing software is another free download it’s a great text editor if you
don’t have one again you can download it from a link below this video so this is
our index.html file and this is the skeleton of our little site here
basically this is just telling the browser what to render now to make it a
little more interesting to add colors and sizes it needs to have a CSS file we
brought to CSS files here the first one here is the bootstrap CSS which is just
dictating the default styles for the bootstrap framework and one that I’ve
created here called simple CSS this is the one we’ll be working on to add our
CSS if I go to it it doesn’t look like much
and it’s just got a little bit of a padding for the body and a minimum
height for our sections that we’ve got going on there all of this I will cover
in future lectures in this first lecture we’re just gonna do background color
change very simple very easy to do so if we go back to our browser here with our
site for anybody that didn’t know to get your site up in your browser all you do
is double click on the index.html file and it’ll bring it up in the browser
when you’ve got a live site online a browser will always look for the indexed
or HTML file and display it first or index dot PHP file so the first file
that you want on your site is usually the index file okay well let’s change
some background colors here so I’m using the Chrome browser here which again is a
free download if for anybody that doesn’t know and if you right-click and
go down to inspect or you can hit the f12 button if you prefer it’ll bring up
a panel like this we’ve got our HTML on the left hand side and we’ve got our CSS
on the right hand side as long as you’ve got that Styles tab it’ll show you the
CSS over here yours may be up the side you can change which way around you have
it just work with it anyway that’s convenient for you so to change the
background color very easy indeed let’s pick a section let’s say this first
section here again if I just right-click and inspect it it should pick up
whatever I’ve clicked on there if it doesn’t you can just click between
anything and it’ll highlight as you’re going up and down what you’re actually
selecting there so we want that first section so I’ve selected that over here
it’s got our CSS for that particular section there’s not much in there at the
moment now I want to change the background color so let’s just click
after this curly bracket here at the top element style
and right background : now we want to put in our color let’s
just select anyone from random here a bunch of come up you can use hexadecimal
you cannot use RGB you can use just colors like this say beige and you’ll
see it’s turned it to beige there but of course although this has done it in the
Chrome browser here once we refresh this site it’s going to go back to how it was
and we want to keep this as permanent but this is a fantastic way of testing
out ideas and CSS before you actually put them into your stylesheet if I
demonstrate and do a refresh here see it’s just gone back to normal so let’s
do that again now how are we gonna keep it that way
well what we’ve got to do we’ve got to put this in our style sheet so that
every time this site loads it pulls in this information that tells it this
section wants to have a background of beige now if we look over here at our
HTML this section has got a class off first and that’s what we want so we want
to tell it first wants to have a background color of beige so let’s just
copy this bit of code we put in here just left clicking and selecting and
ctrl C to copy then if we go back to our bracket software go to our simple CSS
file here let’s give it a title at the moment there’s hardly anything in this
CSS file but when you’ve written hundreds and hundreds of lines of code
it’s often difficult to find stuff so if you put a title in there it makes it a
little bit easier for you so just put a title in it’s simply forward slash star
star forward slash then go back in between and give it whatever title you
want so I’ll just call this first section now down below we want to tell it to
apply this to that first section so if we go back to the site here remember it
was cool class of first so we need to put period or dot and then that mean
first and like most coding it’s really
important you spell everything correctly all things will not work so after we put
first put a little gap there open and close some curly brackets give it a
space in between and we’ll just paste in that code we copied from our browser
just now background page just pull it back with shift tab try and keep your
code tidy and save it ctrl s now if we go back to our index file as it’s
pulling in from our simple CSS file every time it loads it should be telling
the first section to have a background of page let’s try it so when we refresh
this time it should stay exactly the same there we have it fresh let’s do
another one quickly let’s do the second section let’s inspect it give it a
background color of blue like I say you can use background color seems to work
this is kind of the old way of doing it but background works just as well or at
least seems to let’s say blue just copy that control-c back to our stylesheet and again we’ll do a second section because
these sections we’re gonna put a whole load more CSS for each section here now
let’s just check that name I’m pretty sure it was just second yep second so
dot period second yeah open and close from curly brackets give
it a space in between and again paste our code in there that we copied from
our browser like I say this time we’ve used background color just Lester type
works just as well but it’s entirely up to you both work so let’s do a quick
save back to our site do a quick refresh and that should stay exactly the same there we have it
so we’ve effectively changed the background color of that background
color of that may as well do this one too simple same process this time I’ll
just use background again I don’t even know what bisque is but
let’s try bisque okay it’s kind of pinky let’s just copy that one and back to our
style sheet again this is repetition title as we go through these we’ll be
adding more to these sections like I say padding and margins and text decoration
and box-shadow and what-have-you so again this is Dot third let’s just
check that that the class was third there we are
class third so it’s gonna be dot third open and close your curly brackets for a
change paste your copied text in there shift tab or just flip back in line with
the rest of them yeah we’ve got a little code on there semicolon ctrl s to save
back to the site refresh and it should say this thing so there we’ve had it
we’ve got an extremely ugly site here color scheme was but anyway that is how
to change the background colors on your little sections it works with anything
you can do it with your menu same thing you can actually do it with your texts
as well saying the thing so I will do it for this first video here if you’ve
enjoyed this video please subscribe to our channel we will be doing a lot more
with CSS as we go along if you’re interested in web design please take one
of our courses below we’ve got them heavily discounted for our subscribers
here once again this has been Jamie from http://www.system22.net and http://web-design-and-tech-tips.com
thanks for watching have a great day

Be First to Comment

Leave a Reply

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