the web thought: manipulate property

Monday, 31 October 2011

CSS: terms and syntax (a tutorial for beginners)

Posted by Marco Del Corno at 07:00

How often we couldn't understand when an article explains CSS because of its terminology? Words like "element", "class", "selector" and so on, can get mixed up in our brain, and we feel like we are missing something.

Don't worry, because here I explain it all, and so there won't be any confusion anymore.

CSS stylesheets

CSS stands for Cascading Style Sheet.
I believe you already know how a stylesheet is built. Anyway, it is important to remember that a stylesheet is a set of CSS rules. It could be external (we link to the stylesheet in the head of the page), it could be embedded directly in the head of a document or it could be inline (inside the HTML element we want to style).
When we link to an external stylesheet we use the following syntax:

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

Monday, 16 May 2011

jQuery: CSS manipulation

Posted by Marco Del Corno at 07:00

In this very short article, we will see how to manipulate CSS properties using jQuery. The main reason why, we should consider jQuery to change applied CSS styles to an object, is because we can do it on the fly, and thus basically change the appearance of an object according to some predefined event.
I assume you know a little about jQuery and how to develop functions on events. We will just see jQuery css method which has two basic usage:
1) retrieve the property of an object;
2) change the property of an object.

What's a property?

The css method has a simple syntax:

$('selector').css('css-property-name');

With the above syntax, we can determine a property for a specific div:

$("#example").html($('#example').css('background-color'));

In the above example, we are retrieving the background-color value of a div with id = "example":

<div id="example" style="width:100px;height:100px;background:blue"></div>