Fantasia's Crash Course in HTML/CSS

Atlantis · Apr 26, 2014

Fantasia's Crash Course in HTML/CSS
Welcome all! As per request, I decided to make a guide to easily explain the logic behind HTML/CSS. It is a basic skill that everyone should know and I hope by the end of this tutorial that you all will have the skills to build your own websites or even make your own Tumblr themes. It is important that you have a text editing tool to begin. The default on many computers is Notepad, I personally used Notepad++ which uses colors to head display easier, but as long as it is a raw text editing tool (NOT MS word), then it will work.

HTML Guide

The first thing important to understand about html is the use of <, / and >. Think of these symbols like a command. All commands in HTML lie within < and > and it calls something to be done. For instance, later we will talk about an image tag which appears as <img src="URL">, as we see, the command lies between two < and >.

Tags
We are going to take a look at our first stylesheet. Text in purple is a tag. Text in orange is not part of the stylesheet and should be used as a guide. As you can see above each tag begins in <and> and ends in </and>

Code:

[COLOR="DarkOrchid"]<html>[/COLOR]
    [COLOR="DarkOrchid"]<head>[/COLOR]
[COLOR="Orange"]Your head contains all info you don't want to appear on the page. Things that go here may be a link to your CSS stylesheet, meta tags (things that appear in search browers), and Javascript.[/COLOR]
        [COLOR="DarkOrchid"]<title>[/COLOR]Name that appears on tab[COLOR="DarkOrchid"]</title>[/COLOR]
    [COLOR="DarkOrchid"]</head>[/COLOR]
    [COLOR="DarkOrchid"]<body>[/COLOR]
[COLOR="orange"]Your body contains all the info that does appear on your final page. It might have boxes you have on your page, images you display, and text you write.[/COLOR]
    [COLOR="DarkOrchid"]</body>[/COLOR]
[COLOR="DarkOrchid"]</html>[/COLOR]

Basic Commands
Here are some common commands you might see and what they all mean. Commands are listed in green.

<LINK rel="stylesheet" href="/style.css"> : This might appear the in <head> </head> tags and calls your CSS stylesheet, which we will learn about later.

<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> : This might appear in the <head> </head> tags and adds a "favicon" to your page. This is the little tiny image that appears in the left hand side of a tab display. For example, the myVMK forums favicon is the small blue castle.

<div id="DIV NAME"></div> : Found in the <body> </body> tags and calls a DIV which is a box, we will talk about this more in the CSS section.

<h1>TITLE</h1> : Found in the <body> </body> tags and makes a header. You can keep going through each header eg. h1, h2, h3 and the text will get smaller, but in default . We will learn how to edit a header in the CSS section.

<b>BOLD</b> : Found in the <body> </body> tags and bolds the enclosed text. We will learn how to edit bold text in the CSS section.

<i>ITALICIZE</i> : Found in the <body> </body> tags and italicizes the enclosed text. We will learn how to edit italicized text in the CSS section.

<u>UNDERLINE</u> : Found in the <body> </body> tags and underlines the enclosed text. We will learn how to edit italicized text in the CSS section.

<a href="LINK URL">LINK NAME</a> : Found in the <body> </body> tags and links the enclosed text. We will learn how to edit linked text in the CSS section.

<img src="IMAGE URL"> : Found in the <body> </body> tags and displays an image.

<br> and <p> : Found in the <body> </body> tags. <br> Knocks the text down one line and <p> skips one line.

<p class="CLASSNAME"></p> : Not to be confused with <p>, this will enclose your text with a style indicated by the class. This will not work the same way as a DIV and should not be used for positioning. We will learn how to edit classes in the CSS section.

Sample Stylesheets
So yes, you ALREADY have all the knowledge to build a simple stylesheet. Lets take a look at what a basic one might look like.

Code:

[COLOR="DarkOrchid"]<html>[/COLOR]
    [COLOR="DarkOrchid"]<head>[/COLOR]
        [COLOR="DarkOrchid"]<title>[/COLOR]myVMK Beta[COLOR="DarkOrchid"]</title>[/COLOR]
        [COLOR="YellowGreen"]<LINK rel="stylesheet" href="/style.css">[/COLOR]
        [COLOR="YellowGreen"]<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />[/COLOR]
    [COLOR="DarkOrchid"]</head>[/COLOR]
    [COLOR="DarkOrchid"]<body>[/COLOR]
        [COLOR="YellowGreen"]<div id="blog">[/COLOR]
            [COLOR="YellowGreen"]<h1>Latest Newsletter</h1>[/COLOR]
                [COLOR="YellowGreen"]<b>4/26/2014:</b>[/COLOR] Hello let's talk about what has gone <i>on in</i> myVMK today. We had <u>some releases!</u>
                [COLOR="YellowGreen"]<br><b>4/20/2014:</b>[/COLOR] Hello let's talk about what has gone <i>on in</i> myVMK today. We had <u>some releases!</u>
                [COLOR="YellowGreen"]<p><b>4/15/2014:</b>[/COLOR] Hello let's talk about what has gone <i>on in</i> myVMK today. We had <u>some releases!</u>
        [COLOR="YellowGreen"]</div>[/COLOR]
    [COLOR="DarkOrchid"]</body>[/COLOR]
[COLOR="DarkOrchid"]</html>[/COLOR]

Congratulations! You now know all you need to build a webpage. Let's talk about CSS and find out how to make it pretty.

CSS Guide

As you saw in the HTML tutorials, there were many instances where I said we will learn how to style this with CSS. CSS is not what builds a webpage, but rather styles it. So if a structural engineer builds the building (they would be the HTML), an architect designs the building (they would be CSS). There are no tags like those we saw in HTML, rather treat a CSS page as if it is already in a giant tag.

There are two ways to put your CSS on the HTML page. You can either put it in <style></style> tags within the <head></head> tags, or you can link it in the <head></head> tags with <LINK rel="stylesheet" href="/style.css">. One may want to enclose the css within the style tags if you only have one page to access, but if you are using an FTP client to upload your website's files than save your css stylesheet separately near the same page as your index. Linking the stylesheet to your main page allows for quicker loading of your index page.

The way CSS works it is declares an element, like a bold tag, a div tag, etc and puts styles to it. Styles are declared before a : and ended with a ; So lets take a look at what a bold style might look like.

Code:

[COLOR="red"]b[/COLOR] {
    font-weight:bold; [COLOR="Orange"]makes the text [B]bold[/B][/COLOR]
    font-size:12px; [COLOR="Orange"]makes the text larger or smaller[/COLOR]
    color:#FFFFFF; [COLOR="Orange"]makes the text a certain color[/COLOR]
}

As you can see, the type is declared and then styles are listed within { and }. Some may styles may change colors of a text, change sizes, and font colors. Whereas styles for a div box may position it, add a border, change the font within it.

Properties
Here are some example of properties that may be declared:

body { } : Edits the page overall. You can declare a global background color or global font styles.

b { } : Edits the bold style.

i { } : Edits the italicized style.

u { } : Edits the underline style.

a:link { } : Edits a link style. After the : may be :visited to change the link after its been clicked on by the user, :hover changes the link when the user's mouse is over it, and :active changes the link to display whether or not it is broken.

h1 { } : Edits the header style.

#DIVNAME { } : Edits the your div (a box on the page). Interesting to note that it is listed with a #.

.CLASSNAME { } : Edits chunks of text within your body. Interesting to note that it is listed with a .

Here is a part of a style sheet I've done:

Code:

[COLOR="Red"]body[/COLOR] {
	background-color:white;
	background-repeat:repeat-y;
	margin:4px;
	padding-top:4px;
	padding-bottom:4px;
	line-height:15px;
	letter-spacing:0px;
	color:#1D1D1D;
	font-family:arial, sans-serif;
	font-size:13px;
	letter-spacing:1px;
	cursor:default;
	text-transform:none;
	overflow:auto;
	overflow-y: scroll;
	overflow-x: hidden;
	}

