Freakin' Sweet Free Fonts

I was browsing around fontspace.com earlier today and came across these freakin' sweet fonts, and thought I would share them. Carnivalee Freakshow by Livin Hell, Barber Shop by Last Soundtrack, and Santos Dumont by Billy Argel. Preview images below.

Learning CSS Part 3: Box Model and Background Images

In part 3 of Learning CSS, I am introducing the Box model and Background Images.

Box Model, Margins and Padding

Every element in HTML has what is called a box model. A box model consists of height, width, padding, margin, and border.

Box Model

The padding and margin of an element are similar, yet different. They are similar in that they add space around the width and height of an element, yet they are different in how they do it. Padding adds the space to the inside of the element. Margin adds the space to the outside of the element. For example, think of two polaroids placed next to each other. The white space around the picture is the Padding, making the element larger than it actually is. The space between the two polaroids is the Margin.

Note: padding, margin, and border all add to the height and width of the element. Also, FF reads padding and squeezes the content in, IE6 reads padding and pushes the border out.

Border consists of border-width, border-color, border-style. They can be truncated into one line:

border: 1px solid #000000;

Size, style and color. Border must be declared in this order.

For margin and padding, there are margin-left, margin-right, margin-bottom, and margin-top, same for padding. However, there is also a truncated version of these as well:

margin: 10px; padding: 10px;

The code above specifies all edges have 10px margin/padding.

margin: 10px 5px; padding: 10px 5px;

The code above specifies top and bottom have a 10px margin/padding, and left and right have a 5px margin/padding.

margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px;

The code above specifies the margin/padding size of the top, right, bottom and left edges. They go clockwise.

Box Model Measurements

There are a few different ways to specify the size of an element: em, px, and %.

em refers to the em-spacing of the font. em-spacing refers to a space the size of an "m" in the font. The size of an em-space is entirely dependent on the size of the font (specifically the p tag), therefore, if the font size increases, so does the size of the boxes using em as a measurement. And the default size for each font varies for each browser. Got that? Good. Moving on…

px is the least confusing. What you type is what you get. 10px is 10px.

% is a measurement based on the size of the containing element, whether it be body, div, or anything else. Declare 25% height or width on an element and that element will be 25% high or wide in its parent element. The actual px values will vary depending on the size of the parent element, but the % will stay the same.

Elastic, Fixed, and Fluid Sites

There are three types of websites: Elastic, Fixed and Fluid.

Fixed has all values in px. Nothing moves, nothing changes.
Elastic has all values in %. Everything is based on the size of the browser window.
Fluid has all values in em and %. The layout changes with the size of the browser window and the font changes with the user's default settings.

Background Image Placement

Because every html element has a box model, every element can also have a background image and color. Specified as background, background-color, background-image, background-position, background-repeat. Everything can be condensed into one call:

background: #003300 url(images/image.jpg) no-repeat 20px 50%;

The order is and must be as follows: color, image url, repetition, left position, top position. The background color will always appear beneath the background image. The background image can be told to repeat-x, repeat-y, repeat, or no-repeat.

The position of the background image is specified by the last 2 numbers. You can specifiy these as left or right and top or bottom. If you use pixels (say 25px 75px) to place the background image, the background image will be placed 25px to the left and 75px down, based on the top left pixel of the image.

If you use % (say 10% 100%), the image will be placed 10% left and 100% down, however, it is not based on the top left pixel. For 10% left, it is based on a location that is at the 10% mark of the entire width of the image. For 100% top, it is based on a location that is at the 100% mark of the entire height of the image (positioning it flush with the bottom of the element). 0%, 0% mark. 25%, 25% mark and so on.

Learning CSS Part 2: Classitis/Divitis and Font Control

Last week I described the basics of XHTML and CSS. This week I am continuing with "Classitis and Divitis"

"Classitis" / "Divitis"

Classitis is a term for the overuse of unnecessary classes on an element. Such as in the example below, where the h1 is the only tag within the div.

<div> <h1 class="headerText">Heading</h1> </div>

It is best to directly target the h1.

Divitis is a term for the overuse of unnecessary divs in the markup. For example:

