CSS style sheets are the industry standard for customizing the look of websites, pages, blogs, communities and more. We have looked at why they are useful and how they basically work. Now we need to learn some of the basic calls we need to truly make our sites sing. So what follows are the calls made within a style sheet to affect differing sections of the page’s layouts.

Starting with background properties.

{
background:
}

this allows you to set background properties.

Background colour can be added either way through colour name or the hex numbers. **TIPS: 1 You can easily find hex color codes by using the color sampling box in your favorite graphics editor. 2 You can use only 3 digit codes in the repeating hex codes, meaning ffffff=fff cc99ff = c9f and so forth *** You can also use the word transparent to create a transparent background layer.

background-color:white;
background-color:#ffffff;
background-color:#fff;

Add a background image through this call:

background-image:url(‘paper.gif’);

Do remember your folders in the call though. Think of the urls and that can help, like if my style sheet is at http://mydomain.com/style.css and my image is at http://mydomain.com/image.jpg then the call would be exactly like above. But, if my image is at say http://mydomain.com/images/image.jpg then the call should read “images/paper.gif instead in the above call.

Do you want that back ground image to repeat? Then you need to add a repeat call such as this:

background-repeat:repeat-y;

your repeat options are as follows:

repeat         The background image will be repeated both vertically and horizontally.
repeat-x     The background image will be repeated only horizontally
repeat-y     The background image will be repeated only vertically
no-repeat     The background-image will not be repeated

The no repeat is used mainly when you don’t want to totally remove the coding option but do not want the image at this point to repeat.

Next we move onto the fonts, beginning with the main font call:

{
font:
}

First you can call a font family. Font families can be called by specific names like arial or by style like sans serif. If a font name contains white-space, it must be quoted. You may start with a specific font but always end with a generic family, allowing the browser to pick a similar font in the generic family, if no other fonts are available. Remember to separate each value with a comma.

font-family:”Times New Roman”,Georgia,Serif;

You can also control your font sizes for differing areas or attributes such as headers.

The basic font size calls are as follows:

xx-small     Sets the font-size to an xx-small size
x-small     Sets the font-size to an extra small size
small         Sets the font-size to a small size
medium         Sets the font-size to a medium size
large         Sets the font-size to a large size
x-large     Sets the font-size to an extra large size
xx-large     Sets the font-size to an xx-large size
length         Sets the font-size to a fixed size in px, cm, etc.

font:size-small;
font:size-100px;

Margins are used to control the spacing within areas. Here we list the main call and example calls.

{
margin:
}

To have a top margin of 10px, a right margin of 5px, a bottom margin of 15px and a left margin of 20px use this:    margin:10px 5px 15px 20px;

To have a top margin of 10px, a right margin of 5px, and a bottom margin of 15px use this:
margin:10px 5px 15px;

To have a top margin of 10px, and a right margin of 5px use this:
margin:10px 5px;

To have a margin of 10px all around simply use this:
margin:10px;

Padding would be the much same as margins only you use the word padding instead of margin.

These are the main calls you will use in creating and customizing any style sheet. Through understanding these basic calls you will able to work with any existing style sheet and customize it to your own designs. In fact that is what we will be looking at next customizing existing theme style sheets, templates and images to help you quickly adapt existing themes to your personal style.

CSS is the way most sites control their look. You have already witnessed the power of CSS through the site CSSZenGarden at : http://www.csszengarden.com/ . Now we look at how to create a basic css style sheet. Once again we will suggest the wonderful teach site at http://www.w3schools.com/css/default.asp to help you along as well. They have areas there to try out different calls and see the results.

Firstly, CSS style sheets are always called style.css. They are always a plain text file. So they can be opened, edited and saved with just a plain text editor, no need for a full graphics program. Understanding the basic parts of a CSS style sheet will make it easier to play around with and customize the style sheets that come with themes for websites, blogs and more online.

At it’s most basic the following is a full CSS style sheet.

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:”Times New Roman”;
font-size:20px;
}

It is formatting the pages by giving them a background colour. Next it sets up a colour and alignment for all the headers on the page. Finally it set up a font family and size for the text that appears on the page. Well done you now have a CSS Style sheet.

Now that you have a style sheet how do you use it? There are three way to insert a CSS style sheet into a site or web page.

External Style Sheet
Internal Style Sheet
Inline Style