[COLOR="red"]h1[/COLOR] {
	display:block;
	background:#E3E2E2;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
	font-size:25px;
	text-align:center;
	font-weight:normal;
	color:#FFFFFF;
	letter-spacing:5px;
	line-height:50px;
	padding:0px;
	margin-top:0px;
	margin-bottom:0px;
}

[COLOR="red"]#main[/COLOR] {
	top:300px;
	width:100%;
	background-color:white;
	letter-spacing:0px;
	padding:0px;
	z-index:1;
	margin:0 auto;
	overflow:visible;
	}

[COLOR="red"]A:LINK, A:HOVER, A:VISITED, A:ACTIVE[/COLOR] { 
	COLOR: #fcbe47;
	text-decoration:none; 
	text-transform:none; 
	font-family:helvetica; 
	font-size:11px; 
	background-color: none;
	font-weight:bold;
}

Now that we know how it is formatted, you have ALL the tools you need to build a webpage. To find all of your style options, check out this page and click on the property you are looking to edit.

I have attached a css and index page example from my own personal portfolio website so you can see a real life example. Feel free to go through and resave these as style.css for the css page and index.php and upload them for examples, but they are currently just in .txt format.

Hope this helps everyone! Please let me know if you have any questions or if you'd like me to add anything!

Jasmine · Apr 26, 2014

Pretty good guide. You might want to add something about classes and their selectors, though. I hardly ever use divs.

Also, here's a pretty good resource for other selectors you can include. It also includes some examples/explains what some selectors change.

And if you can, it might be helpful to include a completed (basic) webpage (with an included stylesheet) and maybe explain the differences (and pros and cons) between an external stylesheet and an internal one. (Like for example, someone who's just learning may not know what "calling" a stylesheet means.)

Good job!

Atlantis · Apr 26, 2014

Jasmine said:

Added in info about classes, talked about external and internal stylesheets, and included some webpage examples. As well as, I did link this site in which you can find all CSS properties. Hope that helps out a bit more!

Jasmine · Apr 26, 2014

Great job!

Bird · Jun 25, 2014

Here's a bit more, add these to your guide to explain the CSS tags and what they do.
CSS Properties

-How to connect external css to html -
—<link rel=“stylesheet” href=“css/style.css” />
link = connection from other place
rel = type of link
href = location

-How to connect internal css-
—<style> ### </style>

Width - width of the element
Height - height of the element
background - color of the background of the element
border - adds border around element
padding - adds space around element
margin -(top right bottom left) adds white space between edge of browser and element

FONTS
font-family - Changes font style
font-weight - bold, light, normal etc.
font-size - size of font
letter-spacing - spacing between each letter
line-size - size of the line
line-height - spacing between each line
color - changes font color

FLOAT
float - moves object
—left : keeps object on the left side
—right : keeps object on the right side
—up : keeps object on the top
—down : keeps object on the bottom

POSITIONING
position- gives area where positioning should begin
—Absolute : puts it in coordination outside the parent
—Relative : puts in in coordination inside parent
—Fixed : Puts it in coordination with screen ( doesn’t move)
top - moves object down
right - moves object left
left - moves object right
down- moves object up
background-attachment: fixed - keeps image from moving

SEMANTICS LIST ITEMS AND MENUS
hover - changes element when hovered
text-decoration - Can turn bullets off etc.

EDGES AND SHADOWS
browser codes
— -moz-
— -webkit-
border-radius - adds a rounded edge to the box
box-shadow - adds a shadow under the box
text-shadow- adds a shadow under the text
-browsercode-box-shadow: X offsetPX Y offsetPX, shadowlengthPX color;

BOX GRADIENTS
background : -moz-gradient(orientation, origin location, ending location, starting color, transition% color, end color);
-webkit-gradient(orientation, origin, end, from(starting color), color-stop(decimal of change, color), to(end color));

Fantasia's Crash Course in HTML/CSS

Atlantis

USDA Organic

Attachments

Jasmine

Well-Known Member

Atlantis

USDA Organic

Jasmine

Well-Known Member

Bird

MyVMKPal Webmaster Dev