Web Development Tutorial for Beginners (#2) – Basic CSS – How to build a website with HTML & CSS

out to do web development in the
previous tutorial we covered basic HTML how to put together HTML page we learned how to do tags: opening
and closing tags we learned kinda what some others
popular tag names are lastly there’s only ten or fifteen you
actually need to know anyway so hopefully by now you’ve taken that
course and you’re comfortable I was kinda writing out basic HTML tags this should look decently familiar to
you if not go back to the last video and get comfortable I promise it won’t
take very long there’s only a few tags you have to learn and it
really feels weird at first if you’re not used to writing anything that feels like
code but I promise it comes very quickly you
won’t be confused for long so I’ve done years I’ve taken a modified
my example from the last video and now have my html with a header and a body and in that body I have
header one which has my website I’ve got an unordered list with a link
to three different pages and I’ve got I also a little bit of content you notice this tag up here. I left this out
in the last example cuz it didn’t really apply to learning basic HTML tags but we’re gonna add this at the top
every HTML page and this just declares that the document
type: is HTML and putting like this actually means
html5 so it all you need to know is that it needs
to be there at this point it basically tells your browser a
working with an html5 page what I did then as I created a new page called page 2 dot html and I saved it
in the same folder that I created another page called page
3 dot html and it’s also in the same folder you can see here I didn’t include a full http:// WWW dot my website dot com all I did is put a
it’s called a relative link if you don’t put that full thing it
looks starting in the same folder that you’re in now and the reason we called our first page
index is because index is what its automatically going to
look like look at when you load a web site if you go to Google dot com a you know there can be some
configuration changed to make it different but by default a
website is going to look for index dot HTML so one thing I changed
here is the first /li if it’s on the page that you’re on now
there’s not going to be antag Because if we’re on home we don’t have to go to
Home were already there so as you can see on home this is not a link page two and three are linked and I can
go to page to you and it loads page to you and now home and page 3 our link because home is
going index and three is going to page three
so I can now navigate between all three pages of my website..see it’s not
too bad I basically have a website it’s up and
running it’s just ugly because there’s no style so let’s
get into how to add style to your webpage I’ve saved a file called main dot CSS and a CSS stylesheet is how we do
styling And it basically works like this: you have a
selector which is where we take up something
we’re going to add style to and then you have a rule the selector
basically as brackets anything within those brackets gets
applied to the selector so the rule you have the property that you wanna
change in the value wanna give it and then you’ve got a colon and an there’s
a semi-colon this’ll probably be the weirdest part about CSS is getting
comfortable going selector open some brackets go back go up property collin value semi-colon probably looks weird
feels like it’s a lot to memorize its gonna come really fast type your
selector open some brackets take a property pick
a value for you’re done so in this case we picked
body so anything within the body is now going to
get a background of 999 and we’ll get into this a little bit
later but for now that just means a background of gray say
what will make it black well make it read for now that’s a
little easier to understand so the body now gets a background thread
knows when I refresh nothing happens because this style sheet
is not attached at all to my page so there’s two ways
you can get style to your page you can start by just going
style and add style tag and will make sure we at this attribute: type equals text slash CSS because we’re
doing CSS style and now I can go body background Nope, not bottom red it save hey check it out there you
go so you’re thinking why would I not clearly do it this way
this is much easier but what if we want to type
in a 150 different rules and we want to be shared between all our
pages on now either have to copy paste or you put them in a separate file which
is what we’re gonna do here we put background red in here and now we
can link to it going to do a link and this href is
going to be I’m going to link two styles main dot
CSS and I need to do rel=stylesheet and basically what that tells it is I’m
giving you a link to a style sheet and we can also add
type equals text slash CSS most new browsers don’t
need that some old browsers are going to so now
we’ve done is we’ve got at this link and now all I have to do is add this link to each page and each page is now going to get all the styles that
I put in main.CSS so you see as I navigate every page
background is hideous red I’m going to change that to a slightly
more pleasant color 999 which is kind of a grayish color it’s now we can add some more styles
let’s say we want to make our headers a better font actually let’s make the
whole body a different font fonts family Ariel that’s a little bit cleaner
looking now the font family is Arial now CSS is
where you get into a decent bit more memorization there’s
only about 10 or 15 HTML tags you use there’s a lotta
CSS properties that you can adjust because as you can imagine every ounce of style but the whole page
has is coming from the CSS properties so it’s just gonna take you a little
while you wanna start off with some things
that are more comfortable and work your way up there’s not it’s not an endless black
box there’s an end to it it probably will only take you a few
weeks and all of the sudden you realize wow there are no more CSS properties that I
don’t know it’s just a long few weeks have learning
so definitely give yourselves a little bit I’m have patience and it will come very
quickly but first your gonna feel like you’re just completely drowning in the ability to not do anything that
you want to do but we’re gonna show you a little bit
more about selectors here real quick so here’s how you..I’ve shown you how to grab
things by tagname that’s what we did here we just created
a tag name: body usually you don’t do that to too often you’ll do it for body you’ll do for h1
so I’ll go h1 I’m gonna go color and this will be like
a 333 color and now you’ll notice my h1 got just a
little bit lighter let’s change a little bit more 2666 all the “mark of the beast” jokes are coming up basically if you go all the way to 000
you’re a black go all the way up to you 999 you’re at a
gray and anything in between is kinda well
and between something like that 555 but also a fist fight to any each to use
some going to do h1 common H to you and now you’ll notice my
h2 also has a gray color I can also make this PL on any my
paragraphs have a psych make this any allies on May ally status I could make
this any A’s on a stab this and now I’ve styled
everything with a color 555 I don’t eighties to do
that though so maybe I’ll make my A’s a different color later on let’s
make my A’s a little different color blue ago act green everything’s green area everything’s blue I want to change
it up a little bit so now we have every page is inheriting
the styles so it’s starting to look just a little
bit better up so let’s go ahead and add maybe a couple more styles here let’s give paragraphs a background color let’s make our paragraphs color whites yeah that spill nice I’m going to go and take PL this cuz I
don’t wanna target my P’s anymore and now we want to add just a little bit
of padding to it see how this is like completely cramped we want that paragraph to have a little
bit more padding so that’s call patty and here you get to define unsafe I
pixels so now you notice to put five picks a
padding on all sides make it a little bit more 10 pics patting their ego and say just
want to be on the top and the bottom which you can actually do is if you do
one value gets applied to all sides if UT two values then it goes top bottom left-right Sun ap I say 10 pixels era
pixels top bottom half 10 left-right have not well the right goes all the way cuz it’s
filling up page that’s something we can address later if
you do four values then you’re doing one for each side so
I’m going it goes like this: if I go one value and it does all ID to you it’s going top bottom left right if I do four that kinda goes around
clockwise just like a clock starts at the top top bright bottom left so I can actually add four things
younger 10 pixels 10 pixels 0 pixels on the bottom and 0
pixels on the left so now I have patting year had here
which can’t quite see because once my text gets over there
you’d be able to see it and I got some there for now was gonna
go 10 pixels on all sides and call it a day so now any paragraph I
add on nemi pages is going to get a book our
gray background white text and a nice little padding
their hey let’s experiment just to find out at there some more page to content it’s
nice everything I get throughout my entire
site every paragraph is gonna have a lovely little look but say my HQ I’m gonna leave that right
where it is so this is kinda basically how we’re
gonna style some things let’s say we want just this one paragraph have a different color to it what do we
do that we want to give it what’s considered a class yes I know we’re not supposed to have
upper lower class and the classes are bad but in this case that’s just what we’re gonna call it
class I secondary let’s do that class secondary right now
nothing changed but now I can add a rule targeting class
secondary and I’m gonna add a dot the dot means
I’m looking for class so I thing I put in here on our override what I put in there I’m gonna go background:none and this colors gonna be let’s make this a little bit have a more
greyed out color let’s see if that happens 555 there you
go it’s actually make it even more great out some subs on barrio so now I have any paragraph gets this and anything
with the class secondary it’s that because we specified
a class a class is now more specific if you’ll notice even if I put secondary
be four usually what happens by the way with CSS
rules is what comes after is gonna override so if I had another p we’re all here and
this background is red now this is overriding this because it
happened after that’s why it’s called cascading
style sheets kinda cascades it can get defined appear but you can override it as you move on so what we’ve done now as you notice
class does not get overridden because class is
considered more specific its and issue up specificity so now secondaries get no background and
they get a color 777 another way that you can target
things oh yes and a nice thing about classes
can apply to multiple things they can apply to you this I can also
make this paragraph have a class secondary as
well so now they both have secondary I can
also make this /li right here at a class secondary and tickets great out as well it applies
to anything that you at the Class two another way that you
can make a very specific issue in targeting is by ID ID equal special the difference between
ID in class as you can only have one ID per page so
I can only have one thing that’s called special on the page I
cannot create two things with an idea special you’re
breaking the rules so I can say secondary has that’s copy
paste here and now there’s something with an idea
special and this background will be read because after all its special and now there you go so each page can
have one thing called special but they can have as many things called
secondary as they want usually you know you wanna class things
more than you want to I D things ID is only is something very specific and you know for sure there’s only going
to be one a common occurrence that is ID equals
navigation there’s usually only one primary
navigation on the page so in this case I I kid make my you l have an idea nap and
that’s the kind of thing that you’re usually use an ID for I ID’s are a little bit
faster as far as if you have a thousand rules
ID’s are going to be a little bit faster after your web page to appear other
classes are going to be a little bit slower usually really are not going to notice
though unless you get tons and tons and tons and tons and tons CSS classes so years kinda how we
basically style at a web page in our next video
we’re going to cover some more advanced CSS rules


Add a Comment

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