201910 IMS222
(watch this video in a new tab or window)
I can't teach you everything there is to know about anything when it comes to the land of computing. The web didn't even exist when I went to college. I know, I'm old. You'll be old some day too and your kids will say, you used to do what? Fill in the blank.
Anyway, there are certain things that you'll do over and over, like using the bold tag or a paragraph tag. There are many things that you'll only do once in a while. That's OK. That's where Google searching comes in. Knowing some key words and learning how to spot what you're looking for quickly is the trick. It's a great skill to have. For example, if you want to make your font a different color, try a search for 'css font color'. If you want to build a table, try 'html table'. Stack Overflow is a great resource for answers. I'm sure other's will pop up too as time goes on.
It can be pretty difficult trouble-shooting your own code problems. Think that's hard? Try trouble-shooting someone else's. There are many ways to do things, even many right ways. So if you're having trouble with your code and your peer or even your professor don't know the answer right away, don't be surprised. The best thing to do is to work in baby steps. Change one thing at a time and test it. That way it's much easier to trouble-shoot the problem.
Another thing to keep in mind is not to bang your head against a wall for a long period of time with a problem. I usually give myself a 5 minute internet search if I don't know how to do something. If I still don't have the answer, I look to my peers for help. It's amazing how quickly you'll find the answer if you just give yourself different options.
(watch this video in a new tab or window)
Let's dive into some cascading style sheets. These are examples from an external style sheet. Add something like this to your HTML to include an external style sheet:
<!doctype html>
<html lang='en'>
<head>
<link rel='icon' type='image/png' href='favicon.png'>
<link href='minimal_style.css' media='screen' rel='stylesheet' type='text/css'/>
<title>201810 IMS222</title>
</head>
The minimal_style.css has the css in it. The first code that we'll look at is a ul which is an unnumbered list. Codes here need squiggly brackets around them, then the styling is inside the squiggly brackets. Each style type is listed on the left followed by a color and the style is on the right followed by a semi colon.
Here we're setting the ul which is an unnumbered list to display.
ul {
list-style: display;
}
Here we're setting the li which is a list item to have a left margin of 2 em.
li {
margin-left: 2em;
}
Here we're setting the nav which is navigation or menu system to be 100% wide, go to the left, have a shadow, a background color, some padding, and align the text. Look at some additional CSS just to get a feel for what it looks like.
nav {
width: 100%;
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #212121;
padding-left:2em;
padding-right:2em;
text-align: center;
}
nav ul {
list-style-type: none;
}
nav li {
width: 20%;
text-align: center;
float: left;
margin-left: 0px;
}
nav a {
background-color: #212121;
padding: 14px 32px;
display: block;
text-decoration: none;
text-align: center;
color: #eee;
}
nav a:hover {
background-color: #192A75;
}
b {
font-family: source_sans_probold;
color: #676767;
}
h1, h2, h3, h4, h5 {
font-family: source_sans_probold;
color: #192A75;
}
h1 {
font-size: 2em;
line-height: 1.15em;
margin: 60px 0px 2px 0px;
}
h2 {
font-size: 1.25em;
line-height: 1.15em;
margin: 10px 0px 2px 0px;
}
h3 {
font-size: 1.01em;
line-height: 1.01em;
margin: 5px 0px 2px 0px;
}
h4, h5 {
font-size: 1.00em;
line-height: 1.00em;
margin: 5px 0px 2px 0px;
}
p {
line-height: 1.45em;
margin-bottom: 20px;
}
section {
margin: 80px auto 40px;
max-width: 1070px;
position: relative;
padding: 20px
}
(watch this video in a new tab or window)
Cascading Style Sheets got their name because they cascade like water. The style furthest away can get changed by one that's closer. There are 3 different ways of styling. External, Internal, and Inline styling. An external style sheet is a separate document with just CSS in it. You call it whatever you want, and then reference it in your HTML. In the example here, I call it: Kirks_External_Style_Sheet.css
<link href='Kirks_External_Style_Sheet.css' media='screen' rel='stylesheet' type='text/css'/>
An internal style sheet is at the top of a web page. It's inside style tags like this:
<style>
summary::-webkit-details-marker {
color: #80C16F;
font-size: 125%;
margin-right: 2px;
}
</style>
Inline styling looks like this:
<p style='margin:3em;'>Blah, blah, blah</p>
The order is external to internal to inline. So if you have styling for a paragraph <p> in all 3 documents, the internal styling will win. It's important to note that the cascading piece only over-writes things that are the same. If you set a color in the external style sheet and don't change the color but set other things in the internal or inline style sheet, the color will still be what you set it as in the external style sheet.
(watch this video in a new tab or window)
The important thing to know about fonts on the web, is that they are a little different than fonts on your computer. If you set a font up on the web, and I don't have that font, the site is not going to look the way you want it to look for me. The two most popular ways to do fonts on the web are Google fonts and TypeKit. Google fonts can be found at https://fonts.google.com/. You embed the font by using something like:
TypeKit is an Adobe option and since I'm not a huge Adobe fan, I'll leave you to figure that one out yourself.
I'm also not a huge fan of embedding fonts because you're relying on someone else's server being up and running for your site to work. That just adds a layer of complexity to your code that may be unnecessary. Try not to go crazy with fonts. 1 or 2 on a web page is plenty.
(watch this video in a new tab or window)
Like fonts? Be original. Make your own font. MyScriptFont (at http://www.myscriptfont.com/) is a web site that allows you create a font from your handwriting. Then to convert the font to a web font use the Generator in FontSquirrel (at https://www.fontsquirrel.com/). Give it a shot, it's fun.