My Community

Tutorial 4 Fundamentals Of CSS

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Tutorial 4 Fundamentals Of CSS
« on: September 17, 2014, 03:44:04 PM »
Here is what we learned about CSS so far.  Today I will list some examples with CSS for fundamentals.  For starters you always need to start with a <style type="text/css"> and end with a </style> tag.

body {
    background-color: brown;
}

p {
   text-align: center;
   font-size:200%;
}


h1 {
   text-align: center;
}

a {
      color: red;
}
« Last Edit: November 03, 2014, 01:14:06 PM by ChrisRansom »
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 4 Fundamentals Of CSS
« Reply #1 on: September 17, 2014, 03:47:46 PM »
Let's start by adjusting the font size in CSS.  I am going to use h1 and h2 brackets with curly braces to do this.


h1 {
   text-align: center; font-size: x-large; font-weight: bold
}

h2 {
   font-size: large; font-weight: bold
}

You want certain headers on your webpage to be bigger than other headers when coming up with titles for an article.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 4 Fundamentals Of CSS
« Reply #2 on: September 17, 2014, 03:54:50 PM »
Let's say I wanted Orange text in CSS how could I do that with paragraphs, ordered lists  and unordered lists?

p, ol, and ul {color: orange}

That makes orange the default color text for all code involving paragraphs ,ordered lists, and unordered lists.  If you only wanted the paragraph to be orange you would take out the words ol and ul when making that line of code in css to modify your statement when coding a webpage.

Let's say you make something like <div class="important">Making Money MATTERS!</div>

If you made a css page that said .important {color: red; font-weight: bold;} Save that as money.css and apply to a webpage called

money-is-the-root-of-all-evil.html Making Money MATTERS! Will appear in Red?
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 4 Fundamentals Of CSS
« Reply #3 on: September 17, 2014, 05:31:59 PM »
Cascading With CSS

body {font-size: 200%}
div {font=size: 80%}
p {font=size:80%}
span.smaller {font=size: 80%; font=weight: bold;}
#smallest {font-size: 80%; font-weight: normal;}

Then type a Div tag

<div>
Everything shows up in body font size here.

<p>Font size equals eighty percent</p>

<p><span class="smaller">This is a span with the class "smaller" inside a paragraph.</span></p>

<p><span class="smaller"><span id="smallest">This text is ina  span with the ID smallest.</span></p>
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 4 Fundamentals Of CSS
« Reply #4 on: September 17, 2014, 05:34:51 PM »
.outer and .inner tags.

.outer { border: 2px solid black;
background-color: gray;
padding: 15px;
margin:40px;
}

.inner { border: 2px dotted black;
background-color: white;
padding: 15px;
margin: 15px; }
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 4 Fundamentals Of CSS
« Reply #5 on: September 17, 2014, 05:37:46 PM »
Creating A Float Screen With Anchor Tags On the Right Side Of  A Website
<style type="text/css" media="screen">
.right {
border: 3px solid black;
padding: 10px;
margin: 10px;
float: right;
width: 33%;}

.bottom {clear: both;}
</style>

now you want to make a p class right bracket like this.  Link different webpages with this
<p class="right">
<a href="adrianpetersonbarredfromroster.html">Adrian Peterson Barred From Vikings Roster[/url]
<a href="adrianpetersonbarredfromroster.html">Adrian Peterson Barred From Vikings Roster[/url]
<a href="adrianpetersonbarredfromroster.html">Adrian Peterson Barred From Vikings Roster[/url]
<a href="adrianpetersonbarredfromroster.html">Adrian Peterson Barred From Vikings Roster[/url]
<a href="adrianpetersonbarredfromroster.html">Adrian Peterson Barred From Vikings Roster[/url]
<a href="adrianpetersonbarredfromroster.html">Adrian Peterson Barred From Vikings Roster[/url]
<a href="adrianpetersonbarredfromroster.html">Adrian Peterson Barred From Vikings Roster[/url]
<a href="adrianpetersonbarredfromroster.html">Adrian Peterson Barred From Vikings Roster[/url]
<a href="adrianpetersonbarredfromroster.html">Adrian Peterson Barred From Vikings Roster[/url]
<a href="adrianpetersonbarredfromroster.html">Adrian Peterson Barred From Vikings Roster[/url]
</p>

All these links will show up on the right side of the webpage.  Some sites like NFL.com and ESPN have links to different articles by posting links to different pieces on the right side of a webpage.  By copying this code and applying the concept of float screens you can set your site up to look just like theirs.

All the links are about Adrian Peterson, but in your case try to make a different webpage for each link. 
« Last Edit: November 03, 2014, 01:12:48 PM by ChrisRansom »
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 4 Fundamentals Of CSS
« Reply #6 on: September 17, 2014, 05:58:30 PM »
How to create Tiny Boxes

This lesson involves creating boxes.  After coding these boxes you will see four corners appear.  After that pick one you like the best and start using that to make your own social media buttons.

#topleft {
position: absolute;
top: 0px;
left: 0px;
}

#topright {
position: absolute;
top: 0px;
right: 0px;
}

#bottomleft {
position: absolute;
top: 0px;
left: 0px;
}

#bottomright {
position: absolute;
top: 0px;
right: 0px;
}

<div class="box" id="topleft">
Top left corner
</div>

<div class="box id="topright">
Top right corner
</div>

<div class"box" id="bottomleft">
Bottom left corner
</div>

<div class="box" id="bottomright">
Bottom right corner
</div>

<>like that indicate HTML  CSS curly braces indicate this {}

I'll reload this in a later lesson.  Two more things about making stuff in the body tag and applying anchor tag concepts in CSS and we'll be done.
« Last Edit: September 17, 2014, 08:17:25 PM by ChrisRansom »
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 4 Fundamentals Of CSS
« Reply #7 on: September 17, 2014, 06:02:28 PM »
body coding

body {font-family: Georgia;
color: white;
background-color: black;
}
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 4 Fundamentals Of CSS
« Reply #8 on: September 17, 2014, 06:06:18 PM »
Anchor Tag coding

a: link {color: blue;}
a: active {color: red;}
a: visited {color: purple;}
a: hover {color: red;}
a.nav {font-weight: bold;
     text-decoration: none;}
a.nav:hover, a.nav: active {background-color: yellow; color: red;}
a.nav: link, a.nav:visited {color: green;}
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 4 Fundamentals Of CSS
« Reply #9 on: September 17, 2014, 06:10:04 PM »
That will do it for fundamentals of CSS.  You can also check out w3schools for more practice coding bits.

Lesson 5 next week will involve using the header, side nav, main, content, and footer pages in CSS and how to apply that with HTML by combining those elements to code more web pages.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.