Using any of these methods will cause the browser to pull all the styling elements for your pages from the style sheet indicated. The first thing to know is the ranking of these sheets, meaning which sheet overrides which. Highest priority is given to the inline style which will override any other style sheet’s commands. Next is the internal followed by the external and last would be the browser’s default style sheet. This is important to know so that you can control small sections of a specific page on a whole site if needed through inline or internal style sheets, while the rest of the site continues to follow the main external style sheet.

First let us look at the external style sheet which is most often used. This is most commonly used because it is ideal when used to apply a style to multiple pages. Also by using an external style sheet, you can change the look of an entire web site by changing only one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section like this:

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. You also need to avoid leaving leave spaces between the property value and the units, “margin-left:20 px” instead of “margin-left:20px” will work in IE, but not in Firefox or Opera.

Next we look at internal style sheets are used for single document styling. Say one page of your website needs to be different from the rest of the site then this one solution. The internal style sheet is contained within the head section of the page’s html using the <style> tag, like this:

<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>

Inline styles are given the highest priority but they are also the most diluted form of style sheets. You want to use them sparingly. Simply by using the style attribute in the relevant tag you create an inline style. The style attribute can contain any CSS property. For example this inline style changes the color and the left margin of a paragraph:

<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>

So summing up the basics of CSS style sheets, using them can help you create easily customized pages and sites with a single page to edit. You can override the main external style sheet with internal or inline calls or even by calling a different style sheet in that page’s head section. The style sheet is there to style your pages it only effects how things are presented not the actual content in and of itself. By learning how to work with style sheets and customize them you will open the door to creativity in your web designing.

Next time we will look at the basic calls for CSS sheets, to help you further understand and utilize this powerful web designing tool.

CSS stands for Cascading Style Sheet. It has quickly become the preferred method of styling websites of all forms. CSS is all about the style and not the content itself. CSS popularity stems from it’s ease when styling the layout and look of multiple pages. Simply changing the CSS file means the changes appear across all the pages instantly, instead of changing each pages code individually.

This file is usually named as style.css and is generally a plain text file. You can use it in regular web page design and it is common that blog and CMS (content management system)themes will use a style.css file. Using a bit of HTML knowledge it is easy to customize CSS files through small modifications like colour and image changes.

To truly appreciate the power of CSS I highly recommend you visit the CSSZenGarden at : http://www.csszengarden.com/ . This is a page where by clicking on the links in the sidebar you change the page entirely by changing it’s CSS file. The content remains the same just the layout and style are changed each time. The possibilities are mind boggling. Like RetroTheater where the content scrolls across the big screen or LilyPond which is almost like a mini online newsletter. It seems the only true limits in CSS are those of one’s own imagination and coding skills.

The best place to learn more about coding in CSS is at the W3C (World Wide Web Consortium). http://www.w3schools.com/css/default.asp  Though you should have a good understanding of basic HTML and it’s calls before trying to learn CSS. Invaluable for customizing existing WORKING css files is the reference section under the CSS area found here http://www.w3schools.com/css/css_reference.asp . It can help you find the call you you need for changing a background colour or a header image. We will work more with such calls and css later on when we work on customizing blog themes.

When you strip a web page down to its minimum basic functions, it becomes obvious just how easy it is to get started building your own pages. The smallest possible page only needs 3 wrappers, and the contents for them:

* 1 HTML wrapper
* 2 Head Section Wrapper
* 3 Body Section Wrapper

The HTML wrapper is where the page tells the browser what type of coding it will be processing.
The contents for the Head section wrapper are the instructions for how you want the page to display.
The contents of the Body section wrapper are what you want people to see on the page.

In HTML Tags, it looks like this; in fact, to create a page all you need is is the following code saved as an html file:

<HTML>
<head>
<Title>My Page Name</Title>
</head>
<body>
<p>Content of my web page here.</p>
</body>
</HTML>

Using the above example in either a text editor or a page making program, you can change the Title to what your page is to be called. This will appear in the very top bar of the browser when people visit your page, and as the name of the link if someone saves the page as a favorite. You can also change the Content here to actually say something you want on the page, for instance if this is your first site you might want to make a little under construction / coming soon sort of statement. Then save it as either html or htm file. *note your index should always be an html or shtml never an htm file.

