CSS Tutorials

Cascading Style Sheets are something every webmaster should learn to utilize, however it can be complicated to code manually. However, CSS is not hard to learn and with the Dreamweaver point and click tools, it is easier than ever. Whether you are new or an expert when it comes to CSS, the built in Dreamweaver CSS tools can help you out a lot. Dreamweaver Templates save you time when doing website design.

 

This tutorial is made for the person who owns Dreamweaver, is curious about cascading style sheets and wants to learn how to put it to use.

 

There are three (3) Types Of CSS: Internal, external, or an inline css style sheet.

 

To create an external style sheet with Dreamweaver, simple click ‘New’ and under ‘Basic Page’ choose ‘CSS’.

 

This will give you a blank style sheet.

 

The next thing you want to do is experiment and create one or two CSS definitions.

 

You might create a CSS definition called ‘background’ and make the color red.

 

You then save the CSS style sheet as something like ’samples.css’.

 

Next, you would open an html file in the same folder that has some text in it and you attach the external style sheet.

 

You attach the sheet by selecting the ‘Text’ dropdown menu and choosing ‘CSS Styles’ then ‘Attach Style Sheet’.

 

Once you have attached an external style sheet to a webpage, you can make changes to the external style sheet and change the content page. This is especially important if you have a website with multiple web pages.

 

The concept is, that by attaching an external style sheet to all of your web pages, you can update many web pages instantaneously by changing the one CSS style sheet that is attached to them.

 

In this manner, a large corporate website with 20,000 pages could be updated with new colors and fonts in less than 15 seconds! Simply by changing the one external CSS style sheet.

 

So you see how useful CSS style sheets can be.

 

To get started, simply go into your HTML code after you have attached an external CSS sheet to your page in Dreamweaver. You can take any tag like a tag and start typing in a CSS class.

 

For example, if you start adding a css class to any of these tags, Dreamweaver will start to auto-complete it for you and you can choose which class you want to add from a dropdown menu.

 

You can also use this to style page backgrounds, table backgrounds, fonts, and much more! You only have to learn the fundamentals of CSS and then experiment with Dreamweaver and I promise you’ll be capable of using CSS with Dreamweaver in a matter of a few hours.

CSS style sheets have made it easier to handle web pages during web development. CSS or Cascading Style Sheets as the name suggests is a style sheet that allows you to easily link to other documents in your website. It allows you to retain control over the various elements in different web pages of your website.

CSS only defines the structure and content presentation of a website. It has nothing to do with the design of a website. A single CSS sheet can control the font, positioning, color and style information of an entire website.

What are the advantages of using cascading style sheets?

·         Web pages are easier to load and they use less bandwidth

CSS style sheets are preferred by web developers for website development because they are lighter than table layouts, which consumes lots of bandwidth. The style sheet is downloaded only once and stored in the cache memory, so subsequent pages load faster.

·         A CSS style sheet compliments well with HTML

HTML is insufficient when used independently in website development, but when combined with CSS they can result in technically stronger web pages.

·         CSS allows you to position your element anywhere in the webpage

Web developers love to use CSS because it allows them to position their element where ever they want in the web page. If during any phase of web development the developer feels that particular links or columns are not going well with the situation then it becomes easier for them to position them easily using CSS. CSS reduces the risks associated with maintenance of the website.

·         CSS is compatible with all web browsers

CSS is combined with HTML or XHTML by web developers for web application development because it is compatible with all web browsers. The sites that use CSS appear similar in all the web browsers.

 ·         CSS can be used to create print friendly web pages

Most of the web developers love to use CSS for building their HTML based web applications because they allow them to create print friendly web pages. These web pages can be easily printed. The colors, images and other things, which are difficult to be printed, can be eliminated and printed easily.

·         CSS style sheets allows the user to customize the webpage

Now days many websites allow the user to change the layout of the website without affecting the content. The CSS style sheets, which are stored externally, allow the user to make requisite changes by themselves. Most of the modern browsers give user the liberty to define their own style sheets like changing some font properties etc.

·         CSS style sheets makes it easier for your website to feature in search engines

Web developers favour the CSS style sheets because they allow them to position their elements as per their wish anywhere in web application. Positioning helps to project the main contents first, so that web spiders easily capture it. CSS also gives cleaner HTML codes thus cutting down the job of web spider to search the real content from junk code.

·         CSS allows the web pages to have absolute consistency

One of the reasons for using CSS during web development is that they allow consistency to all web pages. All the expressions and texts will get their characteristics from external style sheet. Web developers need not to worry about the change in characteristics of the elements because they can be easily altered at any stage of web development by using CSS.

·         CSS lends portability to content

By using CSS you can make separate style sheets for different media. This provides you the great flexibility in presenting your content. CSS allows you to redefine the characteristics of elements in a website to suit the need of the situation. For e.g.: A separate style sheet will allow you to redefine the characteristics of certain elements so that they are easier to be printed. Also the user will never come to know that you had restructured the characteristics for their benefit.

CSS is created to make the things easier for your website and also to give you control over different elements in your website. Utilizing benefits of CSS will give you popular user-friendly web pages.

If you have a mypsace profile, but you are not satisfied with it because it is generic looking, you have the possibility to modify the default layout. MySpace layouts and backgrounds can be customized with a simple trick, by adding hidden HTML code to your profile. If have some knowledge of CSS and HTML, you can try different background pictures and colors. However, if desinging with HTML and CSS is too much for you, you can always use one of the numerous MySpace customizing tools that you can find on the web, and which make it quite easy to customize your layout. If you use any of the major search engines to look for MySpace layouts or MySpace backgrounds, you’ll find thousands of websites that can help you with your problem.

The offer of mysapce layouts is huge. However,  it can be quite confusing  to find the place for the CSS code in order to make your area look just the way you want it. Fortunately, there are websites that provide assistance in doing that. Your profile can be customized with some of the many MySpace layouts or MySpace backgrounds.

Basically, it’s like this: when you have found something you like in MySpace layouts, all you have to do is to click “Preview It” and you will be shown a live preview. If you decide to go with that one, just get the MySpace layout codes. Then, you have to paste the code into your MySpace profile, in your “About Me” section. Should you find any MySpace layouts that are not working, you are requested to send an email to that everything can be restored.

The MySpace alyouts fall into so many categories that your choice is most likely going to be a tough one. You can choose from abstract, animal ,Asian, sports, games, celebrity, Christmas, cartoons,  fashion, flowers, nature, retro, stars, stripes, and many, many more. There are MySpace layouts for guys and for girls. You can choose from the brands of MySpace layouts. If you like, you have a choice of sexy MySpace lyaouts such as Playboy. Should any of these categories appeal to you, you still have the possibility to choose from the uncategorized MySpace layouts.

The choice for MySpace Backgrounds is not as varied, but if you take into consideration the fact that you can use any of those images together with MySpace backgrounds, there are tons of possibilities. So customize your prfiles with MySpace layotus and backgrounds!