CSS Atoms | CSS3 Tutorials, Tips, and Articles » Basic http://cssatoms.com Thu, 01 May 2014 20:03:32 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.1 Learn How to Wrap Text Around an Image in CSS3 http://cssatoms.com/basic/learn-how-to-wrap-text-around-an-image-in-css3/ http://cssatoms.com/basic/learn-how-to-wrap-text-around-an-image-in-css3/#comments Thu, 16 Jun 2011 17:05:01 +0000 http://cssatoms.com/basic/learn-how-to-wrap-text-around-an-image-in-css3/ One of the most important properties for web design is the Float property. The Float property is used to move elements to the right or left, so other elements can […]

The post Learn How to Wrap Text Around an Image in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
One of the most important properties for web design is the Float property. The Float property is used to move elements to the right or left, so other elements can wrap around them. Many web designers use the Float property to wrap text around images without creating classes or IDs. When we use the Float property, elements that are continuous to the element will flow around it, depending on where the floated element was located at first and its Float value. Its markup values are: left, right, none, or inherit. Floated elements will move until they find a container. If your element has a size bigger than the next container, it will move downward until it finds room; so, keep in mind space and sizes. Also, make sure to specify the element’s width to avoid errors or miscalculations.
In this tutorial we will learn how to float an image to the left, so text will float around it without leaving white space around the image.

STEP ONE:

Let’s start by creating a basic HTML file with some content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Use CSS Float Property to Wrap Text around an Image</title>
 
<link href="style.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 
    <h1>Use CSS Float Property to Wrap Text around an Image</h1>
 
    <p>One of the most important properties for web design is the Float Property. The Float Property is used to move elements to the right or left, so other elements can wrap around. Many web designers use the Float Property to wrap text around images without creating classes or IDs. When we use the Float Property, elements that are continuous to the element will flow around it depending on where the floated element was located at first and its Float value (right or left).Its markup values are: left, right, none, or inherit. Floated elements will move until they find a div container or another container. If your Floated element has a size bigger than the next container, it will move downward until it finds room; so, keep in mind space and sizes. Also, make sure to specify the element's width to avoid errors or miscalculations.<br />
 
In this tutorial we will learn how to float an image to the right, so text will float around it without leaving white space around the image. </p>
 
    <p>One of the most important properties for web design is the Float Property. The Float Property is used to move elements to the right or left, so other elements can wrap around. Many web designers use the Float Property to wrap text around images without creating classes or IDs. When we use the Float Property, elements that are continuous to the element will flow around it depending on where the floated element was located at first and its Float value (right or left).Its markup values are: left, right, none, or inherit. Floated elements will move until they find a div container or another container. If your Floated element has a size bigger than the next container, it will move downward until it finds room; so, keep in mind space and sizes. Also, make sure to specify the element's width to avoid errors or miscalculations.<br />
 
In this tutorial we will learn how to float an image to the right, so text will float around it without leaving white space around the image. </p>
 
</body>
 
</html>

STEP TWO:

Now, find any image that you want to include within the content. I chose the following image and I saved it for web inside a predestined images folder for my HTML page:
Step Two Image
You can use your own image, or download my image at the end of this tutorial.

Place the image on the same line as text. I placed mine within the first paragraph tag:

<p><img src="images/Floatimage.jpg" width="100" height="78" alt="Floated Image" />One of the most important properties for web design is the Float Property. The Float Property is used to move elements to the right or left, so other elements can wrap around. Many web designers use the Float Property to wrap text around images without creating classes or IDs. When we use the Float Property, elements that are continuous to the element will flow around it depending on where the floated element was located at first and its Float value (right or left).Its markup values are: left, right, none, or inherit. Floated elements will move until they find a div container or another container. If your Floated element has a size bigger than the next container, it will move downward until it finds room; so, keep in mind space and sizes. Also, make sure to specify the element's width to avoid errors or miscalculations.<br />
 
In this tutorial we will learn how to float an image to the right, so text will float around it without leaving white space around the image. </p>

NOTE: Make sure to place elements that you plan to float before any element you wish to wrap around.

Preview in browser:
Step Two Preview
Notice that the HTML places our image as a container creating an unappealing white space around the image.

STEP THREE:

Luckily, we have a CSS property to fix the unpleasant open space around our image. Let’s Float our image to the left, so content can follow the element’s block and wrap around it.
Link a CSS file to your HTML and add the following declaration for your image:

p img {
       float: left;
}

Preview in browser:
Step Three Preview

Way better, huh?

STEP FOUR:

To create a little bit of space between our image and content let’s add a right margin to our image declaration:

p img {
        float: left;
        margin-right: 20px;
}

Preview in browser:
Step Four Preview

Congratulations! You learned how to correctly place and float any element within your HTML page. Practice with more images and values to dominate CSS; as Publilius Syrus once said, “Practice is the best of all instructors”.

Download Source Files

