Web Designing and Publishing

CSS Question & Answer

It stands for Cascading style sheets. It is use for applying for the HTML elements, which is use to describe the look and formatting of a document written in markup language. It can also be use with any kind of XML documents including plain XML and SVG. And SVG. CSS is designed to separate the presentation and content, including layout and colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics. It enables multiple web pages to share formatting by specifying the relevant CSS in a separate.css file. 

There are three methods to integrate CSS on web pages.

a. Inline method: It is use to insert style sheets in html document.

b. Embedded method: It is use to add a unique style to a single document.

c. External method: CSS can be place in an external file and linked via link element. 

The advantages of CSS are:

a. Accessibility

b. Page will load fast

c. Offline browsing

d. Maintenance is easy

 The different components of CSS style are: Property Selector and Value 

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. With ID Selector, we can select an element by pointing out the unique ID name set with the id attribute. It we use that selector can be used only once in html document. It we use that selector on More than one element, our code will not pass validation. The difference between the Class and ID selector is: The ID selector consists of a hash (#) followed by the unique ID name of a referring HTML Element. ID selector cannot start with a number and must be at least one character long. They Also case-sensitive, and must exactly match across HTML,CSS and JavaScript.

The ID selector in CSS document:

#para1 
{ 
 Text-align: center; 
 Color: blue;
} 

Class selector

<style> 
.center { 
Text-align: center; 
Color: blue; 
} 
</style> 
In CSS a class selector starts with a dot (.), like this: 
.bank { /* this is the class selector */ 
Text-color: red; 
}

In CSS, the margin is the property by which we can create space around elements. We Can even create space to the exterior define borders. In CSS have margin property as follows? Margin-top, Margin-right, Margin-bottom and margin-left Margin property has some defined values as shown below:

a. Auto: This property browser calculates the margin.

b. Length: It sets the margin value in px, pt, cm etc.

c. %: It sets the width % of the element.

d. Inherit: This property we can inherit the margin property from the parent element.

In CSS, padding is the property by which we can generate space around an element’s content As well as inside any known border; CSS padding also has properties like: Padding-top, Padding-right, padding-bottom and padding-left. Negative values are not allowed In padding.

The main difference between relative and absolute is that “relative” is used for the Same tag in CSS and it means that if we write the left:10px then the padding will shift to 10px In the left while absolute is totally relative to the non-static parent. It means if we write Left:10px then the result will be 10px far from the left edge of the parent element.

Inline element does not have an element to set width and height and also it does not  have the line break. 

Example:-

links <a>, emphasized words <em>, important words <strong>, and abbreviations 

<abbr> Block elements are meant to structure the main parts of our page, by dividing our 

content in coherent block. 

Example:- width and height, paragraphs <p>, lists: unordered <ul> and ordered lists <ol> 

Headings: from 1st level <h1> to 6th level headings <h6>, articles <article> and sections 

<section> . 

It stands for Cascading Style Sheets. It is use for applying the styles for the HTML. elements, which is use to describe the look and formatting of a document written in markup language. It can also be use with any kind of XML documents including plain XML and SVG. CSS is designed to separate the presentation and content, including layout and colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics. It enables multiple web pages to share formatting by specifying the relevant CSS in a separate. css file.

• There are three methods to integrate CSS on web pages.
• Inline method: It is use to insert style sheets in html document.
• Embedded method: It is use to add a unique style to a single document.
• External method: CSS can be place in an external file and linked via link element.

The advantages of CSS are:

• Accessibility 
• Page will load fast
• Offline browsing
• Maintenance is easy

The different components of CSS style are:

Property

Selector and Value

The class selector selects elements with a specific class attribute. To select element with a specific class, write a period (.) character, followed by the name of the class. With ID selector, we can select an element by pointing out the unique ID name set with the id attribute.

If we use that selector can be used only once in html document. If we use that selector on more that one element, our code will not pass validation.

The difference between the Class and ID selector is:

The ID selector consists of a hash (#), followed by the unique ID name of a referring HTML element. ID selector cannot start with a number and must be at least one character long. They also case-sensitive, and must exactly match across HTML, CSS and JavaScript.

The ID selector in CSS document:
#paral {
   text-align : center;
 color : blue;
}
Class selector
When we want to style name more than one object on a web page, we should be using a class selector. To use multiple elements in an HTML document can have the same class value. In addition, a single element can have multiple class name separated by white space.
A Class selector can have any name that starts with a letter, hyphen or underscore.

A class selector in html document:
<style>
   . center {
     Text - align : center;
   Color : blue;
}
</style>
In CSS a class selector starts with a dot(.), like this:
 . bank { /* this is the class selector */
   Text-color: red;
}
The only difference between them is the "id" is unique in a page can only apply at one element, while "class" selector can apply to multiple elements.

In CSS, the margin is the property by which we can create space around elements. We can even create space to the exterior define borders.
In CSS have margin property as follows?
Margin-top, Margin-right, Margin-bottom and margin-left
Margin property has some defined values as shown below:
a. Auto: This property browser calculates the margin.
b. Length: It sets the margin value in px, pt, cm etc.
c. %: It sets the width % of the element.
d. Inherit: This property we can inherit the margin property from the parent element.
In CSS, padding is the property by which we can generate space around an element's content as well as inside any known border;
CSS padding also has properties like:
Padding-top, Padding-right, padding-bottom and padding-left. Negative values are not allowed in padding. 

The main difference between relative and absolute is that "relative" is used for the same tag in CSS and it means that if we write the left:10px then the padding will shift to 10px in the left while absolute is totally relative to the non-static parent. It means if we write left: 10px then the result will be 10px far from the left edge of the parent element.

Inline element does not have an element to set width and height and also it does have the line break.
Example: links <a>, emphasized words <em>, important words <strong>, and abbreviations <abbr>
block elements are meant to structure the main parts of our page, by dividing our content block.
Example: width and height, paragraphs <p>, lists: unordered <u> and ordered lists <ol>
Headings: from 1st level <h1> tp 6th level headings <h6>, articles <article> and sections <section>

We can make a rounded corner by using the property "border-radius". We can apply this property to any element.
<html>
<head>
<style>
  # rcorner {
  Border-radius: 25px;
  Background: gray;
padding: 20px;
Height:  150px;
}
</style>
</head>
<body>
<h3>The border-radius property</h3>
<p id-"rcorner">Rounded corners</p>
</body>
</html>
Run the above code in the browser.

 In CSS, the box model is a box that binds all the html elements and it includes features like margins, border, padding and the content.
Margin: the top most layer, the overall structure showed.
Border: the padding and content option with a border around is shown. Background color affects the border.
Padding: space showed. Background color affects the border.
Content: Actual content is showed.
By using a box model we will get the authority to add the borders all around the elements and we can also define the space between the elements.

The background-color property is use to set background color of an element.

The background-image property is use to set the background image of an element.