CSS 3 vs Flash

It has been 17 years since Flash was introduced. It has caused a major change when it comes to the way that videos are viewed online and how animation is created. A lot of development has happened since then. CSS3 has been introduced and it has brought in many innovations.

CSS 3 vs Flash

There is a lot of comparisons going on around the Web today. People are comparing what Flash can do with what HTML5 can achieve and sometimes CSS3. So which is the better way for a creating a website? The answer isn’t really that simple.

What Flash Can Do

With Flash designers and web developers have achieved a degree of freedom that they could not achieve through any other method. With flash a designer can place any object that he wants on a page without having to worry about details. You just place it on the page and then move on to the next task.

That kind of advantage might not sound much to someone unfamiliar with web development and CSS or HTML. But for people who know that is a huge advantage. By using Flash, you don’t have to worry about programming languages. The page would load in the same way with any browser that is being used. So there is nothing to worry about compatibility and browser support as well.

The Advantage of Interactivity

You can also achieve a greater interactivity when you are using Flash. You can incorporate audio files on your page and other tricks on it. You can also put in videos directly on it which would be hard to achieve through other methods.

Higher Degree of Control

You also get a higher degree of control when you are using Flash. The whole page would be adjusted according to the browser that is being used so images do not changed or get pixilated. Here are some of the other advantages that you can get with Flash:

    • Improved Integration
    • Easier Font Handling
    • Replicate Frames
    • Stand-Alone Movies
    • No Reload

 

Problems with Using Flash

Though it sounds like Flash has so many benefits to it, it does have some disadvantages. The biggest problem with it is the issue with the plug-in. A separate plug-in would have to be downloaded and installed to playback Flash movies. Another issue is with search engines. Search engine spiders cannot crawl over Flash content so you might still want HTML content on your site for the sake of ranking.

Where CSS3 Comes In

The trend on the internet today is to put content and design in two separate compartments. That is where CSS3 comes in. With Flash, the content is incorporated into the design of the page. It is possible to achieve some visually stunning effects with CSS3. For example, animations are now possible with it. The problem of course is that it can be cumbersome and complicated to create a site based on HTML and CSS. You would have to deal with programming language and that is never an easy thing.

CSS 3 vs HTML 5

Both HTML5 and CSS3 still have a lot of limitations. But even though there are many things that are holding those two languages back, the fact remains that they are the future of web design and learning them is a must for anyone who is serious about crafting and creating excellent web pages. These two languages can let you do a lot of things that you could not achieve with other languages before.

CSS 3 vs HTML 5

You don’t really have to choose between using HTML5 and CSS3. The best thing that you can do is to use those two languages hand in hand. You would be able to create great looking websites. In some instances they are even better than Flash.

A Closer Look at HTML5

Compared with Flash, HTML5 is a lot more complicated and intricate, but learning it is a must if you are seeking to develop websites that would be friendly to iOS. Flash is not allowed on the iOS which is a severe limitation to it.

The main thing that you have to realize about HTML5 is that it isn’t one large body but rather made up of many small parts. Some browsers might not support certain features and parts. That is why it is necessary for a designer to know what feature is supported by which browser. A good thing about HTML5 is that it allows you to build on existing HTML4.

That means if you are updating a site, all you have to do is to introduce the changes in order to improve the site. You don’t have to start from scratch again.

Features of HTML

Here are some of the more important features of HTML5

    • A HTML syntax would have to have a doctype. What’s good to hear is that the doctype declaration is now a lot simpler: . That is how you would write it.
    • The sound and video support for HTML5 is greatly improved from previous versions. There is no need for plug-ins in order to view content on video and audio sites.
    • The editing of the content of websites has also been made simpler.
    • You can use web applications even if you are offline. This is because of the introduction of the application cache.

 

Why Use HTML5

Web pages would load a lot quicker when you are using HTML5. It is also simpler to use it when you have mobile devices in mind. You can easily incorporate video and audio into the code.

A Closer Look at CSS3

Now it’s time to take a look at CSS3. Cascading style sheet is used in order to make a page more visually stunning. The latest version of it, the CSS3 is a major step forward.

New and Cool Effects

There are plenty of new effects and properties that came along with CSS3 that would make web designing really exciting. You can use shadows, fonts and images in order to make a page more striking in appearance.

