Google Plus Facebook Twitter RSS YouTube

How to Declare CSS Property Name & Value in jQuery

Cascading Style Sheet is globally used styling system in web styling technology. It can be applied to the web technology through jQuery scripting language. In CSS styling system, there is a systematic methodology to insert the property in element's selector by declaring the styling property's name and its value. The advanced lightweight JavaScript library (jQuery) implemented CSS styling integration system to help jQuery users to apply CSS styling properties to selectors using jQuery scripting. First of all, jQuery users who know CSS styling system must have to understand how a css property can be declared in jQuery in order to apply that property to a specific selector.

Declaration of CSS property name and value in jQuery

Syntax

Syntax of the css property of an element is defined in jQuery as given in the code box. Based on this syntax, CSS coders can directly specify the css properties of every element in jQuery scripting language.

jQuery Code

$("selector").css(propertyName,value)

Syntax Steps

  1. Specify selector name inside the quotes. The selector might be HTML element name or user defined selector.
  2. Type dot (.) symbol to specify selector's properties in CSS.
  3. Type css word and parenthesis, and include css property name and its value by a comma separation inside the parenthesis start ( and close ) brackets.

These three are the major steps in writing the syntax of declaring the CSS styling properties for a selector using jQuery. It is demonstrated here with few examples for helping you to learn it completely.

Add a button element and a paragraph element in body section as given below in the code box for demonstrating this concept. The purpose of the button element is to allow users to click on it to see its action on paragraph element.

HTML Code
<body>
<button>Preview</button>
<p>This is a Demo Text in HTML paragraph element whose background is 
 coloured when you click above preview button.</p>
</body>

Note: This tutorial works in all major latest web browsers automatically but some of web browsers especially (Internet Explorer) block running the jQuery script that we have used to generate the preview. So, allow blocked content to see result in each below browser’s preview. Please upgrade your browser’s version from older to newer if you don’t see any result in browser’s previews when you click on buttons below.

Example: 1

In this example, paragraph element's html selector name is p and it is decorated by the css background-color property to set a particular color to element. As per the syntax, background-color property is applied to paragraph element by replacing selector name with p, propertyName with background-color property and value with a color code.

jQuery Code
$(document).ready(function() {
    $("button").click(function(){
         $("p").css("background-color","#ff5500");		
		})
});

Add above jQuery script through its syntax at head section, HTML button element can now show its action on paragraph element. Click on preview button below and see its result in same window.


This is a Demo Text in HTML paragraph element whose background is coloured when you click above preview button.


Example: 2

In the above example, the specified background color is applied to paragraph element as background but the text content is not clearly visible in that background color. A suitable color has to be applied to the text content to make text content to appear clearly in background color. As you know, paragraph tag holds the text content. So, applying a color to p tag makes element to show text content in that color. Usually, color to text content is applied through css color property. A css property is already applied to p tag but jQuery does not allow users to insert more properties in a jQuery css syntax. In other words, jQuery css syntax accepts only one property and one value. If users want to apply more css rules to same element, users have to use more jQuery css syntax and each jQuery css syntax must be declared inside the jQuery script by dot (.) symbol.

jQuery Code
$(document).ready(function() {
    $("button").click(function(){
         $("p").css("background-color","#ff5500").css("color","#FFFFFF");		
		})
});

Based on the syntax of the jQuery CSS rule, CSS color property is applied to the element selector. When users click on button, this time element selector p tag accepts two css rules and display the content as per those two rules.


This is a Demo Text in HTML paragraph element whose background is coloured when you click above preview button.

In this case, the color of the text content is changed from black to white and now the text content is clearly visible in the same background as exampled in above live demonstration.

Example: 3

Though the text content is clearly visible but the text content touches the border of the background. It seems it's not well decorated. So, define padding property using css property declaration in jQuery script to show some space around the text content and it separates the text content's contact with border of the element.

jQuery Code
$(document).ready(function() {
    $("button").click(function(){
         $("p").css("background-color","#ff5500").css("color","#FFFFFF").css("padding",
         "2em");		
		})
});

In this case, paragraph element accepts three different properties and applies them to element whenever user clicks on button element.


This is a Demo Text in HTML paragraph element whose background is coloured when you click above preview button.

Now, the text content is well decorated by the background in clearly visible text color along with some space around it.

In jQuery scripting language, declaration of different css properties is done by the jQuery CSS syntax. As per this syntax, jQuery users can add required styling properties to any element through its selector.

Follow Us
Google Plus Facebook Twitter RSS YouTube
Subscribe via Email
Save or Share This jQuery Tutorial with Your Friends
Save or Share jQuery Tutorial