10th Class Computers Working with CSS Introduction to Cascading Style Sheets (CSS)

Introduction to Cascading Style Sheets (CSS)

Category : 10th Class

*     Introduction to Cascading Style Sheets (CSS)

 

 

A style sheet is a set of style rules that tell a browser how to present a document. HTML's STYLE element is the simplest ways of linking these style rules to your HTML documents. These elements are placed in the document HEAD, and it contains the style rules for the page.                                   

 

* CSS Syntax

A CSS rule divides into two parts.

selector (Declaration1; Declaration2 ;)

Or

selector (property1: value1; property2: vatue2)

Basically selector is the HTML element you want to style and property is the style

attribute. The following is the simple example of CSS:

My style

{

Color: green;

text-align: center:

}  

 

 

*  CSS Background

CSS allows changing background colour of a page. It enables background-colour property that specifies the background colour of an element. The following code snippet shows how to change background:

body {background-color: # ff0000;)

CSS enables background-image property that allows changing background image of a page. The following code snippet shows how to change background image for a page:

body { background-image: uri ('img1.gif');}

To repeat the image only horizontally you need to use repeat-x property.  

The following code snippet shows how to use repeat-x property:

body

{

background-image: url ('imgl.gif');

background-repeat: repeat-x;

}  

 

 

*  Background property allows following values declaration:  

 

*  Background-Color

Allows setting background colour of an element. You can pass the following values:

  • color-rgb
  • color-hex
  • color-name
  • transparent    

 

*  Background-Image

Allows setting background image for an element. You can pass the following values:

  • inherit
  • none  

 

 

* Background-Repeat

Allows setting background image will be repeated. You can pass the following values:

  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
  • inherit  

 

*  Background-Attachments

Allows making a background image is fixed or scroll. You can pass the following values:

  • scroll
  • fixed
  • inherit  

 

*  Background - Position

Allows setting starting position of the background image. You can pass the following values:

  • left center
  • left top
  • left bottom
  • Right center
  • Right top
  • Right bottom
  • Center center
  • Center bottom
  • Center top
  • Inherit  

 

*   CSS Comments

The CSS comment starts with "/*" and ends with "*/". Basically comments are used to explain your code line by line. These comments are useful in future when a new programmer make modification in that code. These comments are ignored by browsers. The following code snippet shows how to use comments:

/* this code is used for changing colour*/

Mystyle

{

color: green;

text-align :center;

}    

 

 

Question.jpg    

 

 CSS comments are useful in future when a new programmer make modification in that code. The CSS comment starts with..............

(A) "*/"                                                               

(B) "/*"

(C) "/"                                                                  

(D) */

(E) None of these  

 

Answer: (b)

Explanation

Correct Option:

(B) The CSS comment starts with "/*"

Incorrect Options:

Therefore, option (B) is correct and rest of the options is incorrect.    

 

 

 CSS allows changing background colour of a page. Which one of the following code snippet is used to change background?

(A) body {background-colour: # ffOOOO;)

(B) body {back-colour: # ffOOOO;)

(C) body {colour: #ff0000;)

(D) body {backgroundcolour: # ffOOOO;)

(E) None of these  

 

Answer: (a)

Explanations

Correct Option:

(A) CSS enables background-color property that specifies the background colour of an element.

Incorrect Options:

Therefore, option (A) is correct and rest of the options is incorrect.    

 

 

 CSS enables background-colour property. Jack wants to repeat the image only horizontally. Which one of the following properties Jack should use to do the same?

(A) background-image                                  

(B) repeat-x

(C) background-repeat: repeat-y             

(D) background-repeat: repeat-x

(E) None of these  

 

Answer: (d)

Explanation

Correct Option:

(D) To repeat the image only horizontally you need to use repeat-x property.

Incorrect Options:

Therefore, option (D) is correct and rest of the options is incorrect.  



LIMITED OFFER HURRY UP! OFFER AVAILABLE ON ALL MATERIAL TILL TODAY ONLY!

You need to login to perform this action.
You will be redirected in 3 sec spinner

Free
Videos