Transcripts
1. Introduction : Hi and welcome to another Skillshare
class from medic turn, which is the second
one in the Skillshare. This is going to be an
introduction to CSS, going from beginner
to a web designer. And one hour. As a prerequisite
for this course, I would expect you have
to complete the HTML calls beginner designer
in 30 minutes, which I've put up in my
other Skillshare class. So you go with that first
because this course were built upon which you have
learned in that course. And while we're
going over is CSS, the learning the
rules and structures. So you'll learn different types of properties to select as the declarations and
how you can actually apply CSS in its own file, as well as embedding this
within the HTML file. Mentioned, you have to
apply your knowledge and built upon the HTML in
the previous course. If you're completely
new to coding, what I would suggest is go
to the HTML course first, learn how to design
your first web page, then come to this course
to style your webpage. So because when you're
designing a webpage, you just don't want it to
be played with just text. You won't have
images and videos, but you need to
have significance to your website by
adding color to it, the background to it. Most importantly, how you adjust the images to fussing
and different styles. This is an introductory
course and how you can do of course project as well. We'll be given so you have
a go at practicing skills. And finally, you'll be
using Visual Studio Code, the free version
for Windows or Mac, and download by Googling
Visual Studio code in the web browser and go to the official website
where you can get your specific
version depending on the operating system
you are using. This is it for the first video, I'll be CU across the whole Skillshare class in the next couple
of images while we demonstrating to you how you can actually style and built
upon your webpage. I'll see you next time.
2. Creating And Linking CSS File: Hi and welcome back
to the second video in the CSS web designers series. We'll be going over how you can actually develop your
website with color, background and
styled as you wish. So as you can see here, if you've been through
the previous course, you'll see this is
the basic website I've created with HTML. Now you must be thinking
how we can actually expand this to make
your whole lot better. So this is the website here. What I've done is I've
opened this in live servers, so you press Control, click and open with Live Server. You can automatically
see this here, right? So if you want to
know more about this, if you go back to the
previous HTML course, you can see how I did all
of it's going back here. If you want to develop CSS, first thing is CSS stands
for Cascading Style Sheets. It is basically the file that helps your
website to create, grabs color, background,
and how to style it. So let's create a CSS file. So if you go on this
plus sign here, right here, first page dot CSS. Now the reason being I
put first page is because the HTML file is
first page dot HTML. And it'll be a good
way to remember this first page, just CSS here. Once we created this, now we want to know how we
can link the files together. In order to link
to files together, you first must understand that these two are not connected. First stage, the
second stage would be, is to connect them. The third stage would be
to see if you've done this correctly and this
is actually working, which we'll be working
across a couple of videos. Let's look at here. In order to make
your website work, you would have to write link. Say for example, you want
to have first page dot CSS. This will be rho
equals style sheet warped as here then is you've made a link to your CSS page. Then this is basically
how you would first undertake
the CSS document. Actually link it. Right now you shouldn't
see any updates use upon nothing in there once
or put something in there, then you will be able
to see if it works. This is it for the first part is actually making
the CSS document. And the next couple
of parts will focus on how you can actually expand upon this and how it can actually update
your webpage as you go. And I'll see you in
the next problem.
3. Adding The First Colour: Hi and welcome to the third part in this
Skillshare class where I'll be going over how you can start adding color
to your website, starting with the font. Let's go here. You can see here this is
linked to up to your HTML. First page dot CSS.
This is the file. So if you want to start
writing code and CSS, the first thing
you want to do is understand what's
written in HTML. If we want to style
the title here. My first website going
to go over to here. One is written here, my H1 open type, close tie, my first website. You want to style this? So the way it's written is one, open curly brackets, close brackets using
IntelliSense. Close. Basically, this is the
way you write in CSS. Now, as this will seem obvious, you want to adjust the color, color coding to the
American spelling and it'll be color coded on, as can make this a red
color, red semicolon. Always don't forget
the semicolon because lot of semicolon is
still fails work. Now press Save or Command Save in Mac, control saved windows. Automatically, the
magic starts happening. Your first website color just changed for black
color to red color. Let's try a mix
of colors than us try blue then by changes
to blue with the work. Yes, it will work because
it just changes color. Blue, violet maybe
let's try that. Such turned to blue wireless. So you get the understanding, are actually asked to when you write it in the correct syntax, then you can stand. How you want to do is
this is the selected the type property
was signed to it. Once you understand
the code here, it's actually quite simple the way you write
it for the others. So let's say you want to styled paragraph maybe with
the paragraph out, say is the p tag, okay, so it's a p tag. The best way to do that learn is just go down here, right? P space, open, close tag, color. Let's try color here. Let's say you want to put this new green color, semicolon. Just turn green. So
you must be to you, why is just turning
green for these three appear green here? Because I've put them
in the paragraph tag. When he put them in the
paragraph tag go happens is the change color than this? Is it for this
part in the video. You will be going over. The next part is how
you style your color. Then I'll see you
in the next one.
4. Adding Background Color: Welcome back to
another video within the Scotia class of CSS going from the
beginning AT website. And this one will be
looking at how you can actually add background color and colored different parts to a website without altering
some other parts. If you can see here
you have div id mains. So if you remember in
the previous video, we looked at how to
color each wants. So we've got the
malware first website. This is basically under H1. We've put that in a tag, so therefore we had a selector. Now for example,
if we don't one to have this pot and color and
we won't have this part in, let's say an aqua color
we have to do is actually append this to specific towards
this part of the website. The key thing to
remember about this is that you need to use
something called an ID. If you go back to the HTML
course, you'll see it. An ID is basically what gives
the paragraphs is name. Div id equals means
only use this to color this section specifically
go from here to here. In order to color this first
tool to push hashtag mains, open curly brackets, and from there you
can type in color, which could be green. Background color. This is how you put
background in aqua. I've saved this. What should happen is you
see this color turn green on this text here surrounded
by a blue column. This is how we
generally put color in with the ID and
actually styling further. This is how you can make
different parts of the website. Different colors aren't beaches. Here, Let's see best
code as its destination. And we could have here, this is a class. Instead of having
this class changes tonight ID and makes it better
than I want you to learn. The ID is equal to destination. Then, okay, let's
change this to a div. Changed all the way here. So you have your div here. Let's have another
go discover h2 tag. Best, coder should see
nothing changes much here. Then what happens is if you go back here
since we have the div, now let's called this div
id equals destination. After doing that, what happens
is if you go back here, destination able to have a
background color of purple. What should happen is, is updated self-service
not working. I will look out why
it's not working from there to work
out how you did to basically looking at destination here,
divided best coder. Here. What should happen
is if you click here, click here, then what happens? It updates itself. Doughnut in here. You need to save
each page to page, HTML or CSS in order
to update this. This is it for this video, where we look in the
next couple of videos, how changed font-weight,
font size, and font style. And I'll see you
in the next one.
5. Applying Elements Universally Using Asterisk: Hi and welcome back to another video in the
CSS Skillshare class. And this time we'll be
looking at how we can apply properties that have an infection all of the
web page and the thing will be looking at today is
using the asterisk selected. So if I put the
asterisk select here, happen is so I can
apply a property, thus has the use of a border. So if you want to apply a border that is specific to
all the websites, you just strike border
one pixel, solid color. Therefore, what will happen? Should see a board
or come around all of your website
and our surrounds it. So how do we change the color? So again, we can put this here. And this will also change the color depending on how
thick you want to go there. If you make it too thick, it can also affect the intensity
of look in the website. So therefore, the less
it is, the better. Depends on how
much she wanted to have you both the
reason being appeared around certain words because they're under certain
headings and devs. That's why the
board will appear. This is what we
looked at right now. So we can also adjust
the background color, which you could have,
let's say, a beach color. This gives you a peach color that you can change
this into a red color. And it'll give you a red color. And therefore you have yellow, no change to yellow. This is how you can
actually style your website in order to give a complete
different color altogether. So it looks quite
interested in as to how you can use the
asterisk function. For this purposes, only a
good color would be given pH. So actually shows
you how it works. Sometimes you can actually have an error and it will not work. So make sure you check over why didn't work in
the first place. This will help you to improve your skills altogether because if your syntax is the way you write the
code is incorrect, it will show up an error and the exact property you
won't won't show up then. This is it for this video. And the next one is, I'll
be going over further as to how you can
style it as well. Thank you for watching this and I'll see you
in the next one.
6. Adding Changing Colour Upon Hovering: Hi and welcome to
another video in Scotia series or the CSS going from the
beginning to web designer. And well, I'll be
showing you how you can make your website
more interactive, especially where more
of the audience visits your website and
actually harvest some of your paragraphs. So let's say we wanted to have this line green or
line green in color. And when some hovers over root currently when you
hover over it, there's actually no color. The way to improve
this would be to write the following selected. So write P colon space. Now, the reason being redoing
this and just give us little space with no
curly bracket open, then just try to color
line greed. Say this. Now what should happen is your color should basically
hover over when it's here, then that looks far
more interesting, doesn't it changes
color when you hovered? Now, next thing I'm gonna do
is have a background color. Let's save on top of blue. Happens is actually
overwrite the blue color. Green color here. It looks green under blue here, making it a little bit more interesting compared to before. So there's some form of
interaction, so it's CSS. You don't particularly need another programming
language like JavaScript to make color. Css is service very powerful and provided
the colored background and also the different types of formatting you want
in your website. So this actually
helps your audience to engage more with the
website increases traffic, as well as the fact
that they think you are actually more experienced
and making websites. And actually we learned this, writing some little
pieces of code. You can change its host
guest top of your website. Then again, this is the interactivity sort
of the website. This is it for this
video making the show, which is to help you understand the different pauses to how
you can build to repository website and actually increase your understanding of
making a website overall. Thank you for watching this
video if you liked it, please continue to watch
this Skillshare class. And I hope you join us and
we'll see you in the next one.
7. Classes: Hi, and welcome back to the another redu in the
CSS Scotia class while we go over how we can use something called classes to how make
your website more interactive. So if you go back to
the previous videos, you'll see I've
discussed consultant ID and how you can use a hashtag specifically to use
IT to color your website. Okay, then so this time
we look at classes, and the difference
between classes and IDs. Start with the class. You have it here within
embedded Davis's own section. You will see
destination is hashtag. Destination with the class
we need is dot class. So in this case, dot headline. This is what we want
to change color of, therefore its sign. This is false. If I just refresh this
page, will happen. Is it still there? So what we need to do
here is her struggle. Just write dot. Go back here and it
says dot headline. Color gives us a ground
cover. This change prompt. So clearly the difference
between, as I mentioned, between the idea and
the classes need to use a dot where the class is called, such as headline,
then curly brackets, same as before, width
destinations, hashtags. So this is a good way of
remembering which one you like. It's up to you whether you
prefer IT with hashtag, we prefer to class width full stop for it and
actually makes it easier for coders to skip between actually writing lots of code in the
HTML, specifying everything. If you can just link
it up new CSS file, and it makes your code much more neater compared to having
all the HTML file. This really helps
to break this up. Now if I were to introduce
the concept of fonts, so you can have a font size, let's say the headline, we want this to be
large, let's say touch. It turns out to be
reasonably small because preprogrammed in definition
suggests this is the science. Let us say if you
want to adjust it, thus about ten
pixels use smaller. Now you want to make it bigger, 100 pixels. And good way. Best thing is rather than using
the word medium or large, use actually the
specificity of the pixels itself uses specific number of pixels makes a huge
Alex quite big. Someone's been toned it down
to make it a bit smaller. This sorts of reasonable
breaking music video that looks at a woman tree. What we learned here is how to use the font size for the color. I want the font family. You can have
different selections. Let's just use Second Geneva,
****** and san-serif. This changes the
whole font family altogether of your paragraph, or in this case the title. This is it for this video. So I told you a lot
of things right now. So I told you how
to use a class, specifically the dot
headline, color, the font sizes, how
you adjust the size, the font and the
font family is how you just type a font
that goes with it. Again, hope you enjoyed this and we'll see
you the next one.
8. Aligning Text: Hi and welcome back
to another video in this CSS series where I'll
be going over how you can align your text according to
your website requirements and actually improve
the readability of your website as well. So here you can see all the texts has
been aligned to the left side of the website. Now let's say if you
want to align to the center and actually make
it look more interesting, actually draw the
audience's attention towards certain parts of your website we can use
is something called a text align selector function. So let's say I have
one and you want to align to specifically
right here, text. Now you can see here there's
lots of different functions. We will look at texts
outline for today, Center. Dr. Hit Save. And what happens is it aligns it towards the center
of the website. This is how you align towards the center and actually
achieve what you want. What happens if you wanted to
put back to the left again, you could just do this. And we'll go straightaway back. But let's present. Using some professional skills, will put this to the left. So this goes to the
left, straightaway, guess by two and to the
right it'll shift to run. Now, let's look at
specifically if you want to align it according to parent
elements, right and left. So you personally call
justified just to buy basically means you want
to reason quantities. This website, it's belongs to left because city for position. And it wants to go there because its natural
position where you want your text to be
super looking at this, we can actually adjusted
according to how we wish. Now if you were to look
some different other parts, now, you have to color grade. Okay, background
color, say text align. Let us see what we have
is the center will happen is if align the
text in the center. So this actually helps
you to stand how you want to schedule the
background color. This case, it's
improved a website. And then we'll call this
here in terms of list. Going back to our HTML, which look at what we put here, then we put this as a list. Therefore, this is
why it's appear and you can change your
quarter how you wish. And basically if you
want to pitch the right, it'll be the, it
doesn't look so good. So I'm going to undo
the center again. This looks good. Maybe because how the
breaking news side of it to the left plus, equals some different forms
of texts going everywhere. So if we go back here, we just save this. This is the headline,
text to line. This is what would
happen then it should move towards the back then. So this is how it
works according to how you would want to do is
that we just got rid of this. Just focus on this specifically. Now if we go here, text-align, right, the text motor right
and left goes to the left. And just basically
understanding this is a key concept in
improving the code. Purely cause if
you know where to place your texts and
makes it so much easier when actually designing your website so you don't
have to think about it. Which texts goes where
if you design on a piece of paper you wanted
to write, use texts align. Each can prove to
be a powerful tool. Anyway, this is enough from
me for now, for this video. The first videos we will
be looking at how we can actually improve the
website even further. Thank you for listening. I'll see you in the next one.
9. Background Images In CSS: Hi and welcome back to the second to last video in the
skills Skillshare series. While we're going over how
to add a background image in the CSS file in
order to link this to your website looked at in
the previous course for HTML and will be
seen in that is, CSS can basically
add the images. While in HTML we can
actually add images directly into the website
using the IMG turn. Now I'm going to teach
you how to use a using the CSS selector specifically
if you have the class, okay, then, so if
we go back here, what we have is div class image. So we want to caption
fun Star Wars swap and C is put an image. And I will link this to be
background image to key thing. He only pay attention to
this background image, URL, medical logos here,
which you put the press save automatically. What happens is you just
update us afterwards. And this is how you
basically as the image in within your files
looking at this so far, we've actually
started our website a lot more than before. Return is add a few images
in order to actually increase the interactivity to the website are very
simple but basic website. Using this powerful tool, top image, background image, you can actually
have the images in the first place and you can actually just
quantities of this as well. So you want to contain it all contained
it to be like this. It'll be a small image, but still replicate them. Say you have another one. Initial happens is it just has an initial image also changed the position
of the images as well. Go right or left. We can do all sorts of different things,
especially with this. And thank you for
listening to this and hope you've enjoyed this class and I'll be making a fun video. We're able to look up below. Thank you very much and I'll
see you in the next one.
10. Conclusion: Hi and welcome to the final
video in the introduction to CSS beginning to web design and one-hour the Skillshare series. In this video, I'll be going over the different types of CSS, rules and structure behind him. Applying knowledge
and built upon HTML in the previous course. Of course, projects,
which I'll be putting up but in the projects below. Yes, Thank you very much
for actually attempt this Scotia skill session
and working your way through the different
classes and lessons are put through and use Visual Studio
Code by downloading this, basically what you've
done is you've created your own website
using HTML, CSS. I've taught you across
the range of videos. And this course is officially now complete
introduction to CSS, beginning to a web designer. Thank you for attending
and the future, I'll be making a
more advanced course in the CSS charging teach you how to build upon your basics and how it's
improving analogy of a mole. Hope you've enjoyed this
and I'll see you in the next Skillshare class
that will be released. Thank you. Bye.
Medic 10, Medical Student + YouTuber