Those are just some of the things that you should know about HTML5 and CSS3.

CSS3 & Browser Support

CSS3 is a major development when it comes to web design and creation. There are some impressive innovations with it, but it is severely handicapped by one serious problem. That problem is the issue of CSS3 & browser support.

The Question of Browser Support

Most web designers today would tell you that their ultimate dream would be to create websites fully with the use of HTML5 and CSS3. They can do so right now but only to find out later on that some of the more important properties are not supported by some browsers. One of the biggest culprits of course is the wide spread use of various versions of the Internet Explorer which does not support the language.

But technology is making progress now. Even though it is taking time and doing it ever so slowly, the universal use of CSS3 is soon to become a reality.

Internet Explorer Issues

The biggest browser problem that you would encounter with CSS3 is in connection with IE or to be particular, older versions of Internet Explorer. IE6, IE7 and IE8 are the biggest headaches when it comes to browser support for CSS3. There are very few properties of CSS3 that would be supported by these versions of IE.

    • Less commonly used properties of CSS3 like writing-mode.
    • While opacity is not really supported, there are non-standard ways that you can use it.
    • There are transform properties that you can also utilize for IE.
    • Linear gradients
    • The word-wrap property is supported.

 

That’s about it. Those are the only real properties of CSS3 that can be supported in IE6, IE7 and IE8. There are non-standard ways that other properties can be utilized but since those are not really the ways to utilize those, using those alternative methods could be complicated and troublesome. It could also cause some maintenance problems for the site if you are not careful.

What Modern Browsers Support

For the sake of simplicity everything IE9, Firefox 3.5 and everything else that came after those would be considered as modern. We have here some of the features of CSS3 that are supported by these browsers:

      • media queries
      • border-radius
      • transforms
      • box-shadow
      • RGBA Colors
      • HSLA Colors
      • multiple backgrounds
      • background-clip
      • background-origin
      • background-size
      • box-sizing

 

What’s Supported by Safari, Chrome and Firefox?

There are different properties that would be supported by Safari, Chrome and Firefox which are three major browsers in use today.

        • FlexBox
        • Resizing
        • Multiple Columns
        • Gradients

 

Based on this list alone, you could see that the features of CSS3 that can be supported by the major browsers in use are limited. That places a severe handicap what you can use CSS3 for.

What You Can Do

If you don’t mind the lack of support when it comes to the older versions of IE, you can go ahead and use CSS3 in creating a website. But you have to be aware about which features of it would be supported by certain browsers and which would be not.

Problems with CSS 3

Though it is largely seen as a huge leap forward, there are still many problems with CSS 3. If you have used it before then you are probably aware of what those issues are. Let’s take a look at some of the problems that are plaguing its use today.

A Little Historical Background First

CSS first came out in 1996. Its original intention was to help in managing the style of HTML elements used on a page. That was it. That was its main purpose, but as time went by, however, that purpose was set aside and it was given a different role. It was never intended to be used in laying out a page. That was the task reserved for the HTML. The way to place graphics on Web pages back then was to cut up the images and place them on tables on the page.

Back then CSS was not used for controlling or changing the visual appearance of the whole page. It can change the appearance of the HTML elements since it can alter fonts and colors but that was it. Back then the only one property that could be used for changing of the page and that was the float-property.

Not the Original Intention

The fact is that most of the things that we use CSS or its current version CSS3 were not part of the original intention of its makers, way back in 1996. Its role has just evolved as Web designers started to use it. CSS was supposed to change specific elements on a page. It was told what to change and what change to achieve and it would do so, but that seriously limits what it can do.

It Is No Longer Enough

The biggest limitation with CSS3 is that it can only be applied to elements that have semantic meanings. It severely limits the way that one can use design. Unfortunately, that is not enough these days because web design requires a lot more now. It is not enough that you can paint a page with a particular color, but you have to create an actual shape.

Here are some limitations when it comes to CSS3:

    • A designer might want to do something that has no semantic connection to it.
    • Designs are purely dependent on the limitations with CSS.
    • Separating content and presentation cannot be done.

 

The Question of Support and Compatibility

The biggest problem that designers face when it comes to using CSS3 is its compatibility and its support from browsers. That is a major consideration when you are using it to design web pages. Some properties are totally not supported by certain browsers and that limits its use. In order for these properties to be used you would have to put in prefixes on the code. That adds complications to its use.