Once saved, just upload the file to your website, making careful note of the file name. Shorter the better, try to avoid underscores and other marks in file names. Then to see your page simply open a browser and type in the address as http://yourdomain.com/page.html using your actual domain and the actual file name. Congrats! you have created your first web page. Nothing fancy but it is a working web page.

Web Pages themselves are made up of Containers and Tags. Containers are the Wrappers that tell the browser how to process a given part of the page, in other words it tells the browser to do such-and-such to everything wrapped within the start and end of this instruction set. The Tags, which can also be Wrappers, tell the browser what to put there.

For instance, in this line:
<p>Content of my web page here.</p>

you are opening a Paragraph container:

<p>

Putting in the Content:

Content of my web page here.

Then closing the Paragraph container:

</p>

The big trick here is, if you open a Container (or Wrapper), you must close it before you do anything outside that Container. So when you open the HEAD section, you must close it before you open the Body section. When you open a Paragraph Container in the Body section, you must close it before opening another Paragraph container. You can open anything inside of anything, but you must close it before you close whatever it was opened inside of. Following that simple rule will make your web page very portable; it will work in almost any browser, on any computer, using any operating system.

Password protected areas give a stronger sense of security to those using that area as well as protecting your contents. It allows only members to see and participate in areas of your site. It protects buyers when making purchases. It keeps content away from prying eyes while allowing others to see what you are working on. It can even be an additional way to track just who is looking at what on your site.

There are as many ways to password key your site as there are reasons for doing so. It is highly recommended for areas you want to limit access to on your site, such as a client only area for a licensing site, a boards area for a paid membership group, and the folder(s) that down-loadable items are held in.

Start with using the robots.txt file in your sites root folder. This will help head off bots and spiders from cataloging areas the public should not know about. Learn more about robots.txt files here : http://geek2me.net/?p=140

The simplest way to password protect an area online is to use your server side admin panel and password protect the folder. Usually this simply involves clicking on the folder under the password protect area and adding in the name/password combinations you wish to use. Doing it this way does mean you will be adding the log-in combos for those who will be allowed into those areas by hand. However, this can still be advantageous. For example a licensing artist passwords protects her image catalog. She goes to a major licensing show and has pre-made stickers with name/password combinations she created before leaving home. She can place one sticker on her business card and the other on the contact’s card to whom the combo was assigned. So now only those truly interested in licensing from her will see the new offered designs. BUT, using her site’s stats she can she can tell which potential client visited the site when, how often and which pages they looked at. All that information and tracking can be found while keeping the images safe from poaching.

Another way to password protect is through the use of .htaccess files. This is a very secure way of working things but if you do not know what you are doing you can lock yourself out of your own site. Quite a few programs, such as boardware, blogware, cartware and galleries will use .htaccess files to protect folders and information. Be sure to really understand .htaccess files before fooling with them. The .htaccess way involves two text files one for the password combos one for the call to protect the area. The tricky bit is that the password combos MUST be encrypted.

There are scripts you can use which don’t work server side. Meaning the information is not dependent and held in your server where the site is. Be aware these will not be as secure as those that are done server side.

Your password protection will only ever be as good as the passwords used. If your users sign up with weak passwords and get hacked it is not always the fault of your system. Make sure to use passwords that incorporate numbers and symbols as well as letters. Vary your passwords so if someone does crack one they don’t have access to everything you use a password with. Never give out your passwords or leave them out in the open, even at home.

Also though it may sound silly never use passwords that use your name, the name of the site, or any words identified with the site (such as the site logo phrase) as part of the password. Some of the scripts folks use to brute force break passwords start by using everything on the non-password protected pages of the site. You should use a minimum of 6 to eight characters as a your password length.Vary the string with letters both upper and lower case, numbers, and special characters. Even a truly random string of five characters or less can be broken by scripts that are out there and run fairly quickly on modern computers. Quickly being days or weeks rather than the years 5 characters gave you even 5 years ago; a bit longer is a bit better.

So again simply be aware of what you as passwords, don’t share them with anyone or leave them out in open spaces. If you ever think your password might have been compromised see about changing it. It is better to be safe and change it than lose anything important or allow a hacker greater access to your other accounts or parts of the site.
Online as in life protecting yourself can be as simple as being aware and taking the basic precautions. So be prepared and be safe both on your own sites and on others.