How to make CSS and HTML Work Together Part 2

In part 1 we learned what CSS is, now we can see what it does. We now know how to move our furniture around, lets bring it in the room. HTML is one of the languages of the internet. It is how the internet interprets images, words, music etc.

Thanks to the sharing and teaching power of the internet there are may great places to generate HTML codes. Because of that, actually creating the proper HTML code is easy, its the placement that has become a little more difficult to understand.

If you’re using a templated website (and most of us are), when you place an HTML object onto the web page, you preview it and tweek the CSS code to make sure the object is place where you want it. Usually you see this problem with objects like headers, footers, and images to name a few.

Initially, my CSS header template was 760px which caused it to look like this: as a result, the header is centered like this in the template:

When I edited the header, i changed the pixel field to 960px: which made the field wider. As a result, the expanded header looked like this: .

As you can see, CSS has the ability to stretch and shape the HTML objects you place into your template.

Using the Power of Friend Suggestions

I am notorious for giving friend suggestions. Because of that, I often get feedback from my friends asking who these people are that I suggest to them. I love the suggest a friend to option because it allows me to do two things:

1. Connect people that know each other but are not already connected online.

2. Introduce people who I think may have something in common or who could be a good strategic connection. This is also known as a referral in face to face networking.

For those of us who use social media to build relationships and expand our sphere of relationships, referrals are key. Suggesting new friends allows networkers to do just that.

Facebook has the ‘Suggest Friends for ‘ feature that can be found on the far left, below all the application boxes (see picture). This is a cool feature that allows you to suggest up to 2o friends to someone. This tool is excellent for your friends who are new to Facebook. Suggesting friends to help people grow their network is something that most people appreciate, and often, they return the favor by suggesting people they know that they think may be good connections for you.

Twitter has a fun weekly tradition called #FollowFriday.

Tweeters use Follow Friday to share the people they follow most with their Followers. It’s a way of saying, “this person has good content, follow them”!

These tools are great ways to make and share connections and virtually every social media outlet has a similar feature. Use them to your advantage, and take friend suggestions as a real opportunity to start a new relationship.

How to make CSS and HTML Work Together Part 1

For the last week or so I have been struggling to figure out how to place an image into the header of my Wordpress blog that covered the entire area of the header. Though I had a reasonable amount of knowledge about HTML, CSS (Cascading Style Sheet) was completely foreign to me.  I’ve been doing a lot of research online trying to figure out the mystery of CSS, and after a lot of dead ends and partial explanations I was finally able to come to some real conclusions about CSS, and how it relates to HTML.

None of the sources I found describe what I believe to be the key to understanding how CSS and HTML interact.  If you think of your website as a room, HTML is the furniture, and CSS is where you put the furniture.

When you look at your CSS, you will likely see something like this on the sheet:

#header {
width: 960px;
height: 180px;
color: #FFFFFF;
font-size: 16px;
font-weight: normal;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
}

Pixels (px) is the spacial representation of your header. To be honest I started out just playing with the numbers and previewing each change to see what took place. This also makes it easier to correct mistakes quickly.

CSS does not change the size of HTML objects. If your CSS framework is smaller than your HTML image, the image will not show completely. For instance if your header is 760px and your HTML image is 960px, you will only see 760px of that image.

In the next section, I will explain how HTML and CSS interact.