The post Learn How to Wrap Text Around an Image in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/learn-how-to-wrap-text-around-an-image-in-css3/feed/ 0
Learn How to Style a Basic Tabbed Navigation Menu Using CSS3 http://cssatoms.com/basic/learn-how-to-style-a-basic-tabbed-navigation-menu-using-css3/ http://cssatoms.com/basic/learn-how-to-style-a-basic-tabbed-navigation-menu-using-css3/#comments Thu, 12 May 2011 10:04:51 +0000 http://cssatoms.com/basic/learn-how-to-style-a-basic-tabbed-navigation-menu-using-css3/ Having nice-looking, easy to navigate, simple navigation bars is very important for any web-site. Luckily, we have CSS to style our navigation with colors, fonts, images, etc… In this CSS […]

The post Learn How to Style a Basic Tabbed Navigation Menu Using CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>

Having nice-looking, easy to navigate, simple navigation bars is very important for any web-site. Luckily, we have CSS to style our navigation with colors, fonts, images, etc… In this CSS tutorial we are going to learn how to style an unorganized list to create a basic tabbed navigation for your web-site. We will start with a basic unorganized list with anchors, and then we will be adding style to each part and element of our list. Let’s get started!

STEP ONE:

Let’s start by writing a basic HTML list. Structure an unorganized list using 4 or more list elements:

<ul >
 
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>SCHEDULE</li>
<li>PRICES</li>
<li>CONTACT</li>
 
</ul>

Now we are going to add anchor tags <a></a> to convert each list item into a link and we are going to specify the unorganized list with a unique ID, called “nav”:

<ul id="nav">
 
<li><a href="#" title="">HOME</a></li>
<li><a href="#" title="" >ABOUT</a></li>
<li><a href="#" title="">GALLERY</a></li>
<li><a href="#" title="">SCHEDULE</a></li>
<li><a href="#" title="">PRICES</a></li>
<li><a href="#" title="">CONTACT</a></li>
 
</ul>

I created an ID, just in case you need to create more unorganized lists within your HTML file.

STEP TWO:

It is time to start styling our list by linking a Cascading Style Sheet.
Create a CSS file, name it “style”, and attach it to your HTML page:

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

STEP THREE:

The first thing we need to style is the entire list; hence, we are going to add a declaration for ul #nav and add different properties to it.

Before you start writing the declaration for it, make sure to save in your images folder two images, one for the navigation main background and one for the current link. I used Photoshop CS5 to make the following images:
Step Three A Step Three B
Images zoomed in to 400%.

The smallest image has a size of 1px by 37px. I am going to use it for the background of my entire navigation bar. I named, “NavigationBg.jpeg”.
The largest image has a size of 1px by 43px. I am going to use it for the background when a link is selected. I named, “CurrentBg.jpeg”.

Now that we have our images ready, let’s write the declaration for our unorganized list:

ul#nav {
 
width: 100%;
height: 43px;
font-size: 11pt;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
list-style-type: none;
margin: 0;
padding: 0;
background-image: url(images/NavigationBg.jpg);
background-repeat: repeat-x;
background-position: left top;
 
                }

As you can see, our unorganized list width depends on the user browser’s window and the height of our navigation will have the same height of our “Current.jpeg” image. Each word within the list is going to have a size of 11pt with a bold sans-serif font.
Also, we set none for each <li> element’s style, so no bullets will be added. At the end, we stated the background image properties for our unorganized list.

If you preview the file in your browser, you should obtain the following:
Step Three Preview

STEP FOUR:

Next, we are going to fix how each link is displayed. We are going to add a declaration for each <li> tag by writing, ul#nav li.
Let’s use the display property to generate a block box before and after each link and let’s float each link to the left with a 5px margin between each link:

ul#nav li {
 
display: block; 
float: left; 
margin: 0 0 0 5px;
 
                }

Preview in browser:
Step Four Preview

Getting there!

STEP FIVE:

Each link needs more space and they also need more style. We are going to fix that by adding a declaration for each link’s anchor <a>:

ul#nav li a {
 
height: 43px;
color: #666;
text-decoration: none;
display: block;
float: left;
padding-top: 8px;
padding-right: 15px;
padding-bottom: 5;
padding-left: 15px;
 
                }

Preview in browser:
Step Five Preview

Great! Now each link has its own space and color. We only need to add two more properties to style their hover and current state.

Subsequent, our links hover state doesn’t need too much style. Let’s just add a color to them:

ul#nav li a:hover {
 
                color: #48A1C3;
 
                }

STEP SIX:

To conclude with our tabbed navigation, we need to specify how each selected link will look. Here is where we apply our “CurrentBg.jpeg” image to give to our navigation a tabbed look. Because I don’t have linked pages for each link, I am going to add a class to one of the links so you can see how the current state works.

<li><a href="#" title="" class="current">GALLERY</a></li>

ul#nav li a.current {
 
color: #FFF;
padding: 5px 15px 0;
background-image: url(images/CurrentBg.jpg);
background-repeat: repeat-x;
background-position: left top;
 
                }

Preview in browser:
Final Result

That’s all readers! Download and modify the file to fit your needs.

Download Source Files

