HTML CSS American Flag

This article describes how I created an American Flag using HTML and CSS.  This demonstration confirms that detailed images can be created by only using HTML and CSS.

Creating an American Flag using CSS and HTML

The CSS code is used to set pixel widths and color for the HTML elements. There are only three tags used to create the flag, one tag for each of the three colors.   The three tags are <a>, <b> and <span>.  The flag is mostly correct in that it has 50 stars and 13 stripes, seven of which are in the same rows as the blue star field. The rows of stars are also correctly staggered in alternating rosw of 6 and 5 stars each.  Any incorrectnes would most likely be a matter of size proportions of the starts in relation to the stripes

Click here to view the HTML CSS American Flag

Additional Tags required for Cross Browser Compatibility

In order to get both Internet Explorer and Firefox to display the flag correctly a few additional commands had to be incorporated into the flags code.  A non breaking blank space (&nbsp;) was required to be inside of each of the tags in order for the flag to appear when using Firefox, Internet Explorer would display the flag without the additional character.  The CSS line-height and display:inline-block commands were required to make firefox display the elements as intended.  Additionally a transitional doctype tag was employed to force the American flag to display similarly in the different browsers.

This is primarily intended to be an example of what can be done with CSS - It is true that by using this technique a variety of artistic and appealing web images could be created pixel by pixel, however it is unlikely to be used since other easier methods of image creation are readily available.