This is a paragraph.

<p>This is a paragraph.</p>

This is a header

This is also a header

Still a header

Yay headers

<h1>This is a header</h1>
<h2>This is also a header</h2>
<h3>Still a header</h3>
<h4>Yay headers</h4>

This is Praxis

<a href="http://discoverpraxis.com/">This</a> is Praxis

<img src="http://leisamichelle.com/wp-content/uploads/2016/10/LT-Greek-Logo-Sample.jpeg">

<div>This text is wrapped in a div.</div>

The div tag can be a little confusing at first. With HTML by itself, it doesn’t do anything. But magical things happen when you style div tags (ie, make them pretty) with CSS. We’ll get to that in a minute.

Always close your tags (except for img tags)! And make sure they’re nested properly!

GOOD NESTING

<div class="pagetemp1"><p>text</p></div>

BAD NESTING

<div class="pagetemp1"><p>text</div></p>

Here’s what our original div looks like in HTML:

<div>
This text is wrapped in a div.
</div>

Now let’s change it to this:

<div class="firstclass">
This text is wrapped in a div.
</div>

We give each div tag a class, and then use CSS to style it. Each div tag can have a maximum of one class.

So let’s jump over to our custom CSS and start making it pretty. Here’s how we style classes in CSS:

.firstclass {
     color: blue;
     font-size: 36px;
     text-align: center;
     width: 50%;
     margin: auto;
}

.nameofclass {
     attributes: values;
     ...
     ...
     ...
}

And it all looks like this when we publish our page:

Not too bad, right? You can change the font color (color), background color (background-color), margins (margin), whether elements appear in a straight line or on new lines (display), everything. Classes are awesome.

Here are the attributes and values I use most often:

color: #000;
background-color: #ccc;
text-align: left;
text-indent: 3em;
display: inline-block;
padding: 0px;
margin: 20px auto;

If most of the things covered so far are new or confusing, don’t click the link I’m about to give you! It will make everything worse. Promise. But if all of this makes complete sense to you or is a review, also check out how you can use ids to compliment your classes. And here’s a useful discussion on Stack Overflow about the difference between classes and ids.

You can have divs inside divs. Example:

<div class="mynavbar">
    <div class="two-sixths first">
        <h2>leisa michelle</h2>
    </div>
    <div class="one-sixth second">
        <a href="">blog</a>
    </div>
    <div class="one-sixth third">
        <a href="">about me</a>
    </div>
    <div class="one-sixth fourth">
        <a href="">projects</a>
    </div>
    <div class="one-sixth">
        <a href="">work with me</a>
    </div>
</div>

The code above is the template I use for my navigation bars when I get rid of the default header. I create a class called “mynavbar” where I define some values (background-color, color, font-family, font-variant, text-align, padding, margin), and I use Genesis’s premade column classes to organize everything.

.pagetemp1 {
	text-align: left;
	font-size: 18px;
	margin: auto;
}

.pagetemp1 p {
	text-indent: 3em;
	width: 50%;
	margin: auto;
}

.pagetemp1 h2 {
	text-align: center;
	background-color: #ccc;
	color: #fff;
	padding: 10px 20px;
	text-decoration: none;
}

Anything that you wrap in a div with class “pagetemp1” will have the properties of the overall class (the first listing above). But if you want to style paragraphs or headers or links or tables or, well, anything more specifically within a class, you can use the format above!

All p elements of “pagetemp1” will have the properties of the second listing above, and all h2 elements will have the properties of the third listing above. So the format looks like this:

.classname specificelement {
     attributes: values;
     ...
     ...
     ...
}

Starting to get tired of typing, taking screenshots, and the like. So I’m going to make this really fast. If it doesn’t make sense, let me know and I’ll rewrite it in a day or two.

So how do you make sure your landing page looks good on desktop, tablet, AND mobile? Here’s how I do it.

.pagetemp1 p {
	text-indent: 3em;
	width: 50%;
	margin: auto;
}

@media screen and (max-width: 720px) {
	.pagetemp1 p {
		width: 100%;
		padding: 8px;
		margin: auto;
	}
}

Here’s some stuff I wrote and use. Feel free to use and/or play around with it.

Disclaimer, this may be bad form. I don’t know. But it works and it’s so easy. I created a series of classes to space elements on a page. I call them “bigspace”, “bigspaceup”, “bigspacedown”, “littlespace”, “littlespaceup”, and “littlespacedown”.

“Bigspace” puts 100px margin above and below whatever uses the class. “Bigspaceup” puts 100px margin above whatever’s using the class. And from there I’m sure you can guess what the rest do.

Feel free to use them as you need:

.bigspace {
	margin: 100px auto;
}

.bigspaceup {
	margin: 100px auto auto;
}

.bigspacedown {
	margin: auto auto 100px;
}

.littlespace {
	margin: 50px auto;
}

.littlespaceup {
	margin: 50px auto auto;
}

.littlespacedown {
	margin: auto auto 50px;
}

I made these hyperlink buttons too. When you hover over them, the background changes. Two styles. Check it out and use them if you like:

.classname a:link, 
.classname a:visited {
	background-color: #fff;
	color: #ed1c24;
	border: 1px solid #ed1c24;
	padding: 10px 20px;
	text-decoration: none;
	font-size: 22px;
}

.classname a:hover, 
.classname a:active {
	background-color: #ed1c24;
	color: #fff;
	border-color: #fff;
	font-size: 22px;
}

.classname a:link, 
.classname a:visited {
	background-color: #ed1c24;
	color: #fff;
	border: 1px solid #fff;
	padding: 10px 20px;
	text-decoration: none;
	font-size: 22px;
}

.classname a:hover, 
.classname a:active {
	background-color: #fff;
	color: #ed1c24;
	border: 1px solid #ed1c24;
	font-size: 22px;
}

Here’s my navigation bar. Just take it. Enjoy.

<div class="mynavbar">
    <div class="two-sixths first">
        <h2>leisa michelle</h2>
    </div>
    <div class="one-sixth second">
        <a href="">blog</a>
    </div>
    <div class="one-sixth third">
        <a href="">about me</a>
    </div>
    <div class="one-sixth fourth">
        <a href="">projects</a>
    </div>
    <div class="one-sixth">
        <a href="">work with me</a>
    </div>
</div>

CSS Styling

.mynavbar {
	text-align: center;
	width: 100%;
	background-color: #000;
	padding: 10px 80px 5px 100px;
	margin: auto;
	display: inline-block;
}

.mynavbar h2 {
	text-align: left;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-variant: small-caps;
}

.mynavbar a:link, 
.mynavbar a:visited {
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-variant: small-caps;
	font-size: 20px;
}

.mynavbar a:hover, 
.mynavbar a:active {
	color: #ccc;
	font-family: 'Montserrat', sans-serif;
	font-variant: small-caps;
	font-size: 20px;
}