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.

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 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:

Internal Style Sheets

To create an internal, or embedded, 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 the 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 look 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. 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.

External Style Sheets

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 your text editor just like you do your HTML files,
but give it a .css extension. You will need to link your HTML page(s) to your CSS file(s)
in the head section of your HTML. We did this in Week 2, but as a reminder, the format
is:
<link href="filename.css" rel="stylesheet" />
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.

Commenting in CSS
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*/
Colors
In CSS you can assign color to an element in several different ways. We have looked at
color names, which are often the easiest to remember. You know exactly what red,
blue, black, etc. are, but not all colors have a name assigned to them. Colors have an
RGB value. This stands for Red Green Blue and refers to the amount of each primary
color that makes up the color you are using. In your markup this will look like
rgb(0,0,255). You can also use hexadecimal values. These look like #123456. You
may be wondering how you know what numbers to use. There are several great
resources online. Here is one of my favorites. If you look at the menu on the left you
will see that it has the colors grouped in different ways to make it easier. You can look
by color group, by name, by rgb or hex value, and several different options. You should
have no trouble finding the color you need. Once you have the color name or code you
need, you can put it into your CSS.
border-color: blue;
Remember that two-word properties must be hyphenated and you need a semicolon at
the end of each declaration.
You can also set an opacity for your colors. Opacity makes objects transparent. An
opacity set to 1 has no transparency. 0 would be completely transparent. You can use
decimals to set a transparency anywhere in between. You can use the opacity property
for any element, like this:
opacity: 0.75;
or add it your color like this:
rgba(100,200,100,0.75)
Note that there is an "a" with the rgb and the opacity goes last.

Styles
You may sometimes find that you want to apply a different style to certain elements,
 such as all the links in the aside should be a different color from the links elsewhere on
the page. In this case, we can use the hierarchy of page elements in our selectors. A
parent element is one that contains other elements. These inner elements are called
child elements. We can use both in our selector as
parent child {styles}
or in the case of our example
aside a {color: green}
This would override any styles you had set with a selector of only a.

We have discussed adding ids and classes to elements to help in using those later. In
your CSS you can make use of those as selectors. If you used an id on an element,
you can use it as a selector with a # in front of it. So if you gave an element id="red",
you can use #red as the selector. Classes work in a similar way, but with a . instead.
So an element with class="red" can use the selector .red. Because classes can be
used on multiple elements, you can include the element type with it. So if you want h1
elements with the class red, the selector would be h1.red.

Styling Fonts
You can specify many fonts for your web pages. There is a long list of fonts that are
standard on every browser, but just in case, it is recommended that you add a couple
items to your font declaration. You start with your preferred font, then a more common
font for the browser to use if it doesn't have that one, then a generic font type. This
might look like:
font-family: 'Brush Script', Arial, sans-serif;
Note that the two-word font name is in quotes. You can use single or double quotes, as
long as you use the same type of quotes on both sides.

Absolute measures

in inch

cm centimeter

mm millimeter

pt point 1/72 of an inch

pc pica 1/6 of an inch

px pixel one dot on the screen

Font sizes can be in absolute or relative units, much like the images we discussed in
Week 2. Here are those charts for you again.
Notice that the relative measures are according to the size of the text in the parent
element. So if you use 2em as a text size, then the text will be two times the size of the
text in the parent element.

Relative measures

em size relative to the text of the parent

element

% size relative to the text of the parent

element

You can combine font formatting in one font selector.

font: font-style font-variant font-weight font-size line-height font-family;
which may look like:
font: italic small-caps bold 2em Arial;
Note there are no commas or anything in between, only a space. You can omit any
values you don't need and the browser will use the default, but you must use them in
the correct order.
References
Tech Altum Tutorial. (n.d.). Html-css [Digital image]. Retrieved December 9, 2016, from
http://tutorial.techaltum.com/css.html