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:
Background-Image
Allows setting background image for an element. You can pass the following values:
Background-Repeat
Allows setting background image will be repeated. You can pass the following values:
Background-Attachments
Allows making a background image is fixed or scroll. You can pass the following values:
Background - Position
Allows setting starting position of the background image. You can pass the following values:
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;
}
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.
You need to login to perform this action.
You will be redirected in
3 sec