While CSS3 is a huge leap forward when it comes to web design, its creators could do a lot better in coming up with a newer version that is not bogged down by the same problems.

CSS Mouse Cursor

Cascading Style Sheets or CSS allow you to define the unique style of your webpage through different attributes and selectors. With CSS, you may alter the fonts, place borders, and even make a basic web page layout of your own. There are many ways you can customize with CSS, including layouts, text colors, background colors, and so on. Another unique feature of CSS customization is that you can change the look of your cursors and mouse pointers on your webpage.

Changing Your Site’s Cursor with CSS

CSS features a style property, cursor, which lets you change what the cursor on your web page looks like. In an ordinary web page, as you point your mouse pointer over any standard text, you will see one cursor that is normally an I-beam. And when the mouse pointer goes over a link, another pointer appears, usually a hand. If you do not want to use those, you can definitely change them.

Using the Cursor Style Property

You will find a number of different styles of cursors to use. However, if you do not know what they look like exactly or how they will work in different browsers, it will be difficult to use them. For instance, if you want to use CSS to change the cursor on your web page, you would write:

<a href="" style="cursor: progress;">cursor: progress;</a>

Different Cursors to Choose from:

  • crosshair
    Display a simple crosshair, which looks like a +-sign.
  • default
    Display the platform-dependant default cursor, which is usually an arrow.
  • pointer
    Display a pointer which specifies a link.
  • move
    Display a cursor indicating that something has to be moved.
  • e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
    Display a cursor that indicates an edge that should be moved.
  • text
    Display a cursor for any standard text to be selected, usually an I-beam.
  • wait
    Display a wait cursor, which is typically an hourglass.
  • help
    Display a help cursor that is normally with a question mark or balloon.
  • progress
    Display a progress indicator symbolized by a spinning ball or hourglass.
  • inherit
    The element must have an identical cursor setting as the parent.

Importance of Changing Your Cursor

It can be useful to actually change the cursor on your web page. First of all, varying cursors will tell people whether something is clickable or not clickable. In addition, it can make your web applications more functional, like when you have a drag-and-drop in a move cursor.

Understanding CSS Units

One important part of learning CSS is to understand the units used in it. Only when you have some grasp of the units used in it would you be able to create the pages as you really want them to look. We will be discussing here some of the more basic questions when it comes to CSS units.

CSS Units

Here are some basic information that you should have when it comes to CSS units:

Length Values

The values of length are normally made with the use of plus or minus signs before the abbreviation of the unit used. Keep in mind that putting in spaces between the characters of the unit is not valid. 1.2em is valid while 1.2 em is not. When the value is 0 there is no need to write the abbreviations. There are two types of unit that can be used. The first one is the relative and the second one is the absolute.

Relative units are usually preferred because they would be able to adjust a lot better. Here are some examples of relative units:

em- This is the height of the font of the element.- p {letter-spacing: 7em;}

ex- This refers to the height of the letter x. To be more specific, that would be the lower case letter x

the font used in the element. – p {font-size: 24pt; line-height: 3ex;}

px- This refers to pixels.- p {padding: 25px;}

Absolute units on the other hand are less dependent on the kind of output medium that is used. These units are fixed. Here are some examples:

in- This means inches. p {word-spacing: .15in;}

cm- Gives out a measurement in centimeters. div {margin-bottom: 2cm;}

mm- This is a measurement in millimeters p {word-spacing: 25mm;}

pt- This refers to a point. One point is equivalent to 1/72 inches. body {font-size: 18pt;}

pc- This refers to a pica. One pica is equivalent to 12 points. p {font-size: 20pc;}

Color Units

Color can be specified with the use of RGB colors. There are four ways of stating it.

#rrggbb (e.g., #00cc00)

#rgb (e.g., #0c0)

rgb(x,x,x)

rgb(y%,y%,y%)

Those four codes actually refer to the same color. It all means the same.

Denoting URL

URLs can also be defined in CSS. It is usually denoted by the actual URL followed by the keyword. The URL can also be quoted or a white space could be placed right before, but those are optional ways.

Percentage Units

In CSS the percentage units are denoted by the plus or the minus sign, which is then followed by the number and then the percent sign. There should be no spaces in between the values. Keep in mind that percentage values are going to be relative to other values. Usually it depends on the font size of the element. Here is a sample code for a percentage unit:

p {font-size: 16pt; line-height: 121%;}

These are just some of the basic things that you need to learn about CSS units and how you define them.

CSS Web Safe Fonts

The CSS font properties are used in order to define the different attributes of the fonts used on a page. Here are some of the attributes that it works on:

  • Family
  • Boldness
  • Size
  • Style

CSS Font Family Names

There are two types of font family names in CSS. The first one is the generic. This refers to fonts that have a similar look or appearance. One example is Sans. The second type is the font family. A good example of this would Arial. Serif fonts are characterized by short lines at the ends of each line of the letter. Sans-serif is characterized by the absence of these lines, the word sans actually means without. Monospace characters are characterized by having the same width as the others.

CSS Web Safe Fonts

The font to be used on a document is determined with the use of the font family property. In practice, this property holds several font types in reserve which will then be utilized should the first font that was chosen is actually not compatible. If the font that you have chosen has more than one word to it you have to add quotation marks to it. Here is an example code that you can use:

p{font-family:”Times New Roman”, Times, serif}

The Font Style

There are other values that you can change when it comes to the font style property. These are the following:

  • Normal- The text would appear as normal.
  • Italic- The text would be italicized.
  • Oblique- This is similar to being italicized.

Here are sample codes for all three values of this property:

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

Font Size Property

Using this property, you should be able to change the sizes of the text so that it would fit your needs. The ability to change the sizes of fonts is crucial when it comes to designing websites. It is important to remember that when you are designing websites, you should not use the font size in order to distinguish the heading from the paragraph. There are two ways of designating the font size value. It can either be absolute size or relative size.

Absolute size means that the size of the font is fixed to a known value. This is known when the output is fixed. Relative size means that the size of the font would depend on the elements around it. The user is able to change the font size.

Here is how you can set the font size using pixels:

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

Using em for Setting Font Sizes

Some experts recommend that users go for em instead of pixels in setting the sizes of the font by pixels. The default size of em is at 16 pixels. Here are some sample codes for setting the font size by em:

h1 {font-size:2.5em;} /* 40px/16=2.5em */

h2 {font-size:1.875em;} /* 30px/16=1.875em */

p {font-size:0.875em;} /* 14px/16=0.875em */

These are just some of the things that you should learn when setting the sizes of fonts.

CSS Attribute Selectors

There are patterns in CSS which can be used in order to determine the rules that would apply to documents and certain parts of a document. These patterns are known as selectors and it is very important to learn about them when it comes to CSS.

A few years ago, the use of CSS attribute selectors was not so common. That was caused by the fact that Internet Explorer 6 did not support it at all. Through the years however the dominance of IE has been eroded and newer browsers have been introduced. Now CSS attribute selectors is becoming more common.

The CSS Attribute Selectors

Attribute selectors are identified by the use of brackets. In its simplest form that you would encounter, an attribute selector is just an attribute name which has brackets on both sides. Here is an example:

[href] {

⋮ declarations

}

 

This could be used for any type of element that uses a href attribute. Attribute selectors could also be used for singling out values.

Case Sensitivity

The values that you would find on an attribute selector are case sensitive, if the language of the markup is also case sensitive. XHTML is case sensitive. It is important that you should keep this in mind or you might get confused.

The Default Attributes

Attribute selectors can only be used when it matches the values and the attributes that can be found on the document tree.

Defining Attribute Selector

There are four major ways that you would be able to define an attribute selector.

[attribute] – This is used if an element has a certain attribute. Here is a sample code using this method to identify an attribute selector:

a[title] {

color : blue ;

}

 

[attribute=value] – This is used if the attribute has a certain value to it. Here is a sample code for that:

a[href=http://webdesign.about.com/] {

font-weight : bold ;

}

 

[attribute~=value] – This is used if the element has attributes with items that are separated by spaces which will be compatible with the value. Here is a sample code for this:

