• Home
  • Courses
  • School
  • Programs
  • Problems
  • Contact Us
  • My account
  • Register

Have any question?

(+91) 98222 16647
info@simplycoding.in
RegisterLogin
Simply Coding
  • Home
  • Courses
  • School
  • Programs
  • Problems
  • Contact Us
  • My account
  • Register

Web Designing

CSS Theory Questions

  • Categories Web Designing, HTML, HTML
CSS Tutorial

Introduction

CSS or Cascading Style sheet is a style sheet language which is used to describe the presentation of any document written in markup language such as HTML.

  1. What is DHTML?
Ans.

DHTML stands for Dynamic HTML and it is NOT a Language or web standard. DHTML is a combination of these technologies: HTML, JavaScript, DOM (Document Object Model) and CSS(Cascading Style Sheets)>

  1. What do we need CSS?
Ans.

With the immense success of HTML, its scripts started to become more and more complex as various styling statements became hard coded in the scripts. With more and more browsers and styling capabilities, it became more difficult to maintain consistent site or change site presentation quickly.

 CSS helps to separate formatting with content.  A markup language like HTML, XML, and SVG can focus on content, while CSS helps in presentation part.

It helps to reduce complexity and repetition of styling statements in HTML. This helps reduction of errors and ease of maintenance of site.

The same CSS file can be shared across multiple HTML documents.  CSS helps in making any styling change across multiple HTML files a lot simpler. It can even provide alternate formatting for different devices.

It is simple, easy to learn, saves time and it also makes the actual content more accessible.

  1. Who proposed CSS and which version is used today?
Ans.

CSS was first proposed by Håkon Wium Lie in 1994 and the first version of CSS1 was released in 1996. CSS 2 was published in 1998 and current version of CSS3 was released in 2012

  1. What does Cascading mean?
Ans.

CSS is named cascading style sheet because it allows multiple style sheets to be applied on the same document or document element and it defines the cascading sequence in which they will be applied.

  1. What is benefit of CSS?
Ans.
    • Pages download faster.
    • Developers have to type less code, and the web page are shorter and neater.
    • Updating your design and general site maintenance are made much easier, and errors caused by editing multiple HTML pages occur far less often.
  1. What is CSS Style Rule? What is selector and declaration block?
Ans.

A CSS is actually collection of style rules that are interpreted by the browser and then applied to the corresponding elements in your document.

A style rule set consists of a selector and declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

example all p elements will be centre-aligned, with a red text color:

p {
color: red;
text-align: center;
}
  1. What are different types of Stylesheets?
Ans.

CSS offers three type of style sheet that may be linked to web page.

Inline

Inline CSS which contains the CSS property in the HTML body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using style attribute.

Internal

CSS can also be embedded in the HTML HEAD Section if a single HTML document must be styled uniquely. This is called as Internal CSS.

External

External CSS where there is separate dot CSS file which contains only style property with the help of tag attributes (For example class, id, heading … etc.). And it is linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across multiple HTML files.

  1. What is Universal Selector (*)?
Ans.

Sometime we need to define a rule that is applicable to all elements of a webpage. You can define a universal rule. Universal Selector asterisk (*), which applies to entire document or all elements of an HTML document.

For example, considering the following universal rule:

*   {
        Font-size: 18px;
    }
  1. What is Element Selector (H1)?
Ans.

The element selector selects elements based on the standard HTML element name like p H1 to H6 etc.

For e.g. this style rule will apply to all H1 elements in the HTML file.