The post Learn How to Style a Basic Tabbed Navigation Menu Using CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/learn-how-to-style-a-basic-tabbed-navigation-menu-using-css3/feed/ 0
Learn the Fundamentals of CSS3 Syntax http://cssatoms.com/basic/learn-the-fundamentals-of-css3-syntax/ http://cssatoms.com/basic/learn-the-fundamentals-of-css3-syntax/#comments Wed, 11 May 2011 10:04:22 +0000 http://cssatoms.com/basic/learn-the-fundamentals-of-css3-syntax/ The presentation, style, and design of a web site is accomplished by using Cascading Style Sheets (CSS). CSS helps web developers and web designers to control the layout of their […]

The post Learn the Fundamentals of CSS3 Syntax appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
The presentation, style, and design of a web site is accomplished by using Cascading Style Sheets (CSS). CSS helps web developers and web designers to control the layout of their web-sites and take them to the next level. In order to know how CSS works you need to have a solid understanding of HTML standards and elements. In this CSS tutorial you will learn the fundamentals of CSS and what its syntax consists of.

First let’s learn some important facts about CSS:

  • CSS is used to separate design from content. It is good for presentation, usability, accessibility, and formatting.
  • CSS is composed of statements for specific elements, classes, Ids, or images.
  • CSS specify in English the names of each element and its properties.
  • The specification of each element is called a rule or a declaration.
  • With the help of CSS you can stylize every element in your HTML page.
  • You can add as many CSS as you like, but is better to maintain a single main sheet.
  • You can use and add different CSS for specific tasks; for example, you can create a specific CSS if the viewer wants to print the website.

Now let’s see how the basic syntax of CSS looks like:
Syntax Example 1
First we need to specify which element we want to style, in this case h1.
Second, we need to add braces {}.
Inside the braces we put what property or properties we want to add to our element. I wanted to add color to my headings, so I wrote color and give it a gray value of #333.
After each property remember to add a semicolon (;).

Here is another example:
Syntax Example 2

As you can see, each rule/declaration always contains a property and a value. It allows you to add as many properties and values as you like.

Let’s take a look at a basic HTML page and how I stylized each element using a Cascading Style Sheet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fundamentals of CSS Syntax</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <div class="header">
    <!-- end .header --></div>
<div class="container">
  <div class="content">
    <h1>Fundamentals of CSS Syntax</h1>
    <p>The presentation, style, design of a web site is accomplished by using Cascading Style Sheets (CSS). 
    CSS helps web developers and web designers to control the layout of their web-sites and take them to the 
    next level. In order to know how CSS work you need to have a solid understanding of HTML standards and elements. 
    In this CSS tutorial you will learn the fundamentals of CSS and what its syntax consists of.
    </p>
    <br />
    <!-- end .content --></div>
<!-- end .container --></div>
<div class="footer">
</body>
</html>

@charset "utf-8";
 
 
body {
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #FFF;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 80%;
	line-height: 1.4;
}
 
h1 {
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 20px;
	text-align: center;
}
 
p {
	margin-top: 0;	
	padding-right: 15px;
	padding-left: 15px; 
}
 
a:link {
	color: #42413C;
	text-decoration: underline; 
}
 
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}
 
.header {
	background-image: url(images/HeaderBg.jpg);
	background-repeat: repeat-x;
	height: 121px;
}
 
.container {
	width: 960px;
	background: #FFF;
	margin: 0 auto;
}
 
.content {
 
	padding: 10px 0;
}
 
.footer {
	background-image: url(images/FooterBg.jpg);
	background-repeat: repeat-x;
	height: 101px;
	padding-top: 30px;
	padding-right: 0;
	padding-left: 0;
	text-align: center;
	color: #666;
}

That’s all readers! Practice by styling more elements and you will see that is not that hard as it looks. If you know HTML you know CSS. Best of luck!

Download Source Files

The post Learn the Fundamentals of CSS3 Syntax appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/learn-the-fundamentals-of-css3-syntax/feed/ 0
Styling Lists Using CSS http://cssatoms.com/basic/styling-lists-using-css/ http://cssatoms.com/basic/styling-lists-using-css/#comments Tue, 10 May 2011 10:04:30 +0000 http://cssatoms.com/basic/styling-lists-using-css/ No more default bullet points or simple numbered lists. In this CSS tutorial we are going to learn how to style our HTML list items by using different numbers, letters, […]

The post Styling Lists Using CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
No more default bullet points or simple numbered lists. In this CSS tutorial we are going to learn how to style our HTML list items by using different numbers, letters, bullets, or images.

First, let’s learn the two different types of lists we can create.

  • Ordered Lists: They are specified by using <ol></ol> in our HTML page. Their elements are marked with numbers or letters.
  • Unordered Lists: They are specified by using <ul></ul> in our HTML page. Their elements are marked with bullets or images.

STEP ONE:

Let’s create an HTML page with an unordered list and a ordered list to see how many styles we can give them using CSS.

<li>HTML Atoms</li>
   </ul>
 
   <ol>
   <li>JavaScript Atoms</li>
   <li>PowerShell Atoms</li>
   <li>SQL Atoms</li>
   <li>The Web Made Easy</li>
   </ol>

