This week – Reset!

A lot of the time, Blend will set margins and odd settings automatically when you are doing edits on properties (width, height) or when you are dragging objects around the Artboard. A quick and easy way to see what’s going on is by looking at the little square that is next to every property.

A blank square will denote that there is nothing set for that property, a white square means there is a property set, an orange square means there is a Binding set, and a green square means there is a Local Resource set.

Any who, an easy way to get rid of that pesky setting is to simply do a Reset, we can do that by clicking on the white square, and selecting Reset. It’s a good way to get rid of annoying margins, weird alignments, odd heights/widths and so on.

That about wraps it up, tune in next week for another crazy tip?

The Basics

Let’s start with the most common and basic CSS attributes, width and height. Once you assign a class to an element you are free to style it any way you want. We will be using this code snipet and styling it as examples.

1
2
3

<div class="test">
  <p>Hello</p>
</div>

You can now assign height and width values, like this. Take special note that after each attribute, we add a ; to tell the browser to move to the next attribute.

1
2
3
4

.test{
  width:200px;
  height:200px;
}

Which would look like. Take note I added a background color so you could see the dimensions of the <div>.

We can also apply different colors to text and backgrounds. When applying colors to backgrounds of fonts, you can use color names like Red, Blue, Green (the full list can be seen here), hex values (#000000, #FFFFFF) or the RGB value (rgb(0,0,0)). To recap, to change the color of a font, we use color, and to change the color of a background we use background-color. This is how it would look.

1
2
3
4

.test{
  color:Pink;
  background-color:Blue;
}

Which would look like this.

There are many font modifiers was have available to us as well. Here are a few.

• font-family – Defines a either a certain font (Times New Roman) or a font type (San-Serif)
• font-weight – Defines if the font will be bold or not.
• font-size – Defines the size of the font either in pixels(px), points(pt), multiply(em)

The CSS would be something like this.

1
2
3
4
5

.test{
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size:24px;
  font-weight:bold;
}

And it would look like this.

Moving Forward

Now that you have a good footing on CSS syntax, lets step it up a notch and introduce the float. Firs we’ll take a little history lesson. Traditionally, if you ever wanted a 2 column layout done in HTML, you would have to resort the tables, which looked something like this.

1
2
3
4
5
6

<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

While it doesn’t look so bad now, tables are a nightmare and most importantly, they are not semantic. Why this is an issue is because tables were made for 1 thing, to display tabular information. This is a problem when Google or Yahoo are indexing your page, it thinks that your whole page is actually a table of information and treats it differently than it would if you have the information in a <div>. So how do we get around this? We use CSS of course.

First you must understand the difference between a Block Element and an Inline Element. A Block Element, like a <div>, is an element that will take up all available horizontal space. Lets take a look at an example. I’m going to use a <div> (Block Element) and a <span> (Inline Element). I’m going to apply a background-color to each one so you can really see what space they take up.

1
2
3
4

<div class="test4">
  <div>Block Div</div>
  <span>Inline Span</span>
</div>

With no styles applied, the defualt behavior of each element is as follows.

Do you see the difference? The Block Element fills up all the horizontal space it can, where the Inline Element only takes up the space its needs. So then I bet your asking yourself how do we make Block Elements sit next to each other horizontally? We use the magic of Floats. Unfortunately that will take a full tutorial. Stay tuned for the next one =).

So here’s the deal, I’ve been learning web development for a while now, picking up tidbits from all over the web, books and friends helping me out. Then I started thinking, the web has been so great for helping me, I feel like I should do the same, which is why I am writing the first of a long series or how to articles, tutorials and information. I’ll be covering everything sequentially, so first part will be something along the lines of intro to the web in general, HTML and CSS. The subsequent parts will cover things like advanced CSS, WordPress integration, PHP/MySQL, Javascript and more. Enough of this, lets get to it, after the jump!

I suppose the most logical place to start would be introducing the concept of HTML and CSS to you.

HTML

HTML is a markup language, not to be confused with actual coding. I’m going to assume that you know absolutely nothing about HTML and start from the very beginning. All HTML tags start with a <tag> and end with a </tag>, this for example would be valid markup.

1

<p>hello</p>

