Your First $1000 online (2014)

Chapter 7: CSS

“Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter.”- Eric S. Raymond

While HTML texts are used to depict information that can be interpreted by the web browser, Cascade Style Sheets are used in order to style web pages and interfaces and to describe how the webpage must be presented, too.

Think of it as you would of a designer who designs clothes and decides what clothes his models should wear or how they must look when they’re walking on the ramp at a fashion show.

The purpose of the CSS was to create a style sheet language that would be used solely to function the web page. Separating a web page’s content from its presentation is advantageous to web page developers who can use the style sheet to make the content accessible. Furthermore, one need not use HTML tables for the web page layout.

Initially, web page developers who had to specify the color of the header on a web page, would have to use the following HTML element:

Designing a web page using such elements was very time consuming, expensive and inefficient. The usage of style sheets made it easier to maintain webpages and to keep the presentation consistent. Since style sheets are stored in the web browser’s cache they can be used again and again and there’s no need to reload it. Hence, data transfer becomes is faster and more efficient, too.

Now, the same can be done by using the following style property:

Integrating CSS with HTML also enables web page developers to use GIFs, JPEG and PNG files to embed animations too.

CSS Transitions

This is relevant to anyone looking to design an app, too. What the Cascade Style Sheet does is that it allows you to manipulate animations. Consequentially, it would be a lot easier for you to change the size of the animation. Also, rather than doing so immediately, you can review how these animations would look by reviewing these in their intermediate states, too.

You can determine when the animation would start, how long the CSS transition will last and how it would run, too. All you need to do is to adjust the delay, duration and timing properties.

Web page developers assign values to different properties. As you learn to do this you would see that by setting, changing or assigning different values to these properties you are actually describing the behavior of the web page. So, by changing the value of the Transition-duration you are describing how long it should take for the transition to take place.

You might be wondering how this applies to someone who isn’t interested in making web pages. You see, style sheets aren’t only used to describe the behavior of the web page- these can also be used to make video games, cartoons and such like.

Think about it: you can only play a video game if you can play with characters and objects on a screen. The style sheet is used to describe these animations to bring these characters and objects to‘life’.

Seeing as how you would be learning to make such certain games in other chapters, it is important that you know of the basics of CSS and CSS transitions.

CSS Animations

There are only some properties that are animatable and can be manipulated by the style sheet and this chapter will only discuss those properties that are applicable to the game you will learn to make.

Here are some of the properties you can control with CSS:

Transition-property: the name(s) of the property or properties that need to be transitioned are specified. Here are examples of such content: border style, border width, background-color, height and width.

However, as soon as changes are made to these properties, all other properties will change instantaneously, too.

Transition-duration: you can specify the amount of time in which you would like for one property to transition. If you would like to apply different durations to each property this can be done, too.

Transition-timing-function: this allows you to specify a function so you can control how the intermediate values for these properties need to be computed. In other words, this controls the rate at which the transition needs to take place. You can manipulate the transition by using the cubic-bezier option. You need to assign a value to the X and Y axis. Ease, linear and step-end are examples of timing functions.

Transition-delay: this property enables you to determine how long one would have to wait for the transition to take place.

Detecting When A Transition Is Complete

Once the transition is complete, standard-compliant browsers the event is transitionend and this will offer a couple of properties:

propertyName: this is a string that will tell you the name of the completed property.

elapsedTime: this will tell you how many seconds have passed since the transition. The transition-delay property has nothing to do with this.

Summary

Though CSS is not the main topic in this book, it is important for you to know that it is used with and in HTML documents. The CSS style sheet can also be used to make the JavaScript run more smoothly and this is something HTML texts cannot do.

HTML and CSS are dependent on each other. The markup language is used to build web pages while CSS style sheets are used to describe how the web page would behave. Also, without the markup language it is impossible for anyone to make a web page.