1. What is CSS?
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments.

2. What are different ways to apply styles to a Web page?
Inline CSS: HTML elements may have CSS applied to them via the STYLE attribute.For Example: If You have <p> element into webpage, you can apply inline style likeshows in example:
<p style=”font-size: 12px; color: #000000;”>Test </p>

Embedded CSS: CSS may be embedded in a Web page by placing the code in a STYLE element within the HEAD element.For Example: If You have <h2> element into webpage, you can apply embedded style like shows in example.
<head>
<style type=”text/css”>
h2 {
font-size: 16px;
color: #2d2d2d;
font-weight: 900;
}
</style>
</head>

Linked CSS: CSS can be placed in an external file (a simple text file containing CSS) and linked via the link element.You can apply style to webpage using external file as shown in example.
<link rel=”stylesheet” href=”custom/custom.css” type=”text/css” media=”screen, projection” />

Imported CSS: Another way to utilize external CSS files via @import
<style>
@import url(‘/css/styles.css’);
</style>

Put then your “styles.css” document can contain calls to any number of additional
style sheets:
@import url(‘/css/typography.css’);
@import url(‘/css/layout.css’);
@import url(‘/css/color.css’);

3. What is element Selector?
The element selector selects elements based on the element name. Example
p {
text-align: center;
color: red;
}

Note: A class and ID name cannot start with a number!

4. What is id Selector?
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

CSS:
#para1 {
text-align: center;
color: red;
}

Use in HTML:
<p id=”para1″> Testing </p>

5. What is class Selector?
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class.

CSS:
.para1 {
text-align: center;
color: red;
}

Used in HTML:
<p class=”para1″> Testing </p>

6. What is group selector?
When we have to give same effect and design to multiple elements. Then for minimize the code we can use group selector.
CSS Example:

h1, h2, p {
text-align: center;
color: red;
}

7. How to give comments in CSS?
A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

h1{
color: red;
/* This is a single-line comment */
text-align: center;
}

8. Explain below:
div, p {
}
Here div, p – Selects all <div> elements and all <p> elements

div p{
}
Here div p – Selects all <p> elements that are anywhere inside a <div> element

div > p{
}
Here div > p – Selects all <p> elements where the immediate parent is a <div> element

div + p{
}
Here div + p – Selects all <p> elements that are placed immediately after a <div> element

div ~ p{
}
Here div ~ p – Selects all <p> elements that are anywhere preceded by a <div> element

9. Explain the meaning of each of these CSS units for expressing length:
cm – centimeters
em – elements (i.e., relative to the font-size of the element; e.g., 2 em means 2 times the current font size)
in – inches
mm – millimeters
pc – picas (1 pc = 12 pt = 1/6th of an inch)
pt – points (1 pt = 1/72nd of an inch)
px – pixels (1 px = 1/96th of an inch)

10. What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.

For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus

div:hover {
background-color: blue;
}

338 total views, 3 views today