My Community

Tutorial 2 Text-Align: Center

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Tutorial 2 Text-Align: Center
« on: August 27, 2014, 01:20:35 PM »
Today I will briefly go over what we did in the first tutorial.

There are lots of things you can do with CSS.  Today I'm going to focus strictly on the background color.

body {
             background-color: brown;
}

Save this document as mud.css
 


<html>
<head>

<link rel="stylesheet" type="text/css" href="mud.css">

</head>
<body>

<h1>Johnny Football&#146;s Bar and Grill</h1>

<h2>Johnny Manziel</h3>

<h3>First freshman to win Heisman.</h3>

<h4>moneyfingers</h4>

<h5>Cleveland Browns</h5>

<h6>bitch please</h6>

<p>Johnny Football&#146;s Bar and Grill is located in Arlington, TX.  For more information call Jerry Jones personal hotline.</p>
</body>
</html>
« Last Edit: September 01, 2014, 03:05:50 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 2 Text-Align: Center
« Reply #1 on: August 27, 2014, 01:22:41 PM »
Now the text align center tag looks like this.

text-align: center;

There are two different ways to apply this.
p {text-align: center;}

h1 {text-align: center;}
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 2 Text-Align: Center
« Reply #2 on: August 27, 2014, 01:23:50 PM »
Step 3 open up mud.css document in text wrangler and enter the paragraph and header 1 bracket in css.  If you have notepad you will have to save your documents in .txt files first before opening up files in css and javascript.  Your mud.css webpage should look something like this.

body {
    background-color: brown;
}

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


h1 {
   text-align: center;
}
« Last Edit: September 01, 2014, 04:22:17 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 2 Text-Align: Center
« Reply #3 on: August 27, 2014, 01:36:20 PM »
Remember the first webpage I showed you how to create in html?

<html>
<head>

<link rel="stylesheet" type="text/css" href="poop.css">

</head>
<body>

<h1>Johnny Football&#146;s Bar and Grill</h1>

<h2>Johnny Manziel</h3>

<h3>First freshman to win Heisman.</h3>

<h4>moneyfingers</h4>

<h5>Cleveland Browns</h5>

<h6>bitch please</h6>

<p>Johnny Football&#146;s Bar and Grill is located in Arlington, TX.  For more information call Jerry Jones personal hotline.</p>
</body>
</html>

We saved it as manziel.html open it and see what happens.

If you did everything correctly the words in the header 1 bracket and paragraph bracket should be centered.  I bolded the words in the header 1 and the paragraph to let the reader know which words should be centered if you apply this concept.

If you make a paragraph in css that says

p {text-align: center;} that means the words in the paragraph like Johnny Football's bar and grill will be centered.  Does that make sense?

Try making your own css page simply using the h1 {  }  p   {       }

The next tutorial will be about modifying link colors that you make with anchor tags in css.  Until then so long.
« Last Edit: August 27, 2014, 01:42:05 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.