CSS

Question 1

CSS

Answer 1

• Cascading Style Sheet (CSS) is a text file with .css
  extension and is commonly used to define styles and
  layouts of Web pages written in HTML.
• CSS simplifies the task of maintaining a Web
  document by separating its style information, such
  as font size, text color, line width, and background
  color.
• This separation allows you to apply the same style
  rules to multiple Web pages.
• Suppose, you have a Web page that contains multiple
  tables and you want to apply some style on the table
  caption, table header, and table cells.

Question 2

Advantage of using CSS

Answer 2

This reduces the complexity and
redundancy of code in the Web page and
saves our time, as we do not need to write
the same code again and again.

Question 3

A style sheet

Answer 3

A style sheet is made up of one or more style instructions
(called rules or rule sets) that describe how an element
or group of elements should be displayed.
* Each rule selects an element and declares how it should
look.

Question 4

syntax for h1

Answer 4

h1 { color: green; }
h1 { border: 1px solid blue; }

Question 5

synatx for p

Answer 5

p { font-size: small; font-family: sans-serif; }

Question 6

main sections/parts of a rule are

Answer 6

– the selector that identifies the element or
elements to be affected

– the declaration that provides the rendering
instructions
* The declaration consists of
– Property - value pair
– a property (such as color) and its value (green) are
separated by a colon and a space.

Question 7

There are three ways that style information can be
applied to an HTML document.

Answer 7

– External style sheets
– Embedded style sheets
– Inline style

Question 8

External style sheets

Answer 8

– An external style sheet is a separate, text-only document that
contains a number of style rules.
– It must be named with the .css suffix.
– The .css document is then linked to or imported into one or
more HTML documents.
– All the files in a website may share the same style sheet.
– This is the most powerful and preferred method for
attaching style sheets to content.

Question 9

Embedded style sheets

Answer 9

– It is placed in a document using the style element,
and its rules apply only to that document.
– The style element must be placed in the head of
the document.

Question 10

Inline styles

Answer 10

– We can apply properties and values to a single element using
the style attribute in the element itself, as shown below:
* <h1 style="color: red">Introduction</h1>
– To add multiple properties, just separate them with
semicolons, like this:
* <h1 style="color: red; margin-top: 2em">Introduction</h1>
– Inline styles apply only to the particular element in which they
appear.
– Inline styles should be avoided, unless it is absolutely
necessary to override styles from an embedded or external
style sheet.

Question 11

Parents and children

Answer 11

– All the elements contained within a given
element are said to be its descendants.
– For example, the h1, h2, p, em, and img
elements in the document are all descendants of
the body element.
– The elements have parent-child relationship.

Question 12

Document structure

Answer 12

• HTML documents have an implicit structure or hierarchy.
• For example, every web document has an html root
  element that contains a head and a body.
• The body contains heading and paragraph elements.

( DIAGRAM IN PRESENTATION)

Question 13

Grouped selectors

Answer 13

h1, h2, p, em, img { border: 1px solid blue; }

Question 14

Floating

Answer 14

Floating an element moves it to the left or
right, and allows the following text to wrap
around it.

Question 15

Positioning

Answer 15

Positioning is a way to specify the location of
an element anywhere on the page with pixel
precision.

Question 16

float example

Answer 16

img {
float: right;
margin: 10px;
}
p {
padding: 15px;
background-color: #FFF799;
border: 2px solid #6C4788;
}

Question 17

paragraph float

Answer 17

p.float1 {
float: left;
width: 12%;
margin: 0px;
background: #CCC;
}
p.float2 {
float: left;
width: 75%;
margin: 0px;
text-align: center;
background: #CCC;
}

p.float3 {
float: left;
width: 12%;
margin: 0px;
background: #CCC;
}
p
{border: 1px solid red;
}

Question 18

CSS provides several methods for positioning
elements on the page

Answer 18

– They can be positioned relative to where they
would normally appear in the flow.
– They can be removed from the flow altogether
and placed at a particular spot on the page.

Question 19

position property

Answer 19

Values: static | relative | absolute | fixed |
inherit