CSS Tutorial

Style sheets separate presentation and content for web designs. The style is defined in an external style sheet file using style sheet language such as CSS.

Tips in testing your CSS layout

CSS layouts can be tested with the use of several software or applications. Opera can show the exact window dimensions in its title line, adjust window size on it to various sizes, and overlay the other browsers on that window for comparison. You can also test the URL in the IE Netrender’s web application.

How CSS style sheets work

A style sheet should be thought of as a set of instructions that suggests to a web browser how to draw a page. It is a series of instructions called statements which identifies the elements in an HTML document that it affects and it tells the browser how to draw these elements. Elements include paragraphs, links, and list items among others. Each statement has a declaration which tells a browser how an element should be drawn and it may contain any number of properties.

In creating style sheets, all key elements should be present. Each statement should have a declaration, telling how elements are to be drawn with their specific properties.

Cascading style sheets (CSS) is a style sheet language used to describe the look and formatting of a document written in markup language. It is most commonly applied to style web sites in HTML and XHTML. It enables separation of document content from presentation elements like layout, colors, and fonts.

Tips when creating a CSS layout

The most difficult thing in creating a CSS layout is getting it right. First, you must clear out the default padding and margin settings before you start. To center a layout, use a container div to contain all your content. Work from the top down by starting from the topmost elements in your design. Document what you are doing in case someday it needs debugging. Making comments inside your CSS file will help explain why you are doing things in a specific way. Choose a browser on which you are going to build your CSS and test from the start.

What to avoid when doing a CSS layout

A common mistake in making CSS layouts is browser incompatibility. This can be avoided by testing it from the start. You should also account for smaller browser resolutions. Your viewers may have a wide range of resolution. Avoid thinking that everyone else has the same sized monitor as you do. Mistakes such as not validating HTML, not considering frameworks, or not utilizing generic classes should be avoided. Also, using mammoth background images should be avoided.

Before creating a CSS layout, you should make sure to check for details like browser compatibility and to document your work. It would be time consuming to start all over again if every step is not well thought of.

Designing your own website will allow you to have full control about the appearance of your site. However, you will need the help of CSS tutorials to help do this.

Benefits of designing CSS layouts from scratch

If you do not use CSS frameworks, you have the complete freedom when it comes to building and laying out your website. This guarantees that your site is unique from anyone else’s and you get to express your personality with your very own site design.

Benefits of online CSS tutorials and guides

CSS is pretty easy to do with the right amount of time and with the help of online CSS tutorials. Even those with no degrees in coding can learn how to design a site in a matter of hours.

Choosing an online CSS tutorial

There are a lot of online CSS tutorials for you to choose from. The good thing is that there are tutorials for virtually any type of learner, and you can browse tutorials designed for beginners, intermediate learners, and experts. Most users choose CSS tutorial sites that are easy to understand. Youtube videos of step-by-step CSS tutorials are also available on various sites.

Adding captions to web images is easy. You have the option of using CSS to add photos or go directly to sites that allow you to put captions with your photos with ease. Most photo editing software will allow you to put captions below your photos as soon as you are done editing them.

Stylish and easy to read CSS

You can use CSS to add captions to your photos that you post on your webpage or website. CSS allows you to add captions to images without having to use tables, but still look professionally done.

SEO-friendly style sheets

SEO-friendly style sheets are good if you want to make your website visible to Google and other browsers. Using CSS in your style sheets instead of pure HTML and Javascript will ensure that even if glitches occur and the style sheet is removed, the drop down menus in your website will only be converted to pure links.

Tips in adding image captions on your cascading style sheets

You can add captions to your images in any way you want, from making transparent captions to wrapping captions around the picture. Always remember to include width dimensions and always use the exact dimensions of your image.

Online networking of friends is a very popular Internet fad. Teenagers and even adults from all over the world use such cool websites to build a network of their friends, while also making known to other people their personal wacky profiles. MySpace and Friendster are among the most widely used customized online networking sites. If you have an account in Friendster, you are probably aware that you can apply new design techniques to your profile in different customizing options, using CSS.

As I go through my network of friends in my Friendster account, I noticed that almost all my friends used CSS codes to change their profile layouts. They included pictures, backgrounds, sounds, and cool effects. Now, there are several tricks for those who do not know where to place their CSS codes to customize their Friendster accounts. First you need to open your account, then from Home, go the the Edit Profile. You can select the customize tab, then you can now put your CSS codes on the second text fields.