a[rel~=”help”] { color : #00f; } – In this sample all of the elements a with help in it would be given a blue color.

[att|=val] – This is used for an element which uses attributes that are separated by hyphen. Here is a sample code that you can use: </p>

a[lang|=”en”] {color : #00f; } – In this code all elements that uses lang attribute would get the designated color.

These are just some of the things that you should learn about CSS Attribute Selectors. Knowing more about this feature of CSS would allow you to use it a lot more efficiently and make the making of a document faster and more efficient, especially when you are working on several pages that are very common with each other. It is one of the reasons why it is such a powerful tool on the Web today. Learning more about it would save you a great deal of time and trouble.

Learning the Basics of Applying CSS

One of the most important lessons that you would learn about CSS is how to use and apply it. This article will attempt to explain how you can use it. Though the article might be a short explanation, this should be a start for introducing you on how to use CSS.

Applying CSS: The Basics

The first thing that you have to know in using CSS is that there are three ways that you can insert the sheet. These are the following:

    • There is the internal style sheet.
    • There is the external style sheet.
    • Then there is the inline style.

 

The External Style Sheet

The external style sheet is perfect when you are going to use it for multiple pages. With this kind of style you will be able to alter the look of an entire website by just making changes to one file. In order for that feature to work, you must link all of the pages to the style sheet. You can achieve this effect with the use of this tag: . That tag should placed on the top section of the document. Here is a sample code for that:

<head>

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

</head>

An external style sheet can be created in any text editor. You should not include any HTML tags in it because you should save it using an extension that is solely meant for CSS.

Internal Style Sheet

This style is best used when a certain page should have a particular style to it or when it has to be different and distinct. You need to use the tag

<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style>

</head>

Inline Styles

There’s not much benefit when you use inline style. In fact it would be better if you are going to use this style as seldom as you can. You need to place the attribute of the style on the portion where you want it. Here is an example of a code that uses the inline style for a sheet:

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

 

You can use this style with any kind of property for the CSS. In the code that we have given, the left margin and the color are being changed.

Using Multiple Style Sheets

Selectors might be given different properties on different pages. When that happens the most detailed and specific and detailed ones would be applied and take precedence over the others.

Now you might be wondering as to what style would be used when there are multiple styles specified? There are certain rules that will be followed. These are the rules:

  • The default of the browser
  • External style sheet
  • Internal style sheet
  • Inline style

The last one, the inline style would have the highest priority in the list. That means it would override all the other styles on a page if there are multiple styles placed on it.

CSS Media Types

One of the most important features that you can get out of CSS is the fact that you would be able to specify and dictate how a document would appear in different forms. This means that a document created in CSS would have specs on how it would appear as a paper document, on a computer screen and even in Braille.

The CSS Media Types

There are certain CSS properties that would only be applicable for certain kinds of media. One example of that is the ‘page-break-before’. This property can only be used on paged media. There are instances however that a property can be used for various media, but in order for that to happen, certain values would have to be present. A good example is the property that changes the size of the font. This can be used for most of the available media.

Fonts would have to be bigger in a document than the one used on the computer screen. This is where CSS can really come in handy. Values can be added so that it would conform depending on the kind of media being utilized.

Specifying Media Dependencies

There are two ways that you can specify what media would be used for a certain style sheet. This is the first method:

You can specify the media type by using the the @media or @import at-rules. Here is an example code that you can use:

@import url("fancyfonts.css") screen;

@media print {

/* style sheet for print goes here */

}

The second way is to set the needed medium using the document language itself. Here is an example code for that:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<HTML>

<HEAD>

<TITLE>Link to a target medium</TITLE>

<LINK REL="stylesheet" TYPE="text/css"

MEDIA="print, handheld" HREF="foo.css">

</HEAD>

<BODY>

<p>The body...</p>

</BODY>

</HTML>

The Recognized Types of Media

These are the names of various media that are currently recognized:

all- This means that it would be compatible with all compatible media.

braille- This is used for tactile devices that are mostly for use by the blind.

handheld- This refers to devices that are small, mobile and normally would have limited bandwidth.

print- This is used on documents that are supposed to be printed and for those that will be viewed using the “print view” mode.

projection- This is intended for being projected. The most common example of this are documents that are to be viewed on projectors.

screen- This is meant for documents to be viewed on computer screens.

speech- This is meant to be used with speech synthesizers.

tty- This is meant to be used for devices that have limited display capabilities. One good example of such a device is the teletype.

tv- This is meant for television like devices.

These are just some of the things that you need to learn when it comes to the different media types that can be used for CSS. As you can see, there are more than a few media types that you can work with when it comes to CSS.