<div> <div align="center"> <h1>Heading</h1> </div> </div>

The <div align="center"> adds unnecessary markup to the HTML, when it can just be applied to the h1 CSS style.

Font Control

Below are style properties used in styling text:

• font-weight: declares bold or normal
• font-style: declares italic or normal
• font-size: declares the font size (10px)
• font-family: declares the font used. This uses a comma-separated list so that if one font is unavailable, then the next font is read, until it has the declaration of a sans-serif (Verdana, Arial, Helvetica, sans-serif;). If your font name has two words separated by a space, you need to enclose them in quotes ("Lucida Grande", "Arial Black", "Century Gothic";)
• line-height: declares the line height of the font. It is best to set this to 50% more than the font size as this provides the user with visual "comfort" while reading. ie: 12px/18px, 10px/15px, 18px/27px
• text-decoration: declares whether text has an underline, overline, line-through, blink, and none
• text-align: declares whether text is aligned left, right, center, or justified
• letter-spacing: declares the width of the space between letters
• word-spacing: declares the width of the space between words

Most of these can be declared in one line:

font: normal 12px/18px Verdana, Arial, Helvetica, "Century Gothic", sans-serif;

The order being: (font-weight or font-style) font-size/line-height font-family.

Learning CSS Part 1: Basics

This series is a crash course in CSS and XHTML for all the newbies. I was once a newbie as well, until I read two very-easy-to-read books on the subject, CSS Mastery and Bulletproof Web Design (review), available together at Amazon.

HTML/XHTML

In order to get a full understanding of how CSS styles HTML, we’ll need to get a basic understanding of HTML and XHTML (Extensible Hypertext Markup Language). The biggest difference between HTML and XHTML is that XHTML is more strict and less forgiving than HTML. For example, in HTML it is okay to write <BODY></body>, while in XHTML, it will return an error. Therefore, it is always in best practice to create your HTML in all lowercase tags. Also in XHTML, all tags must be closed. For example, <p></p>, <br />, <hr />, <img src="#" />. It is always in best practice to write in XHTML.

There are 2 different types of tags: inline and block-level. Inline tags allow multiple instances of that tag to be placed on the same line (a, em, span, strong, img). Block-level elements allow only one instance per line, placing the next tag below the one before it (table, p, h1, div, ul, li, ol).

A doctype is also important as it can effect the rendering of the CSS. That's a whole other world.

CSS Syntax/Overview

CSS (Cascading Style Sheets) styles the HTML. The syntax for CSS is as follows:

selector { property: value; }

The selector is the HTML tag, id (#), or class (.) being styled. The styles are stated within curly braces. The property is what is being styled (margin, padding, font-size, etc) and the value is the value of the property (10px, 100%, #000000). It is always best to end a property: value;" declaration with a semicolon. This can make or break your styles.

An id (#) refers to the identity of the element being styled. It can only be used once per page, therefore, it is best to use it to describe an area of the page (#wrapper, #header, #footer, #bodyContent). A class (.) refers to any HTML tag that is receiving special treatment. For example: p.quote, a.externalLink, li.highlighted. While HTML tags can receive more than one class separated by a space, it can only receive one id.

<p class="class1 class2 class3" id="id1"></p>

Inline, Embedded and External Styles

CSS cascades, meaning that an elements' style inherits any style previously called for that element. For example, if there is a style of p { color: #FF0000; } at the top of a CSS file, any call for a styled p after that will inherit the #FF0000 color.

An external style sheet is located in an external file, "filename.css." An embedded style is located in the head of the HTML file, between <style></style> tags, overwriting any specific style declared in the external style sheet. An inline style is located on the tag itself, declared as style="margin: 0; color: #000000;".

Coming up next is Learning CSS Part 2: Classitis/Divitis and Font Control... stay tuned.

Welcome

Welcome to JL Design. I am Jason LaRose. I'm not much of a writer, which is why I design. My goal for this site is to provide myself with an online portfolio as well as to provide you with useful design and coding resources, links, and information. Visit the about page to learn more about my professional offerings. View my portfolio to see what I can do. If you're interested in my work or would like to contact me, visit my contact page. Otherwise, enjoy and thanks for reading.