Here is a list of the most common tags:

• <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> – These are the most important to the least important header tags
• <p> – This is a paragraph tag, it is generally a good idea to put all your body text into one of these tags
• <a> – This is a link tag, use this to link to off site pages or in-site pages
• <div> – This is a container generally used to arrange content in an organized fashion

There are many more tags for many different uses, to see all of them described go here.

So now we have a basic idea of what HTML tags look like, now lets go through some of the theory that goes behind coding HTML. HTML is a very linear language, where the further down in the code you are, the further down in the page you should technically be. Lets take a look at how some typical HTML should look.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<head>
<title>Example 1</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/script.js"></script>
</head>
 
<html>
<body>
 
<div>
  <h1>Hi I'm a header</h1>
  <p>And I'm a paragraph of text</p>
</div>
 
</body>
</html>

Lets break it down, line by line. First we have the <head> tag. Anything put in between the opening <head> tag and closing </head> tag will NOT be rendered in your browser. The <head> tag is used to load in things that are needed to make your web page work, things like your CSS style sheet, and Javascript. It is also where you define the title of your page, descriptions and keywords which we will get to in a bit.

1

<head></head>

Now lets take a closer look at some of the items we can have in the head tag.
The <title> tag is used to define the title of the web page.

2

<title>Example 1</title>

The <link> tag is used to link to an external file. Notice in the <link> tag there is are “type” and “rel” identifiers. “Type” and “Rel” combined tell the browser how to handle the file it is linking to. In this instance we are linking to a CSS style sheet which literally styles the entire page.

3

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

This <script> tag is used to link to a Javascript file that contains code to modify your web page. We will discuss Javascript later on, but its good to know how to link to it properly. Notice again that we have a “type” identifier, to tell the browser how to handle the file.

4

<script type="text/javascript" src="/scripts/script.js"></script>

Next we have the <html> and <body> tags. These are ESSENTIAL for your web page to work. They tell the browser that the actual HTML code starts and stops!

6
7
8
9
10
11
12
13
14
15

<html>
<body>
 
<div>
  <h1>Hi I'm a header</h1>
  <p>And I'm a paragraph of text</p>
</div>
 
</body>
</html>

Next take a look at the <div> tag, its wrapping the <h1> and the<p> tags in a box.

9
10
11
12

<div>
  <h1>Hi I'm a header</h1>
  <p>And I'm a paragraph of text</p>
</div>

This is useful because you can think of HTML as a collection of boxes stacked one on top of another, and that way its very easy to move things around if they are sectioned off in their own little boxes.

CSS

Now lets move on to CSS, the reason the web looks so cool now-a-days. CSS stands for Cascading Style Sheet. CSS is basically a separate file that defines your HTML tags (remember – <h1>, <p> etc.). By default every tag has a style already applied to it, that can be useful but I generally don’t like this, so I use a style sheet reset, which re-defines every HTML tag to have no style at all. You can get that reset here.

Now that we have a completely clean slate lets stay learning what CSS does and how its suppose to be written. CSS is based on ‘Classes’. Classes are a way of targeting specific tags to be styled a certain way.

First lets take a look at how to include a CSS file in your web page. You must include a .css file in the head of your HTML page, and the link is relative to where the HTML page is. Take a look at the example below, the style.css file is located in a folder called css.

1
2
3
4

<head>
<title>Example 2</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

Now lets take a look at what a Class looks like.

5
6
7
8
9
10
11
12
13

<html>
<body>
 
<div class="header">
  <p>This is a paragraph</p>
</div>
 
</html>
</body>

And then in the CSS stylesheet, we define the Class like this.

1
2
3
4
5
6

.header {
  background-color:red;
  color:white;
  width:100px;
  height:40px;
}

Take special note of the period . before the Class Name, that tells the browser reading the CSS style sheet that what you’re designating is indeed a Class.

This is how our code would look in a browser.

You can pretty much do anything once you have assigned an element (<p class="text" > etc..) a Class, for the full specifications of what attributes you can give a Class, refer to the W3C Schools.

This concludes Part 1 of What I’ve learned about Web Development, in Part 2, I’ll be diving much more in depth about CSS, tricks and tips.

Cheers!