Learn CSS For Web Design

Learn CSS For Web Design


Welcome to RoboSquidTV! I’m Kyle, and together we’re going to
make beautiful websites. That’s right! This time our websites will actually be beautiful! We’ll… maybe not beautiful.. but.. We’ll get the foundation going. Welcome back if you are starting from our
first video “Intro to HTML”, and hello new devs. If you are new to HTML please go back and
watch that video first, I promise it’s worth it. Today we will be learning about the basics
of CSS! The language used to give life to our HTML. Like with all of our classes, files for this
course can be found in the description below! CSS stands for “cascading” style sheet. Remember that, it’ll be important later. CSS is how we tell our browser what font we
want, or how big that font should be, the color, the spacing… It controls the layout of your page, arranges
and resizes items…. Everything Over the next few videos we are going to master
the basics of CSS, so let’s start at the beginning. CSS is it’s own language, different from
HTML and typically written in a separate .css file. HTML tells your browser what content we are
displaying on the page, but CSS tells the browser HOW we want it displayed. Create a “style.css” file in the same
directory as your index.html file. You can name your file anything you want,
as long as it has the .CSS file extension. Now, to tell your browser to download this
style sheet along with the rest of your website, we need to instruct it to do so. Go into your index.html and add the following
line to yourelement. As we learned in the last video, the tag is used to include external resources. This line will load in our CSS file for us. Now then, Let’s get to the good stuff. In our CSS file we need to create a CSS declaration
block, which consists of a selector, which defines what we are trying to style and declarations inside curly braces which
are our styling rules. In this case, our selector will be for the
HTML element

Inside we will have a property paired with
a value, separated by a colon, and will be followed by a semicolon to notate the end
of that rule. We have a LOT of properties to choose from,
but if we for example want to set our COLOR property, and give it a value of BLUE…. You can see the text in our

element has
turned blue. You can combine the properties and values
to create different styles. Let’s make an example site and in the body
we’ll place a
element, and create a few articles inside with the

element A simplified version of an article might look
like an article element with our heading and a paragraph. Let’s create a

container and place
an

heading inside with our article title, Below the header we’ll insert a paragraph. And in this example we’ll forgo the footer. Let’s duplicate this article 4 times to
simulate multiple articles. Back in our CSS, let’s select the paragraph
elements and inside write a rule to change the font size to something larger. We can do that with the property font dash
size and we’ll use the value 18px. You’ll notice all the paragraphs got larger
in size. Let’s return the font-size to the default. Now what if we want to select certain elements,
not just all of the paragraphs, what about just one? This is where ID and CLASS come in. ID and CLASS are HTML attributes you can give
any HTML element to help us when selecting elements we want to style. Now the CLASS and ID attributes work in the
same way but the ID attribute is used to give a unique
identifier to an element so we can target it directly. Each unique ID should only appear once on
a page, no two elements should have the same ID. CLASS on the other hand is just the opposite. CLASS is used to show that all elements sharing
the same CLASS should share the same styling rules. When picking your ID or CLASS name, it’s
important to pick something that first of all makes sense, but also you’ll likely want to follow some
kind of structure. One practice I highly recommend is called
“camelCase”. CLASSes and IDs can not contain a space, a
common practice is to write the first word in all lowercase and the first letter of any
following word is capitalized. Try to keep your names short but readable. Let’s make the first article on our page
a “Featured” article. Since we will only have one, I’ll give the
first

element on the page an ID, with a value of “articleFeatured”. Back in our CSS again, let’s give our new
featured post a gold background color. Before when we wanted to select all instances
of an element we typed the element name as the selector. Well there are quite a few other kinds of
selectors but let’s just go over two more real quick and we’ll talk about more in
another video. The ID selector is represented by a hashtag,
or pound sign followed by the ID value. And the CLASS selector is a period followed
by the CLASS value. So once we’ve selected our “Featured”
post, we’ll give it a background-color of gold. And if you take a look at our page we have
a golden featured post! Now to demonstrate classes lets mark the second
and last post as “HOT” or “TRENDING” posts. Since there will be multiple of them, let’s
make a CSS class. Since we’re already in our CSS, we’ll
start here by selecting the CLASS, which we will name “articleHot”. Let’s give it a background-color of red,
and while we’re out it, we’ll change the color to white. In our HTML we will assign the “articleHot”
class to our posts and refresh. Check it out! Our “HOT” articles are showing in red
now with white text. Remember we mentioned that CSS stands for
“Cascading” style sheets? Notice what is happening on the page here. We never told our

or

tags to appear
in white, we told the article element that it’s color was set to white. In CSS, styling rules flow download and are
inherited by the “children” elements that are nested within. Because we didn’t tell our text to be any
other color otherwise, it inherited the style from it’s parent, the

. One last selector for this video. Let’s change the color of the

elements,
only inside the “HOT” articles. To do this we first select the “.articleHot”
class, and then a space, next put the selector of what we are targeting inside the “.articleHot”
element. In our case we are targeting the heading,
and so write

, and we’ll make the color the same as the gold from our featured post. Now we have overwritten the inherited white
text by selecting the element directly and assigning it a color. We could have of course given the H1 inside
our .articleHot class it’s own class name and selected that, but what we have done is
much easier to work with since we deal with the entire article as one single component. One last thing we’ll do is resize our

element. Right now our articles are stretching the
whole width of the page. What if we want to make it so they only take
up about half of the page? Right now the articles are as wide as their
parent object, so if we change the width property of our parent element, the
, we can
resize the articles. Let’s give
a width of 50%. Because we used a percentage, and not a pixel
value, the width will be half of the page, no matter what size our screen is. Ok we understand the very basics of CSS, but
everything is still kind of stacked up on top of each other and there is no spacing. Up next we’ll learn about margins, padding,
and the CSS Box Model. Thank you for watching! If you liked what you saw be sure to like
the video and tell other what you saw and to see more make sure you subscribe If you still need more we have a Facebook
and Twitter!