H1 {
color: blue;
text-align: center;
}
  1. What is ID Selector (#)?
Ans.

Id selector which uses unique id attribute of an HTML element to select a specific element. Here the selector of the style rule is written with a hash (#) character, followed by the id of the element.

<!DOCTYPE html>
<html>
<head>
<style>
#ID1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="ID1">Hello World!</p>
<p> Next sentence.</p>
</body>
</html>
  1. What is Class Selector?
Ans.

Class selector which selects elements with a specific class attributes. Here we write a period (.) character, followed by the name of the class. These selectors such as element, ID and class can be grouped or applied together as required. For e.g. if you have multiple elements where you want to apply the same style, you can just separate them by comma.

e.g. If you want to create a style for element with specific ID you can create a combination too

#black h2 {
color: #000000;
}
  1. How do you set Foreground Color?
Ans.

To set the foreground color, we will use the color property and after color we can either give hexadecimal number or we can specify color name.

Syntax:

Selector {color: red ;}

  1. How do we set Background Color?
Ans.

To set background color we will use background-color property. It is typically applied to whole HTML body but can be applied to individual elements as well.

Syntax:

body {background-color: blue ;}
h1 {color: red; background-color: pink ;}
  1. How do we set Background Image?
Ans.

Instead of color, if we want to set an image as background, we will use CSS property background-image. Here we need to specify the image path after the colon.

Syntax:

body { background-image: url(“Desert.jpg”); }

  1. How do we Repeat Background Image?
Ans.

By default the background image is repeated horizontally and vertically. You can use the background –repeat property to change this behaviour to either no repeat or repeat only horizontally or vertically.

Syntax:

body { background-image: url(“Desert.jpg”);
background-repeat: no-repeat; }
  1. How do we specify which font is to be used?
Ans.

Font Family is used to define prioritized list of font which is to be used to display the element. If first font is not installed on the computer, it moves to next and so on till it finds a suitable font.

Syntax:

h1 {font-family: Arial ;}

  1. How do we set Font-Style?
Ans.

Font style helps to set the font as normal or italic or oblique.

Syntax:

h1 {font-style: italic ;}

  1. How do we set Font-Variant?
Ans.

Font variant helps to specify whether font will be normal or small caps. Small cap uses smaller sized capital letters in place of lower case letters. If no small caps is available then browser will show in upper case instead.

Syntax:

h1 {font-variant: small-caps ;}

  1. How do we set Font-Weight?
Ans.

Font weight helps to specify boldness or heaviness of Font. You can either use pre-set value of Bold, Bolder, normal or lighter or you can use a number range between 100 to 900.

Syntax:

h1 {font-weight: 800 ;}
p {font-weight: normal ; }
  1. How do we set Font-Size?
Ans.

Use Font Size property to set the size of the font. To give an absolute value you can use pixel or point. To give a value relative to current font you can use percent or em which is multiple of current font.

Syntax:

h1 {font-size: 30px ;}

  1. How do we set Text-Indent?
Ans.

Text indent is used to add some blank space before a paragraph begins. You can specify the value in pixels as shown.

Syntax:

p {text-indent: 30px ;}

  1. How do we Align text?
Ans.

Text align is used to specify justification of text. It can have values of left, right, centered or even justified.

Syntax:

p {text-align: left ;}

  1. What is Text-Decoration?
Ans.

Text decoration is used to add effects such as underline, overline, line through or blinking text.

Syntax:

p {text-decoration: underline ;}

  1. What is Text-Transform?
Ans.

Text transform controls the appearance of text in different cases i.e. it can be capitalize, which capitalizes first letter of each word. Uppercase converts all letter to uppercase. Lowercase converts all letters to lowercase and none is used to apply no transformations.

Syntax:

p {text-transform: uppercase ;}

  1. How do you set Spacing between words?
Ans.

Word spacing is used to specify width of blank spaces between words in pixels. A positive number increases the width while a negative number decreases it.

Syntax:

p {word-spacing: 20px ;}

  1. How do you set Spacing between letters?
Ans.

Letter Spacing is used in similar way where we specify width in between letters in pixels

Syntax:

p {letter-spacing: 7px ;}

Properties Related to Margins and Padding

  1. How do we set Margins on elements?
Ans.

To set margins on an element, we use margin-left, margin-right, margin-top and margin-bottom. You can specify the margin in pixels for them.

Syntax:

body {
margin-top: 100px ;
margin-left: 50px ;
margin-right: 50px ;
margin-bottom: 100px ;
}
  1. What is Padding? How do you set padding in CSS?
Ans.

Padding defines the distance between the border and content. For this we use padding-left, padding-right, padding-top and padding-bottom. You can specify the padding in pixels for them. Like margin, here too you can use shortcut padding for all 4 padding properties. You can write padding colon and then give the values top, right, bottom, left in order, separated by space.

Syntax
p {padding-left: 120px ;}
           or
p {padding: 20px  20px  20px  20px ;}

Properties Related to Borders

  1. What are different values Border Width can take?
Ans.

Border width property can take values thin, medium and thick or a numeric value giving thickness in pixels.

Syntax

p {border-width: 5px ;}

  1. How do you set Border Color?
Ans.

Set the border color by either giving the color name directly or specifying the RGB or HEX values.

Syntax

p {border-color: blue ;}

  1. What are different values of Border Style?
Ans.

There are different types of borders to choose from like dotted, dashed, solid, double etc. or you can also specify none or hidden if you do not want any border.

Syntax

p {border-style: dotted ;}

  1. How do you use Border shortcut?
Ans.

You can use a shortcut border for all 3 border properties. You can write border colon and then give the values for width, style and color separated by space. If you leave out any of them, it is set to its default value.

Syntax

p {border-width: 5px; border-style: dotted; border-color: blue ;}

All these properties can be combined together as:

P {border: 1px solid blue ;}

  1. What are limitations of CSS?
Ans.

Although CSS is very useful, but it still has some issues. Some limitations of CSS are given below:

    1. Not same across different browsers
    2. Can easily be overridden
  • Share:
author avatar
Simply Coding

Previous post

MS Access Notes and Questions
June 17, 2020

Next post

What is XML?
June 17, 2020

You may also like

HTML Table tags
HTML Table Tags
14 June, 2021
HTML List
HTML List Tags
14 June, 2021
Audio and Video tag in HTML
HTML Audio and Video tags
14 June, 2021

Leave A Reply Cancel reply

You must be logged in to post a comment.

Categories

  • Uncategorized
  • Programs
    • Python
    • Java
  • Problems
    • Python
    • Java
    • Web Development
      • Internet
    • Emerging Technologies
  • Notes
    • General
    • QBasic
    • MS Access
    • Web Development
      • XML
      • HTML
      • JavaScript
      • Internet
    • Database
    • Logo Programming
    • Scratch
    • Emerging Trends
      • Artificial Intelligence
      • Internet of Things
      • Cloud Computing
      • Machine Learning
    • Computer Fundamentals
      • Computer Networks
      • E-Services
      • Computer Hardware
    • Python
    • Java
  • School
    • ICSE
      • Computers Class 9
        • Java Introduction
        • Tokens & Data Types
        • Java Operators
        • Math Library
        • if & switch
        • For & While
        • Nested loops
      • Computer Class 10
        • Sample Papers
        • OOPS concepts
        • Functions in Java
        • Constructors
        • Arrays in Java
        • Strings in Java
    • SSC
      • IT Class 11
        • IT Basics
        • DBMS
        • Web Designing
        • Cyber Laws
      • IT Class 12
        • Web Designing
        • SEO
        • Advanced JavaScript
        • Emerging Tech
        • Server Side Scripting
        • E-Com & E-Gov
      • Computer Science 11
      • Computer Science 12
    • CBSE
      • Computer 9
        • Basics of IT
        • Cyber Safety
        • Scratch
        • Python
      • Computer 10
        • Sample Papers
        • Networking
        • HTML
        • Cyber Ethics
        • Scratch
        • Python
      • Computer Science 11
        • Computer Systems
        • Python 11
          • Python Basics
          • Python Tokens
          • Python Operators
          • Python if-else
          • Python loops
          • Python Strings
          • Python List
          • Python Tuple
          • Python Dictionary
          • Python Modules
        • Data Management
      • Computer Science 12
        • Sample Papers
        • Python 12
          • Python Functions
          • Python File Handling
          • Python Libraries
          • Python Recursion
          • Data Structures
        • Computer Networks
        • Data Management
    • ISC
      • Computer Science 11
        • Introduction to Java
        • Values & Data Types
        • Operators
        • if & switch
        • Iterative Statements
        • Functions
        • Arrays
        • String
        • Data Structures
        • Cyber Ethics
      • Computer Science 12
        • Sample Papers
        • Boolean Algebra
        • OOPS
        • Wrapper Classes
        • Functions
        • Arrays
        • String
Simply Coding Computer Courses for School                Privacy Policy     Terms of Use     Contact Us

© 2021 Simply Coding

Login with your site account

Lost your password?

Not a member yet? Register now

Register a new account

Are you a member? Login now