CSS3 20 Descriptive Question

1. What are different ways to integrate a CSS into a Web page?

There are three ways to integrate CSS into a Web page

A. Inline: HTML elements may have CSS applied to them via the STYLE attribute.
B. Embedded: By placing the code in a STYLE element within the HEAD element.
C. Linked/ Imported: Place the CSS in an external file and link it via a link element.

2.Explain external Style Sheet? How would you link to it?

External Style Sheet can be called as a template/document/file which contains style information and can be linked with more than one HTML documents.

<HEAD> <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD>

3. What are the advantages and disadvantages of External Style Sheets?

The advantages of External Style Sheets are:
- Using them, the styles of multiple documents can be controlled from one file.
- Classes can be created for use on multiple HTML element types in many documents.
- In complex situations, selector and grouping methods can be used to apply styles.

The disadvantages of External Style Sheets are:

- In order to import style information for each document, an extra download is needed.
- Until the external style sheet is loaded, it may not be possible to render the document.
- For small number of style definitions, it is not viable.

4 . What is CSS selector?

Basically it is a string that identifies the elements to which a particular declaration or set of declarations will apply. It can also be referred to as a link between the HTML document and the style sheet. A {text-indent: 12pt}
Here, the selector is A, which is called as type selector.

5. What is the syntax to link external style sheet?

External style sheet are made up of css format only, it contains style information that can be linked with the HTML document externally. The syntax is as follows:
<HTML>
<HEAD>
<LINK REL=STYLESHEET HREF="style.css" TYPE="text/css">
</HEAD>
</HTML>

6. What are the rules in CSS ruleset?

CSS consists of two types of CSS rules, first is for ruleset which identifies the style and the selector. It combines the style and the selector. Ruleset is a combination of CSS rules, for example: h1{text-color: 15pt}

7. What is the CLASS selectors used for?

Class selectors are the selectors which are stand alone to a specific style that is declared. Class attribute can be used to declare the style and make an association with any HTML element. The syntax for creation of class selector is: .classname. The example code is shown as below:

.head{font: 12em;}, this is a class selector
<Body class= “head”> this is the class that is associated with the element </body>.

8. What do you understand by parent-child selector?

Parent-child selector represents the direct relationship between parent element and child element. It is been created by using two or more (~) tilde separated selectors. For example:
Body ~ p {background-color: red; text: #FF00FF;}

9. How grouping happens inside a CSS?

Grouping in CSS can be done by using the comma (,) separator in between one or more selectors that share the same style. A list of separator can be separated by using a semicolon as well.
Example:
H1, p.first, .name {font-style: italic}
This reduces the size of the style sheet and also save the writing time for those sheets.

10. What is the purpose of pseudo-elements?

Pseudo elements allow the use of the part of element and not the element itself. They are applied to block level element, which is used for the complete block for which the CSS is being written. This allow the subpart of an element to be styled like paragraphs and headings. For example:

selector:pseudo-element {property:value;}
p: first-line {text-transform: lowercase;}

11. How inline and block elements are different from each other?

• Inline elements don’t have line breaks. For example: em, strong, etc. codes are few examples of inline elements. An Inline element doesn’t have elements to set width and height.

• Block elements do have line breaks and they define the width by setting a container. It also allowed setting height. It can contain the elements that occur in inline elements.

12. How does inheritance work in CSS?

Inheritance is a concept that is used in HTML and other languages but it is used in CSS as well to define the hierarchy of the element from top level to bottom level. In inheritance child will inherit the properties of parent.
Definition is being defined in the child class

Body {font-size: 10pt;}
H1 {font-size: 14pt;}

13. What is the purpose of Nesting Selectors?

Nesting selectors are the selectors that define a selector inside another selector. For example:
H1
{color:blue;
text-align:center;}
.marked
{background-color:red;}
.marked h1
{color:white;}

14. What is the purpose of the z-index? Explain with the help of an example.

While using css to position html elements they may overlap each other. The z index used to specify which element overlaps which element. The z-index is a number which can either have a positive or a negative value. By default the z-index value is zero. In case elements have the same z-index number specified then the browser will layer them according to the order in which they appear in the HTML.

15. What is the difference between class selector and ID selector?

• Class selector can be given to an overall block. This is sometimes termed as block element as well, whereas ID selector identifies a unique name and a style for a specific element.
• ID selector declares the style for only one particular element which can be differentiated from other element, whereas Class selector is being given for the whole complete block.
Example of ID selector is being written like this:

#idname {color: red; background: black;}
This can be used in HTML as
<P ID= “idname”>this element only will be affected by the use of this ID element</P>

16. How pseudo-classes are different from pseudo-elements?

Pseudo classes are used to add style and special effects to some selectors which is being used inside some class. The syntax it as follows
selector:pseudo-class {property:value;}
a:link {color:#FF0000;}

pseudo classes can be combined with other classes as well. The syntax of it will be shown as:
selector.class:pseudo-class {property:value;}
a.red:visited {color:#FF0000;}

17. How to center the block-elements with CSS?

It can be done by defining the properties like margin-left and right to auto and width can be given any value. For example:

h1 {width: 22em; margin-left: auto; margin-right: auto}

18. How CSS float works?

CSS float is useful when we don’t have to give width for an element or we don’t want to keep the element fixed. It allows the elements to be given left or right boundaries to expand and wrap all other elements. Float is basically used for images and for layouts. Elements in this can be made float horizontally i.e. left or right. For example:
img
{float:right;}

19. Why CSS Box Model is used? What are the elements that it includes?

CSS box model defines the design and layout of the styling element. It is a box that shows the elements that will come before others. Like, it consists of margins, borders, padding, and the actual content. It allows a structured way to show the elements in comparison to other elements. The terms that are used in box model is shown as:
• Margin , Border, Padding , Content .

20. How can HTML elements be styled having specific attributes?

Css allows the user to style the html elements that have specific attributes. It does not only rely on class and id.
For ex.
[title]
{
color:red;
}

About blackcat

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.