CSS Basics

Last week we learned how to add visual appeal to our sites through images. We
can take that even further with CSS. CSS stands for cascading style sheets. The
style sheets are what defines how the page is laid out and how it looks. You can
manipulate your text size and color, where your images are, alignment, margins,
and much more. Think of HTML as the bones of your website and CSS is how
you flesh it out.

Adding CSS
Developers can add CSS in three ways. First is inline style. This would be adding
style within your HTML elements, such as <p style=font-size: 2em>. But
adding style to each element separately can be tedious and if you want to make a
change, you would have to go through every element on the page. Often a better
choice is using a stylesheet. An internal style sheet, just as it sounds, is within
your HTML file. It goes inside the head tags. The example above would only set
the font size for that one p element, but if I used a stylesheet, it would apply to
every paragraph on the page. And if I wanted to change something, one change

would change all elements that the style is set to. An external style sheet involves
creating a separate file for your CSS outside of your HTML. This can be an
advantage for a few reasons. You can link several pages to one style sheet. Just
like before, you can make one change and it will apply to everywhere, but in the
case of an external sheet, one change can apply to your entire site. Also, having
one stylesheet for multiple pages can help your website have a consistent look and
feel.
The Cascading part of the CSS acronym refers to the order in which the styles
are applied. The first two styles the browser checks are ones the developer cannot
control. It starts with the browser defaults. Then it checks for the any changes
made by user settings. These would override the browser defaults. The next styles
the browser would check for are those in an external style sheet, which overrides
the styles before it. Then comes the internal style sheet, and last, the inline styles.
As the browser moves down the cascade, each type of style overrides the one
before. One example of how you might make use of this is if you had an external
style that set all fonts to blue, but you had one special section that you wanted to be
red. If you used an inline style for that one element, it would override your
external style sheet and make that one element red.
To create an inline style, add style= inside your opening tag. After that you need a
style rule which includes a property and a value. The rule goes in quotation marks:

To create an internal style sheet you need to go to your head section and add style
tags
<style>...
</style>
Between these tags you can add your CSS. In a stylesheet the CSS looks just a
little different. You start with a selector. This tells to what part of your HTML to

apply the style. So instead of adding inline style inside of a p tag, you would have
a selector for p. Next you need curly braces. These are usually found to the right
of P key on your keyboard. Make sure you use the curly ones, which need the shift
key. Then, inside the curly braces, you would have a declaration with a property
and value that looks much like the inline style. Each declaration ends with a
semicolon. The same style as the previous one would like this in a stylesheet:

You can add as many declarations as you like to each selector. Just make sure to
put a semicolon after each one. I also recommend hitting return after each to keep
them spaced so they are easy to read.
External style sheets look very similar. You do not use the HTML style tags (or
any other HTML) in an external style sheet. You only need a list of selectors and
declarations. You can create that file in Notepad++ just like you do your HTML
files, but give it a .css extension.
Classes and IDs
Remember last week we added classes and ids to our elements. CSS is where we
will make use of those. If you want to apply a style to all paragraph elements, you
can simply use the selector p. But if you want to only apply to certain elements,
we can use a class or id. If we set up <p id=red> in our HTML, we can use that id
now in our CSS. We put a # before the id name in our selector. So for this one we
would use #red as our selector. For classes we use a period first. So if we had set
up <p class=blue> in our HTML, in our CSS we would use .blue as our selector.
You can also apply a style to more than one element in the same style rule by
putting a comma after each selector. So you could set up p, article, aside as one
selector with all declarations listed after that applying to all of them.

If you want to reference an element that is contained within an element you need to
use a descendant selector, such as ul li. There is a space, but no comma in
between.
If we are going to use an external CSS file, we have to tell the HTML file to look
for it. We do this with a link element. Don't confuse this with the anchor element
we use for hyperlinks. This is a different type of link. The link is an empty tag, so
there is no closing tag. It needs two attributes in it: the rel and href. The
relationship attribute tells what it is relative to, and for these files it will always be
rel="stylesheet". The hypertext reference will look like href="style.css". When
you put them all together it looks like:
<link rel ="stylesheet" href="style.css">
When reviewing older markup, you may come across type in the link element, but
this is no longer needed in HTML5.
*There is a great reference list of CSS properties in your book starting on page
APP17.*
Organizing your page with CSS
Each block element on your page four sides: top, right, bottom, and left. Any style
added to these sides, such as margins, padding, and borders must be applied in that
order. To remember this, I use the word TRouBLe. I keep myself out of trouble
by remembering the letters TRBL in TRouBLe. So if I want to add margins to an
element, I can set that up as margin: 2em 4em 2em 4em;. This would give me
margins of 2em on the top and bottom and 4em on each side. If I want it to be the
same on all four sides I can simply put margin: 4em;. I can also designate just one
side if I like with a hyphen, like this: margin-top: 2em;. You could also set up one
side for right, bottom, or left the same way.
text-align is another great way to organize your content. You can use left, right,
center, or justify. This looks like text-align: right;. Images can be aligned with the
float property. You can float left or right to put the image to the left or right of
your text, like this: float: left;. Note there is no center value with float. Images
can only float left or right. Floating an image will allow your text to wrap around
the image. If you do not want the text or other elements to wrap around, you can

use the clear property. You can clear left, right, or both with a declaration such as
clear: both;.
You can add comments to CSS much like you can in HTML, but the tags are
different. In CSS you will use /* to start and */ to end each comment. This will
look like:
/*Your comment here*/

References
Tech Altum Tutorial. (n.d.). Html-css [Digital image]. Retrieved December 9,
2016, from http://tutorial.techaltum.com/css.html