One trick that you can do to customize your Friendster profile is to apply colors to your scrollbar. When you search for CSS codes via the Internet, you will be able to choose the colors you want, generate the codes, then copy the codes to your edit Friendster profile. In case you have friends who are also tech-savvy and are into personalizing their profiles, you can contact them via Friendster. You can ask for advice or ask what codes they used in their respective profiles. I'm sure they'll provide you with helpful codes.

< - start of code - >

/ Friendster-Tweakers.com Scrollbar Color CSS Generator /
body { scrollbar-face-color: #ffffff; scrollbar-highlight-color: #ff00cc; scrollbar-shadow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #ffffff; scrollbar-track-color: #ffffff; scrollbar-darkshadow-color: #ffffff; }

< - end of sample - >

The pages of most internet sites these days have all sorts of good interactive features and functions, not to mention about a ton of visually appealing graphics and styles. With such improvements on the pages of most internet sites, web developers and designers are pushing the limits when it comes to their internet site designing ventures. They have discovered that through CSS, you can easily customize the actual HTML tags on the pages of your internet site! Now doesn't that totally unleash the power of CSS as a tool for fully customizing the pages of your internet site?

The customizability of the pages of most internet sites rely heavily on CSS design techniques and tactics. With proper CSS coding, you could even create your own set of actual HTML tags. These tags affect the actual layout of the pages of your internet site, and fully customizing it would evidently increase the visual appeal of your internet site! That is, based on your own preferences when it comes to visual appeal and all. The next thing would be for you to develop your creativity.

CSS HTML tag customizing has been a long practiced technique of web developers and designers knowledgeable in CSS tactics. With CSS design patterns properly done on the pages of your internet site, it would improve the overall usability and visual layout of your internet site. For instance, adjusting the HTML tags used for lists and bullets with CSS tag customizing techniques would provide you with fully customized bullets, not to mention full control on the actual white spacing between the list elements.

Web developers and designers have recognized the fact that with CSS, basic tables, and table forms on the pages of internet sites are fast becoming obsolete. With this, web developers and designers who are knowledgeable in the field of CSS designing make use of CSS being integrated on basic table and table form layout. This is because the advent of modern internet connections resulted in more people gaining access to the information on the pages of the internet sites posted on the world wide web. This evidently resulted in a commotion of sorts between developers and designers trying to make a notch with the design and development of their internet sites. Well, proper layout of the functions in the table forms on the pages of your internet site would evidently lead to more traffic since more people can easily access the information found on the tables and the table forms of your internet site.

With this, I have given the CSS codes below so as to provide you with the know-how on how to use proper table layout techniques with the use of CSS for those table forms. It is fairly easy to do, and would provide your internet site's viewers with easier access to the functions located on the table forms of your internet site. Plus, CSS provides easier navigation functions through the table forms on the pages of your internet site as well, thus making your internet site's viewers' browsing experiences more efficient.

< - start of code - >

div.row {
clear: both;
padding-top: 10px;
}

div.row span.label {
float: left;
width: 100px;
text-align: right;
}

div.row span.formw {
float: right;
width: 335px;
text-align: left;
}

< - end of sample - >

The codes above make use of the float function instead of table form layouting functions. This would result in more organized functions and features on the table forms of your internet site. Try it out on the pages of your internet site and see how your viewers respond, as well as how the traffic on your internet site starts to grow. In addition, see how your internet site increases ranking on the top search engines of the world wide web!

CSS has been used to promote accessibility and customizability to the pages on internet sites, as well as to add more visual appeal to it. The development of faster internet connections resulted more and more internet sites to use CSS in the design of the pages on various internet sites. But, due to internet site browser inconsistencies, tables are still being used instead of CSS style sheets. I thought CSS would bring about tables being totally obsolete in the world of the world wide web. Guess I was wrong.

Yet you could still make use of CSS even when you have tables already on the coding of the pages of your internet site. This would eventually lead you to save more time in designing and developing the pages on your internet site. The trick here is to integrate style sheets on your website even when tables are present. The codes below show how the new method of using CSS with the tables on the pages of your internet site is done. Customize the codes below to integrate CSS repetitions on it so as to save you time in designing and developing your internet site tables.

< - start of code - >

<STYLE>
BODY {font-family:verdana; color:blue}
</STYLE>

< - end of sample - >

Well, the CSS codes above simply state that you would not repeat the font specifications that you have on the tables or the entire content of your internet site. With these CSS codes, all you have to do is declare a font specification for all the tables and the contents on your internet site. Now doesn't this save you more time in the design and development of the pages on your internet site?

Fast internet connections brought about access to information, or misinformation, available on the world wide web. Thus, continued development work on the internet requires web developers and designers to create web pages that have certain alternatives to work on any internet site browser. But, more often than not, the issues of design of the pages against compatibility with any browser are not addressed just in the nick of time. It takes quite a long time for the web publishers to notice such design mistakes before the necessary adjustments are made.

Thus, I believe web designers and developers that are knowledgeable in the field of CSS are the ones who could make the necessary adjustments in the design of the internet sites that are not compatible to run on any internet site browser. A good example would be the problems the necessary box model design some internet sites have when using Internet Explorer 6 or its prior versions to navigate and browse through each internet site. With CSS, an alternative to the necessary box model design could be made to provide access to the viewers who use Internet Explorer 6 and its prior versions in navigating through the pages. I have given the codes below, and it's up to you to compare the CSS codes with the set of codes that you have on the pages of your internet site. This must be done to know whether your internet site is compatible with the Internet Explorer browser and its prior versions. Well, many people still use relatively old versions of the Microsoft Internet Explorer because the latest version is still not available! Plus, most people prefer to always use this browser over the other browsers that are available.

< - start of code - >

#box
{
width: 150px;
}

#box div
{
border: 5px;
padding: 20px;
}

< - end of sample - >

So, with this set of CSS codes, the HTML of the internet site would then be as the codes below.

< - start of code - >

<div id="box"><div>...</div></div>

< - end of sample - >

No, digital information technology has nothing to do with make-up. Neither does the internet have a new innovation when it comes to fashion. It just contains information on the latest fashion trends, cosmetic breakthroughs, etc. What I'm talking about here are styled pages of websites that have drop shadows on them. Just like what XP did to its graphical user interface. That's right, and this is to make the icons, buttons, whathaveyous, etc. to look 3-dimensional. Same thing with Mac OSX's graphical user interface.

These pages contain CSS codes that are fairly easy to understand. Professional web developers often use this feature to design graphical sites. Most sites that are related to visual artistry or products and services that pertain to the visual arts usually have CSS integrated on the design and development of the pages on the site. Below are the codes for drop shadows, and please do try it out on your website so as to provide your viewers visual stimulation as well as clear information.

< - start of code - >

<div class="img-shadow">
<img src="cat.jpg" alt="test"/>
</div>

< - end of sample - >

Pretty simple now, isn't it? Prepare first an image with a drop shadow. One thing here to do is get a good photo editor, as well as a good visual artist, for the job. Than, all you have to do in designing the pages of your website to have drop shadows is include the codes above. Enjoy how the images of your website's drop shadows adjust with the movements of your site. This does not even include yet the compatibility pages (with CSS drop shadows) have on most internet browsers.

In creating a simple bar graph, you would be needing knowledge on web development languages that are fairly easy to grasp. But, mind you, creativity is a key factor in building websites. So I suggest you hire the services of a professional web developer just in case you are lacking this quality. Website development requires patience more than creativity, too. But making the pages of your website accessible and interactive require two web development languages, namely CSS and JavaScript. How come HTML is out of the picture? No, it isn't, for HTML is still the fundamental building block of a website, and the main foundation of a good web designer as well.

So, the codes below makes use of two web development languages that make it easy for web developers to create fully customizable and accessible websites. Now, interactivity wouldn't be a question either, but take not that the codes below do not contain JavaScript codes. If you guessed that I used CSS together with HTML, then you're absolutely right. These set of codes are for bar graphs, specifically for utilizing the percentage width abilities of CSS to accurately portray a percentage bar graph. With this, an affordable solution for most website publishers emerges.

< - start of code - >

<style>
.graph {
position: relative; / IE is dumb /
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }
</style>
<div class="graph">
<strong class="bar" style="width: 24%;">24%</strong>
</div>

< - end of sample - >

Yes, the codes below are just what you need to make mobile viewing of your website compatible, thus accessible. 'Cause if you provide viewers the access to view the pages of your website using either a mobile phone, a PDA, or any handheld device, your website is bound to have traffic and a search engine ranking that would rival those websites of giant multinational corporations. But, you got this all absolutely free, and them? Why, they paid for it, my brother!

So, if you want your website's viewers to enjoy themselves while navigating through the pages of your website, then consider entertaining them. How? Then make use of the advances of digital communication technologies. Which? Read on, brother, and you will be enlightened on the field of modern communications and information technology, and thus have not just a glimpse of the future of online entertainment, but a plan on how to be among the first to offer such a mobile entertainment system on your website!

You see, there are mobile viewing accessibility issues, and the design and development of your website requires CSS and JavaScript knowledge so as to come up with websites that are accessible and usable to mobile viewing. Entertainment integrated on your website addresses more mobile viewing accessibility issues. Flash games on the pages of your website are inaccessible to mobile viewing, thus Flash is not an option unless they do something with either the handheld device, or on Flash programming. But, integrating on your website online text-based games provide you with another option, and a very good one at that! What's even better is for the online text-based game to be a role playing strategy type of game. By carefully studying the codes above, you would gain the necessary information on how to create web pages that are accessible and usable to mobile viewing by using both CSS and JavaScript. Thus, integrating on your website an online text-based game with the use of CSS, JavaScript, and the guide codes I have given above assure you of mobile gaming entertainment that is innovative, accessible, and, more importantly, fun!

CSS is used by most web designers to customize the style of websites because it offers high customizability, apart from being fairly easy to understand than most web development kits in the market. Plus, it is a tool for creating accessible and usable pages, thus efficient websites in your name! However, XSL has been the long-standing rival of CSS, and yet more people, specially web designers and developers, choose CSS over XSL.

That is because CSS is easier to use, customize, and CSS, with the right knowledge on the codes, creates both accessible and usable web pages. XSL, on the other hand, has undergone a lot of changes after a year's stint in the limelight - no, it is not a high-tech electronic gizmo you often see with those unusual model names, but rather, it's a web design development programming language, much like CSS. But, XSL is often used in graphical websites, in which the tool of choice in creating graphical content in web pages is, of course, Flash.

The mutation of the old XSL, called XSLT, is used by many server sites, while XSL-FO, the configuration portion of XSL, is continuing to make a mark in the printing industry. With this, it is up to you to decide which is better to use in designing websites, and you have to keep in mind that if you're a newbie in web designing, it would be much better if you first learn basic HTML. This way, you'll have a formidable foundation to work on.

So you want to have a well-rounded personality, and want it to reflect on your website as well, hmm? I'm talking about smoothing the sharp edges of those boxes you have on the pages of your website. But this time, using CSS, and not a single digital image, to curve those edges a bit would be my topic.

It is nearly impossible to curve the edges of those boxes that are found on the pages of websites by just using pure HTML codes, but there is another alternative besides using CSS -using a digital image, usually taken from a still shot of a digital video camera. But the sample code below has no embedded image in sight. How'd I do that - just concentrate on the subject matter, my friend!

< - sample code - >

<div class="bl">Lorem ipsum dolor sit amet consectetur adipisicing elit</div>

<div class="bl"><div class="br">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div>

< - end of sample code - >

CSS rounding makes use of this code. The alternative is to use digital images so as to save you frustration on cracking the concept of how this code does something you can't do with HTML codes! So go prove to the world how much you have learned yourself, and go round those boxes on the pages of your website!

A calendar created using CSS is basically a tabular data sheet in the form of, yes, the table element. Websites with this have the advantage of a smarter looking calendar display, as well as a simple yet professional looking one. Plus, such a calendar display is known for its compatibility with most, if not all, web browsers, apart from being as accessible as what the W3C requires websites to be.

By using the table element with CSS codes, your calendar should be displayed in a more ordered manner, not like those without CSS codes. Next thing up would be designing the digital image to use so as for your calendar display to look as interesting as it is neat and smart-looking. Afterwards, there's nothing left for you to do than loop the image, save it in .gif format, then use the classic CSS and HTML codes for this type of object.

In creating and editing the .gif images you're going to use as a calendar display background or foreground, it would be wise for you to use a good photo editor. Adobe Photoshop, any version, is a pretty formidable photo editing application, and it would make exactly what you want your digital images to look. You just have to know a few simple codes, and minor photo editing skills, then you're off to creating calendar displays each with different CSS styles!

There are certain issues regarding the accessibility of websites on the internet. Thus, when uploading a website on the internet, it would be beneficial for you, every web designer and developer, and every internet user to conform or follow the guidelines set by the W3C regarding the accessibility of the websites posted on the internet. CSS do just the trick - it provides accessible web documents.

CSS are becoming very popular these days. This is because of the customizable layout formatting it provides web designers and developers. Plus, it also makes the web pages on your websites more accessible, faster to load, and easier to navigate through. Any element on your website can possibly be a CSS1 selector. CSS also allow the same element to have different styles. This is because simple selectors could have unique classes.

Thus, as an example, I would provide below the codes in case the need for a different color pertaining to each language on a web page of a website arises. These are needed to improve the page appearance. Also, you will see in the example codes below that it has created both a CSS and an HTML class to use on a code element of an HTML:

<! - sample HTML code - !>

{ color: #191970 }

<! - end sample - !>


<! - sample CSS code - !>

{ color: #4b0082 }

<! - end sample - !>

The margin defines the space around the elements. They are almost identical to CSS Paddings in attributes, the difference between the two is that the margin defines the space around the element's border while the padding defines the space within the border. Since they are nearly the same, the procedure in manipulating the margin is the same as the padding. There are various ways to define the attribute of the CSS margin.

You can use either whole numbers or percentage in defining your margin. Just like in CSS padding, defining only one value will result in uniformity among all sides of the margin. For example, you only defined the value of the top margin, the other sides will carry over the value of the top margin as their own. An HTML element has four different margins: right, top, left and bottom. You can individually define the margins by adding the direction as suffix to the attribute: margin-(direction). If you define only one attribute, the other three will remain untouched.

All the margins can be declared at once by specifying two or four values. When you specify 2 values, the first will define the top and bottom and the second will define the left and the right. When 4 values are specified, the corresponding direction moves clockwise. Here's a sample code for defining margins:

<! - Code Sample - !>

<html>
<head>
<style>

p { margin-left: 45px; border: 1px solid black; }
h2 { margin-top: 80px; border: 1px solid black; }
ul { margin: 25px; border: 1px solid black; }

</style>
</head>
<body>
<h2>CSS Margins</h2>
<p>Space for the paragpraph</p>
<ul>
<li>You can use margins to create white spaces</li>

</ul>
</body>
</html>

<! - End Sample - !>

ne of the most fun attributes you can work on the CSS is the borders, it's like playing a game. They have a palpable and immediate impact on the design of your page, unlike margins and paddings. This attribute permits you to manipulate and design the borders surrounding an HTLM element. Before, it was impossible to modify and even create a border surrounding an element; HTML only allowed it for tables. Using CSS, you may create borders that you can have personally designed with only little effort involved.

There are many kinds of border styles that you can use. You can experiment with the color/border combinations to see which one you think would look most appealing for your web page. You can utilize the border-width attribute to modify the thickness or width of your border. You can use either exact values or default key terms like: thin, medium, and thick.

Now the most fun you could have in CSS Borders is the border colors which will touch your creative side. You can use the border-color attribute to customize the color of the borders. There are three ways to define the color: RGB values, Hexadecimal codes, and color names. You may also put a border on just a single side of the HTML element using the border-direction attribute. CSS treats one side of the border independent from the remaining three so each can be different from the others. Here's a sample of an element with modified borders:

<! - Code Sample - !>

<html>
<head>
<style>

h2 { border-bottom: 3px solid red; }
p { border: 1px solid black; }
table { border: 8px outset green; }
td { border: 3px dotted green; }

</style>
</head>
<body>
<h2>CSS Borders</h2>
<p>Black border for this paragraph.</p>
<table>
<tr><td>This table has dotted</td></tr>
<tr><td>borders for</td></tr>
<tr><td>each cell</td></tr>
</table>
</body>
</html>

<! - End Sample - !>

Knowing how the page contents are positioned can help you produce CSS layouts more effectively. In Cascading Style Sheet, there are three positioning schemes: Normal, Float, and Absolute. Each has its own set of features, of course. Boxes are positioned using one of the three modes or schemes but some boxes will use a different scheme depending on its style setting.

The Normal flow is the default scheme in positioning. This means that if you did not specify the type of positioning scheme your box will have, it will be set in normal flow. In this mode, the flow of the boxes are vertical, starting from the top and each proceeding block is placed below. The flow of the inline boxes is horizontal, from left to right. The vertical margins in the normal flow is collapsed, instead of adding the bottom margin of the box and the top margine of the box below it, the larger of the two is used.

When the position of the box is set for float, the box is positioned vertically just like in normal flow. However, horizontally it is shifted as far to the right or the left as possible. The inline content is allowed to float around. In absolute positioning, boxes are removed and will have no effect on boxes in the flow. The position of the absolute position element is determined by its values: top, right, bottom, and left.

The padding is defined as the amount of space between the element's content and the border. There are four properties in an element's padding: the padding-top, padding-bottom, padding-left, and padding-right. It is used to design the appearance of the presentation of the content of your web site.

Between one to four values are given to the padding, each value represents either length or percentage. The percentage value is the width of the parent element. Only positive values are accepted, so negative values are useless. It is actually possible to define the values of individual paddings by adding some direction suffixes to the attribute - padding-top. If for example, only two or three values are given -- the side with the missing value will take its opposite side's value. If one direction only is defined, this leaves all the other sides untouched.

If four values are given, then each website property of the padding is affected respectively. It is also possible to determine the values of the four sides by only declaring two values. In using 2 values, the first will define the bottom and the top, the second will actually define the left and the right. When specifying the values of the four sides, remember that the direction moves in a clockwise manner: top, right, bottom, left.