Posts

Showing posts from January, 2013

CSS Sprites | What are They?

Image
CSS Sprites most web developers should have heard this term, so what is it ?.
CSS Sprite bunch of other images transformed into one Big Image. The origin of the term "sprites" comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images.

Adding Sprites to our websites helps with webpage performance, since the webpage has to make only one request to the server, which will fetch the Sprite (the Big image) which includes all the other images that you want to use in your webpage. since the server makes only one request your page will load a lot faster compared to conventional way of linking each images separately.

Here is a demo on how to use CSS Sprites. further more there a many Sprite generators online to create CSS Sprites all you have to do is upload a bunch of images to these Online tools a…

HTML5 Semantic Tags | What do they mean

HTML markup has changed a lot especially when the WHATWG introduced semantic tags.  
Semantic Tags? What do they mean. The Semantic Markup helps Humans and Machines to Interpret the HTML markup in a more meaningful way. Which helps the HTML markup to be structured in a more meaningful way. remember adding semantic tags to your HTML5 markup wont change the apperance of your page, but it Gives more meaning to your Markup.  
Here is a list of few HTML5 semantic tags.

<section>  </section><article>  </article><header>    </header><nav>          </nav><aside>      </aside><footer>    </footer>As you see above the above tags wont make our web pages pretty but it gives more meaning to the markup.

How CSS3 Works

CSS works with HTML, but it’s not HTML. It’s a different language altogether. While HTML provides structure to a document by organizing information into headers, paragraphs, bulleted lists, and so on, CSS works hand-in-hand with the web browser to make HTML look good. For example, you might use HTML to turn a phrase into a top-level heading, indicating that it introduces the content on the rest of the page. However, you’d use CSS to format that heading with, say, big and bold red type and position it 50 pixels from the left edge of the window. In CSS, that text formatting comprises a style—a rule describing the appearance of a particular portion of a web page. A style sheet is a set of these styles. You can also create styles specifically for working with images. For instance, a style can align an image along the right edge of a web page, surround the image with a colorful border, and place a 50-pixel margin between the image and the surrounding text. Once you’ve created a style, you…