STEP TWO:

Now that we have our lists ready to style, link a CSS to your HTML page and add an specification for the unordered list and one for the ordered list like shown below:

ul {
}
 
ol {
}

STEP THREE:

First let’s use the list-style-type to style the bullets of our unordered list:

  • Disc: the default marker type:
    ul {
    	list-style-type: disc;
    }

    Preview:
    Disc Type
  • Circle: Gives a small circle as bullet:
    ul {
    	list-style-type: circle;
    }

    Preview:
    Circle Type
  • Square: Gives a small square as bullet:
    ul {
    	list-style-type: square;
    }

    Preview:
    Square Type
  • None: Removes any bullet or marker from the list:
    ul {
    	list-style-type: none;
    }

    Preview:
    None Type

The list-style-type property is also used to style ordered lists. There are 11 different values to style an ordered list. This time, I am going to name the different kinds of ordered list values and give an example of each one.

  • list-style-type: armenian
    list-style-type: armenian
  • list-style-type: decimal (default type)
    list-style-type: decimal
  • list-style-type: decimal-leading-zero
    list-style-type: decimal-leading-zero
  • list-style-type: georgian
    list-style-type: georgian
  • list-style-type: lower-alpha (alphabetical order)
    list-style-type: lower-alpha
    Use list-style-type: upper-alpha to set capitals.
  • list-style-type: lower-greek

  • list-style-type: lower-latin (same as alpha / alphabetical order)
    list-style-type: lower-latin
    Use list-style-type: upper-latin to set capitals.
  • list-style-type: lower-roman
    list-style-type: lower-roman
    Use list-style-type: upper-roman to set capitals.

Now that we know the different available types of ordered list markers. Let’s style our ordered list with upper-roman numbers:

ol {
	list-style-type:upper-roman;
}

Preview:
list-style-type: upper-roman

STEP FIVE:

Did you know that you can set any image as the marker for your list? Yes, instead of using the list-style-type property we can use the list-style-image property to display any graphic.
Let’s give it a try:
Firs, download or make your desired bullet graphic and save it for web inside your images folder.
I am going to use this blue star: Blue Star Bullet

Then, add the list-style-image property to your unordered list specification and add the URL of your saved graphic:

ul {
	list-style-image: url(images/marker.jpg);
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

NOTE: For cross-browser compatibility, I set the list-style-item property to none and padding and margin to 0px.

Preview:
List Style Image

This is it! As you can see, lists can be styled just like any other element. Go ahead and make your past HTML lists appealing!

Download Source Files

The post Styling Lists Using CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/styling-lists-using-css/feed/ 0
Learn how to Shorthand CSS Properties http://cssatoms.com/basic/learn-how-to-shorthand-css-properties/ http://cssatoms.com/basic/learn-how-to-shorthand-css-properties/#comments Mon, 09 May 2011 10:03:41 +0000 http://cssatoms.com/basic/learn-how-to-shorthand-css-properties/ There are a lot of CSS properties that share common names; for example, margin-top, margin-right, margin-bottom, margin-left. Sometimes it gets pretty tedious and confusing to type all of those similar […]

The post Learn how to Shorthand CSS Properties appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>

There are a lot of CSS properties that share common names; for example, margin-top, margin-right, margin-bottom, margin-left. Sometimes it gets pretty tedious and confusing to type all of those similar properties, for that reason the CSS shorthand method was created. The CSS shorthand method helps us to increase speed, decrease file size, and be concise. Instead of typing four times the margin property, we can type margin and include all its specifications inside a single property. Let’s learn the different ways to do this:

STEP ONE:

Create a HTML page with different tags; such as, headings and paragraphs. Then, link a CSS file to it.
Choose any element of your page and within the CSS give it a different top, right, bottom, and left padding value:

.footer {
                padding-top: 30px;
                padding-right: 10px;
                padding-bottom: 5px;
                padding-left: 8px;
}

As you can see, I separately specified each value. Now, let’s learn how to use shorthand to simplify this property: 

.footer {
                padding: 30px 10px 5px 8px;
}

Easy, huh?
I typed padding one time and I specified each value inside of it. 

NOTES:

  • Make sure to follow this order when specifying: top, right, bottom, and left.
  • The same method can be used for the margin property.

STEP TWO:

Now, let’s learn how to specify a property when all the values are the same.
For my paragraph tag I specified (using the old way) a padding of 15px for all its sides:

p {
                padding-top: 15px;
                padding-right: 15px;
                padding-bottom: 15px;
                padding-left: 15px;
}

There is no need to specify the same number over and over again, just type the following and you will have 15 pixels on every side of the paragraph box:

p {
                padding: 15px;
}

STEP THREE:

What about if the top and bottom and right and left share the same values? No problem! You can abbreviate it as shown below:
Old way: 

h2 {
                margin-top: 5px;
                margin-right: 10px;
                margin-bottom: 5px;
                margin-left: 10px;
}

Using shorthand:

h2 {
                margin: 5px 10px;
}

I specified the top and bottom value first and then the right and left value.

STEP FOUR:

Yes, shorthand is also flexible with other CSS’s properties. Here is an example of how to use it for the background property:

.header {
                background-color: white;
                background-image: url(images/HeaderBg.jpg);
                background-repeat: repeat-x;
}

Beneath I used three different background’s properties to specify distinct elements, color, image, and repeat. In this case, the shorthand method is even more flexible, because it lets us specify them in any order. Here is how I shorthanded my background properties:

.header {
                background: white url(images/HeaderBg.jpg) repeat-x;
}

Now, it’s time to know if you learn how the shorthand technique works. Give it a try and abbreviate the following border properties:
border-top: 10px;
border-right: 8px;
border-bottom: 10px;
border-left: 15px

Let me know your answer!

Download Source Files

The post Learn how to Shorthand CSS Properties appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/learn-how-to-shorthand-css-properties/feed/ 0
How to Specify Fonts using the Font-Family Property in CSS http://cssatoms.com/basic/how-to-specify-fonts-using-the-font-family-property-in-css/ http://cssatoms.com/basic/how-to-specify-fonts-using-the-font-family-property-in-css/#comments Fri, 06 May 2011 10:03:50 +0000 http://cssatoms.com/basic/how-to-specify-fonts-using-the-font-family-property-in-css/ By using CSS we have the ability to easily control the fonts of our website. We as web designers or developers are limited to use certain fonts. We need to […]

The post How to Specify Fonts using the Font-Family Property in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
By using CSS we have the ability to easily control the fonts of our website. We as web designers or developers are limited to use certain fonts. We need to be careful in our font choices making sure we always use “browser safe fonts”. To make the best use of fonts we can customize and regulate the fonts that would like to use for each element of our page by using the font-family property. The font-family property can contain a set of fonts that share common characteristics, so we can make sure the user correctly sees our webpage’s content as we want to.

STEP ONE:

Let’s create a HTML page with a CSS linked. Add any content to your HTML page; for example, I added a heading and paragraphs tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to Specify Fonts using the font-family Property in CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <div class="header">
    <!-- end .header --></div>
<div class="container">
  <div class="content">
    <h1>How to Specify Fonts using the font-family Property in CSS</h1>
    <p>By using CSS we have the ability to easily control the fonts of our website. 
    We as web designers or developers are limited to use certain fonts. We need to be 
    careful in our font choices making sure we always use "browser safe fonts". To make 
    the best use of fonts we can customize and regulate the fonts that would like to use 
    for each element of our page by using the font-family property. The font-family property 
    can contain a set of fonts that share common characteristics, so we can make sure the 
    user correctly sees our webpage's content as we want to. </p>
    <br />
    <!-- end .content --></div>
<!-- end .container --></div>
<div class="footer">
    
</body>
</html>

STEP TWO:

In your linked CSS add the following property:

body {
	font-family: Tahoma, Geneva, sans-serif;
}

As you can see, I made a list of two sans-serif typefaces. If the user’s browser doesn’t support the Tahoma font, it tries Geneva font.
First, I specified the family-name, the name of the font’s family; such as, Tahoma. Then, I specified the generic-family, the name of the font’s style; such as, sans-serif.

Here is a list of the basic and most common “browser safe fonts” and their generic families:

  • Sans-serif Family: Arial, Arial Black, Trebuchet MS, Arial, Geneva, Helvetica.
  • Serif Family: Times, Times New Roman, Georgia, Palatino.
  • Monospace Family: Courier, Courier New, Andale Mono.
  • Cursive Family: Comic Sans.
  • Fantasy Family: Impact Webdings, Windings.

STEP THREE:

Now, let’s add a different font-family for the heading. Add an h1 specification in your CSS like shown below and add any font-family

h1 {
	font-family: Arial, Helvetica, sans-serif;
}

Let’s learn interesting facts about the font-family property:

  • Each font family needs to be separated with a comma.
  • If the font family contains more than one word add quotes. For example, the font New Times Roman needs to be specified like, “Times New Roman”.
  • Do not mix font families. Bad example: Verdana, Times, Impact, cursive. Each font-family needs to contain fonts that share common characteristics.
  • Always finalize with the specification of the generic family.
  • You can specify as many fonts’ families you would like.
  • If none of the fonts you specified can be found (rarely occurs), the browser will use whatever generic family was specified.
  • The font-family property is supported in all browsers.

Now that you know how correctly specify the font-family property set up different font families and save them for your next web projects.

Download Source Files

The post How to Specify Fonts using the Font-Family Property in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/how-to-specify-fonts-using-the-font-family-property-in-css/feed/ 0
How to Specify Font Sizes in CSS http://cssatoms.com/basic/how-to-specify-font-sizes-in-css/ http://cssatoms.com/basic/how-to-specify-font-sizes-in-css/#comments Thu, 05 May 2011 10:05:30 +0000 http://cssatoms.com/basic/how-to-specify-font-sizes-in-css/ HTML default sizes for headings and paragraph are a bit large and dull, right? We as web developers and designers need to learn how to correctly adjust font sizes, as […]

The post How to Specify Font Sizes in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
HTML default sizes for headings and paragraph are a bit large and dull, right? We as web developers and designers need to learn how to correctly adjust font sizes, as most people find the default sizes horrible and unsophisticated.  In order to adjust our HTML page font size we need to implement CSS. With the help of CSS we can control the font size our HTML page content; such as, headings, paragraphs, subtitles, etc. The CSS property that is used to do that is called, font-size. The font-size property lets us adjust sizes in four different ways, using pixels, using percentages, using ems (unite of measurement), or by using keywords. In this CSS tutorial, we are going to learn about the different ways of specifying font-size and the correct way to do it. Let’s get started!

THE HTML PAGE:

First, we need to have a HTML page with some content to stylize. I created a XHTML page with a main heading: <h1>, a subtitle: <h2>, and paragraph tags: <p>.
Also, I linked a CSS file to my XHTML page: <link href=”style.css” rel=”stylesheet” type=”text/css” />.
Let’s take a look at my XHTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to Specify Font Sizes</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 <body>
  <div class="header">
<!-- end .header --></div>
<div class="container">
  <div class="content">
    <h1>How to Specify Font Sizes in CSS</h1>
    <h2>(CSS Basic Tutorial)</h2>
    <p>In this basic CSS tutorial, we are going to learn how to adjust the font size of an HTML page by implementing a 
       Cascading Style Sheet with the font-size property.</p>
    <p>HTML default sizes for headings and paragraph are a bit large and dull, right? We as web developers and designers 
       need to learn how to correctly adjust font sizes, as most people find the default sizes horrible and unsophisticated.  
       In order to adjust our HTML page font size we need to implement CSS. With the help of CSS we can control the font size 
       our HTML page content; such as, headings, paragraphs, subtitles, etc.</p>
    <br />
    <!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>

Notice that I created a class for the footer; therefore, I can apply a different font size to the footer’s paragraph tag.

ADJUSTING FONT SIZE WITH PIXELS (px):
When we specify font size with pixels we are identifying dots on the computer screen. For example, adjusting a font to 24 pixels means that 24 dots are going to be between the bottom part and the top part of the letter.

h1 {
	font-size: 24px;
}

Preview in browser:
font-size using pixels preview

NOTES:

  • px must be right before the number; don’t add a space in between.
  • Font specified with pixels doesn’t scale in Internet Explorer.
  • Mobile devices don’t reduce fonts specified with pixels.

ADJUSTING FONT SIZE WITH PERCENTAGES (%):
When we specify the font size of a parent element (Ex. Body) using percentages we are telling the browser to relatively fix the size of child elements (Ex. Paragraphs) For example, adjusting the font size for the body to 80% will make the no-identifying paragraph tags to inherit it.

body {
	font-size: 80%;
}

Preview in browser without body or paragraph font size specified:
font-size using percentages - without

Preview in browser with a body font-size of 80%:
font-size using percentages
Notice how the paragraph inherited the font-size declared for the body.

NOTE: When we specify font-size using percentages, the text will become fully scalable.

ADJUSTING FONT SIZE WITH EM UNIT (em):
Em is a unit of measurement that defines the percentage of a text according to the point size of the current font. Similar to percentages, the em unit tells the browser to relatively fix the size of child elements when a font-size is specified for a parent element.

Because we already have our body font-size specified, let’s specify the font-size for our <h2> tag to 1.5e.m and see what happens.

h2 {
	font-size: 1.5em;
}

Preview in browser without font-size specified:
font-size using ems - without

Preview in browser with an h2 font-size of 1.5em:
font-size using ems

Not a big difference, huh? That’s because 1.5em is equivalent to 24px (our h1 font-size).

NOTES:

  • Ems is the best and popular font-size method to use. It is scalable and mobile friendly.
  • Don’t confuse the HTML <em> element with the CSS em measure specification. The HTML <em> element emphasizes text, the CSS em specification adjust font sizes.

ADJUSTING FONT SIZE WITH KEYWORDS:
An easy and quickly way of adjusting font size is with keywords. We can specify font size with the following keywords: xx-small, x-small, small, medium, large, x-large, and xx-large.
According to your browser settings, each keyword will be converted into pixels. Generally, the small keyword is converted around 12px. From there, each keyword declaration is about 20% larger than the preceding size.
Let’s specify our footer paragraph text using the x-small keyword:

.footer p {
	font-size: x-small;
}

Preview in browser without any font-size property declared:
font-size using keywords - without

Preview in browser with the font-size property declared using the x-small keyword:
font-size using keywords

NOTE: Keywords are NOT always converted the same way in every browser or computer.

FINAL TIPS:

  • Remember not to add a space between number and symbol (Good: 10%, Bad: 10 %).
  • Negative font size values are not permitted.
  • Specify the font-size for the body and then fix the font-size of other elements accordingly.

Here is an excellent resource that shows approximately the conversion from points to pixels, ems, and percentages:

POINTS PIXELS  EMS PERCENT
 6pt  8px  0.5em  50%
 7pt  9px  0.55em  55%
 7.5 pt  10px  0.625em  62.5%
 8pt  11px  0.7em  70%
 9pt  12px  0.75em  75%
 10pt  13px  0.8em  80%
 10.5pt  14px  0.875em  87.5%
 11pt  15px  0.95em  95%
 12pt  16px  1em  100%
 13pt  17px  1.05em  105%
 13.5pt  18px 1.125em  112.5%
 14pt  19px  1.2em  120%
 14.5pt  20px  1.25em  125%
 15pt  21px  1.3em  130%
 16pt  22px  1.4em  140%
 17pt  23px  1.45em  145%
 18pt  24px  1.5em  150%
 20pt  26px  1.6em  160%
 22pt  29px  1.8em  180%
 24pt  32px  2em  200%
 26pt  35px  2.2em  220%
 27pt  36px  2.25em  225%
 28pt  37px  2.3em  230%
 29pt  38px  2.35em  235%
 30pt  40px  2.45em  245%
 32pt  42px  2.55em  255%
 34pt  45px  2.75em  275%
 36pt  48px  3em  300%


This table was generated by REEDDESIGN (www.reeddesign.co.uk).

Now you know the different ways of specifying font sizes, which one are you going to use?

Download Source Files

The post How to Specify Font Sizes in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/how-to-specify-font-sizes-in-css/feed/ 0
Adding a Background Image in CSS with the background-image Property http://cssatoms.com/basic/adding-a-background-image-in-css-with-the-background-image-property/ http://cssatoms.com/basic/adding-a-background-image-in-css-with-the-background-image-property/#comments Wed, 04 May 2011 10:03:04 +0000 http://cssatoms.com/basic/adding-a-background-image-in-css-with-the-background-image-property/ With the help of CSS, we can place any background image using the background-image property.  Let’s learn some facts about this awesome and useful property: The background-image property can set […]

The post Adding a Background Image in CSS with the background-image Property appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
With the help of CSS, we can place any background image using the background-image property.

 Let’s learn some facts about this awesome and useful property:

  • The background-image property can set the background of any element specified in your HTML page.
  • Use the background-image property only to place background images, not to place images in your content.
  • The reason why the background property exists is to make elements look better.
  • Images specified with the background-property are set to a URL. The URL can be a relative path or a website link (http://…).
  • By default, images specified with the background-image property are positioned in the top of your browser window.
  • By default, images specified with the background-image property are repeated. To fix that, we have a background-repeat property available.
  • This property is supported in all main browsers.

Now that you know more about the background-image property let’s learn how to use it:

STEP ONE:

Create a HTML page, name it “index” and add any element. For example, I added a class for a footer and I included a paragraph tag inside of it.

<div class="
    Visit <a href="http://cssatoms.com/" title="www.cssatoms.com" target="_blank">www.cssatoms.com</a> for more CSS tutorials.</p>
<!-- end .footer --></div>

STEP TWO:

Next, I would like to improve the attractiveness of the footer class I created by adding a nice image for its background.
Inside the folder where your index.html page was saved, create a New Folder and name it “images”. There we are going to save our background image.
Go ahead and create a New CSS and link it to you HTML page.
Look for any image you would like to set as the background image of your HTML element and save it for web inside the “images” folder.
Step Two A
Preview of my footer-background image:
Step Two B

STEP THREE:

Now, you just need to specify your image inside your CSS.

.footer {
                background-image: url(images/FooterBg.jpg);
                background-repeat: repeat-x;
                height: 101px;
                padding-top: 30px;
                padding-right: 0;
                padding-left: 0;
                text-align: center;
                color: #666;
}

Preview in browser:
Step Three
As you can see, I added the background-image property along with the background-repeat property. Here is an explanation of the properties that I added:

  • background-image: the URL was set to a relative path. There we declared where our image is located.
  • background-repeat: the repeat-x specification makes our image repeat horizontally. If you prefer to repeat your image vertically choose the repeat-y specification.
  • height: I declared the height of my image, so now the height of my div class is set.
  • padding properties: It defined the space between the paragraph tag and the div.
  • text-align and color properties: they stylized the content inside the footer.

That’s all about the background-image property. Now, you know how to decorate your elements with background images. Have fun!

Download Source Files

The post Adding a Background Image in CSS with the background-image Property appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/adding-a-background-image-in-css-with-the-background-image-property/feed/ 0
Styling Borders with CSS Border-Style Property http://cssatoms.com/basic/styling-borders-with-css-border-style-property/ http://cssatoms.com/basic/styling-borders-with-css-border-style-property/#comments Tue, 03 May 2011 10:02:59 +0000 http://cssatoms.com/basic/styling-borders-with-css-border-style-property/ To go beyond the simple, default web pages, we need to learn how to add style to our content. To do that, we need to create a Cascading Style Sheet […]

The post Styling Borders with CSS Border-Style Property appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>

To go beyond the simple, default web pages, we need to learn how to add style to our content. To do that, we need to create a Cascading Style Sheet and add some properties to our content. One common property is the Border-Style. The Border-Style property consists of nine border styles that allow us to change the visual style of any box. This property is simple to use. Getting to know it will help you to create more designed web pages. Let’s take a look at all the different ways we can style our boxes’ borders:

  • NONE:
    border-style: none;
    Is the default property. No border is displayed.
  • DOTTED:
    border-style: dotted;
    A sequence of dots is displayed:
  • DASHED:
    border-style: dashed;
    A sequence of short lines form the border:
    dashed
  • SOLID:
    border-style: solid;
    A single line segment round the border. The “original” border:
    solid
  • DOUBLE:
    border-style: double;
    Two solid line segments form the border:
    double
  • GROOVE:
    border-style: groove;
    Looks like an indentation:
    groove
  • RIDGE:
    border-style: ridge;
    A raised border effect:
    ridge
  • INSET:
    border-style: inset;

    An insertion drops into the box:
    inset
  • OUTSET:
    border-style: outset;

    An inception of the border rises from the box:
    outset

IMPORTANT FACTS:

  • To specify the visual style of a border use the border-style property.
  • The default style is: None. To display a border the property needs to be set.
  • Borders are added on top of the box’s background; so, make sure to add padding.
  • The following styles require a border-color property: Groove, Ridge, Inset, and Outset.
  • The border-style property can be set to style the entire border, or just the top, right, bottom or left side of the box. Consequently, it can have from one to four values.
  • This property is NOT inherited.
  • This property is supported in the majority of browsers. Firefox (1), Internet Explorer (4, 5, and 6) – earlier versions require inline elements to be absolute positioned, Mozilla (1), Netscape (6 and 7), and Opera (3, 4, 5, 6, 7, and 8).
  • Shorthand version of the “border-style” property is “border”.

Now you can go beyond the simple, default Web pages. Add a special touch to your design using the border-style property.

Download Source Files

The post Styling Borders with CSS Border-Style Property appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/styling-borders-with-css-border-style-property/feed/ 0
All You Want to Know About CSS Static Positioning http://cssatoms.com/basic/all-you-want-to-know-about-css-static-positioning/ http://cssatoms.com/basic/all-you-want-to-know-about-css-static-positioning/#comments Mon, 02 May 2011 10:02:58 +0000 http://cssatoms.com/basic/all-you-want-to-know-about-css-static-positioning/ CSS Position Property is the method that web designers use when they want to place any element on their page. This property has four different types of positioning: Absolute, Fixed, […]

The post All You Want to Know About CSS Static Positioning appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
CSS Position Property is the method that web designers use when they want to place any element on their page. This property has four different types of positioning: Absolute, Fixed, Relative, and Static. In this tutorial we are going to learn all about Static Positioning. All the elements by default are Static Positioned. When an element is static, it ignores any placement declarations. By default, Static Positioning place elements relative to the sides of the page.

The other three types of positioning will be explained on other tutorials.

NOTE: This tutorial was completed using XHTML 1.0 Transitional with CSS. It is assumed you have basic knowledge of HTML and CSS principles.

STEP ONE:

I created a XHTML document with different <div>s tags: One for the header, one for a container that includes a <div> for the content, and one for the footer.

Let’s have a look at the initial HTML setup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Relative Positioning</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>

<div class="header">
<!-- end .header --></div>

<div class="container">

<div class="content">

<!-- end .content --></div>

<!-- end .container --></div>

<div class="footer">
<!-- end .footer --></div>

</body>

</html>

Also, I added a Cascading Styling Sheet to it. Download the source files to obtain the entire code for this tutorial.

STEP TWO:

Let’s add an image into our content <div>. Wait! We don’t want our image to be part of the content. Easy! Let’s create a <div> for it.

<div class="content">
    
    <div id="CheckMark">
    <img src="images/CheckMark.gif" width="39" height="36" alt="Check Mark" />
<!-- end #CheckMark --></div>

    <!-- end .content --></div>

Why a <div>?  A <div > outlines a separation in an HTML page. It also makes the process of styling elements with CSS easier.

STEP THREE:

Notice that our image was directly positioned at the left side of our page (traditional layout).
We don’t need a CSS rule to specify Static Positioning. If we add top, bottom, left, right declarations, they will be ignored.

STEP FOUR:

Debug in your favorite browser the HTML page. You’ll see your image is right where we put it. If we don’t change its position to Absolute, Fixed, or Relative, the element is not going to move. Therefore, it will be always positioned according to the layout of the page.

STEP FIVE:

To conclude, let’s learn some facts about Static Positioning:

  • There is no need to declare Static Positioning.
  • Static Positioning is the default behavior for any element.
  • Unless you apply an Absolute, Fixed, or Relative declaration, elements will appear in the order they occur in the HTML markup.
  • It avoids top, bottom, left, right placement declarations.

That’s all! You learned how Static Positioning is initially declared.

Download Source Files

The post All You Want to Know About CSS Static Positioning appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/all-you-want-to-know-about-css-static-positioning/feed/ 0