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

Articles, Blog

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

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

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

  1. 2018, looking for help with css not working?
    Try: <link rel="stylesheet" href="main.css" type="text!/css" />
    Then restart your browser.
    Worked!

  2. https://www.youtube.com/seoservices
    https://www.youtube.com/watch?v=qxB57uIdxCg
    https://www.youtube.com/watch?v=SP–HybxL9c
    https://www.youtube.com/watch?v=Egx_2e9gd_4
    https://www.youtube.com/watch?v=5_2TbjFAnM8
    https://www.youtube.com/watch?v=tb2owR2VDO8
    https://www.youtube.com/watch?v=i9Dc_Ifyk-U
    https://www.youtube.com/watch?v=LvdFymbJORQ
    https://www.youtube.com/watch?v=LcU-B8ScQLA
    https://www.youtube.com/watch?v=Bbp_FRDW_G4

  3. The background is not turning red, here's my code I'm not sure what I'm doing wrong.

    <!doctype html>

    <html>

    <head>

    <title>My Webpage</title>

    <style type="text/css">

    body {

    background: red;}

    </style>

    </head>

    <body>

    <h1>My Website</h1>

    <ul>

    <li>Home</li>

    <li><a href="page2.htm">page2</a></li>

    <li><a href="page3.htm">page3</a></li>

    </ul>

    <h2>This is my homepage</h2>

    <p>And all of my homepage content</p>

    </body>

    </html>

  4. styles/main.css did not change the background color until i got rid of styles.
    <link rel="stylesheet" type="text/css" href="main.css">

  5. how can i contact u?? i cant get the background to change colors im pretty sure i check everything in the code to make sure it does but after i save the file and refresh chrome to see if the html file change color it just doesnt please help!!!!!!
    ps problem solve i search tru coments and found the reason href="style/main.css"> style means folder main.css means the file pretty much is location in the computer of ur css file

  6. i literally copied every little think. And it looks way different, no color, no good layout and no title. While i have everything the exact same as you do. I checked more than 10 times..

  7. OK guys, I just figured it out. It just took me a few hours and some logical skill. So pretty much, you can have 2 scenarios.

    Scenario 1
    If you saved the CSS file in the same folder as the html files, then use this code:

    <link href="main.css" rel="stylesheet"/>

    Scenario 2
    If you saved the CSS file in a different folder then the HTML files, then use this code:

    <link href="styles/main.css" rel="stylesheet"/>
    /
    |
    |
    |
    'styles' is the name of the
    folder you saved the CSS file in. It can be different for
    you as you might have named it something else. Only
    use this method if the CSS file is saved in a different
      folder then the HTML files.

  8. please help is not changing color at the same time help please

    <!doctype html>
    <html>

    <head>
    <title>page 2</title>
    <link href="styles/mai.css" rel="stylesheet" type="text.css">
    </head>

    <body>
    <h1>Horus Accessories</h1>
    <ul>
    <li><a href="index.html">home</a></li>
    <li>page2</li>
    <li><a href="page3.html">page 3</a></li>
    </ul>
    <h2>hellu</h2>
    <p>hi</p>

    </body>
    </html>

  9. Why my css is not attaching with with all these pages.??
    I can't chnage anything by my main.css.
    Can you help me please?? 😣

  10. I can't link css file with my webpage…
    Help me to carry out with this problem
    My browser is Google chrome
    And please tell where to save and create css file

  11. Hey man whatup… firstly thanks for the videos, they teach you quicker and better than courses that bankrupt you

    Im struggling to link my main.css file to my html file and Ive used all possible links. such as <link href="main.css" rel="stylesheet" type="text/css"/> …. can you give me a tip on what else I can do

  12. you should showed how to make three different pages and how to link them together …it says beginner but that bit is advance if you start it like that

  13. I can't get the <link href="style/main.css" rel="stylesheet" type="text/css" /> to work i have checked sooo many times, I have copied exactly what the video is showing. Any ideas? Using the '<style></style>' approach changes the back ground colour and works as should.

  14. iv used many codes such as <link href="main.css" rel="stylesheet" type="text/css" /> . but its still not working, the .css and the .html files are all in the same folder. i need some help plz

  15. Soooooooo, i used text-align: right; in a class type called redirect (which pretty much redirects .—-.) . However, the text (yes with the link etc.) is centered without adding a <center> tag. Any help would be nice :).

  16. Thank you very much. You are the best. In the past two years I used to avoid you insearch for quick tutorials and never got anywhere solid…. It was frustrating..and end up giving up .

  17. Just so you know I am using Notepad ++ and for me to get the CSS file working I hat to put it this way for some reason
    <link rel="stylesheet" type="text/css" href="main.css">

  18. Absolutely worth every second of every video. CSS is my only option to completing the most important part of my ongoing workflow application. Reviewing just the script and figuring out the logic, is tiring. These videos have proved to me that only quality videos will help. It's been my 2nd week in the hunt for anything useful and it's these videos that have now made everything so simple. Can't thank you enough. I'll be sharing this with everyone

  19. Bro. Your stuff is helping me so much! I've always been intimidated my development but you make it easy.

  20. I'm having trouble linking my pages together. With <a href="page2.html">Page 2</a>
    When I click the link it opens up a new blanck tab with none of my code even though I copied the same code.
    If someone could help me with this that would be great

  21. help! I created a css folder and i have linked to my index.html sheet but it's obeying the command. I have triple checked the <link href="…… and it doesn't seem to work. however, it works the other way, the way you show us first. what am I am doing wrong? now I see that the document has it's on icon on my desktop but it opens on notepad. help! help! I think I'm not saving the css folder correctly thus not linking to my html.

  22. Does anyone have any help in the first step where he links pages 2 and 3, not sure how he does it and saves it in the same folder.

  23. I have a question for when link the pages together.

    Like for example on mine page2 to Home they are linked.
    But I do Home to page2 it shows me an error. What did I do wrong there any idea why.

  24. For some reason I can't just type red in CSS or any color like "black' or "yellow" for that matter without a specific number code like #999. Nothing will appear unless I use a number code. Maybe it's a windows 10 thing I don't know anyone know the real reason why it's like that?

  25. 5:12 WHY IS IT styles/main.css …shouldn't it be only main.css? I thought after the href you had to put a link.I did it like that and it doesn't change to a red background.PLEASE HELP

  26. Debugging problem :: When I was referencing the style to main, href="style/main.css" did not work, but href="main.css" did. I have my index and main in the same folder and I am using IntelliJ to edit my program. Did that happen to anyone else?

  27. Color change didnt work for me!!
    <!doctype html>

    <html>

    <head>

    <title>Home page</title>

    <link href="main.css" rel=stylesheet" type="text/css"/>

    </head>

  28. What are the advantages and disadvantages of sublime text and notepad? What key features does sublime text have over notepad and vice versa?

Leave a Reply

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