CSS Theory Questions
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.
- What is DHTML?
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)>
- What do we need CSS?
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.
- Who proposed CSS and which version is used today?
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
- What does Cascading mean?
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.
- What is benefit of CSS?
- 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.
- What is CSS Style Rule? What is selector and declaration block?
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;
}- What are different types of Stylesheets?
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.
- What is Universal Selector (*)?
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;
}- What is Element Selector (H1)?
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;
}- What is ID Selector (#)?
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>- What is Class Selector?
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;
}- How do you set Foreground Color?
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 ;}
- How do we set Background Color?
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 ;}- How do we set Background Image?
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”); }
- How do we Repeat Background Image?
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; }- How do we specify which font is to be used?
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 ;}
- How do we set Font-Style?
Font style helps to set the font as normal or italic or oblique.
Syntax:
h1 {font-style: italic ;}
- How do we set Font-Variant?
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 ;}
- How do we set Font-Weight?
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 ; }- How do we set Font-Size?
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 ;}
- How do we set Text-Indent?
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 ;}
- How do we Align text?
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 ;}
- What is Text-Decoration?
Text decoration is used to add effects such as underline, overline, line through or blinking text.
Syntax:
p {text-decoration: underline ;}
- What is Text-Transform?
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 ;}
- How do you set Spacing between words?
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 ;}
- How do you set Spacing between letters?
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
- How do we set Margins on elements?
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 ;
}- What is Padding? How do you set padding in CSS?
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.
Syntaxp {padding-left: 120px ;}
or
p {padding: 20px 20px 20px 20px ;}Properties Related to Borders
- What are different values Border Width can take?
Border width property can take values thin, medium and thick or a numeric value giving thickness in pixels.
Syntax
p {border-width: 5px ;}
- How do you set Border Color?
Set the border color by either giving the color name directly or specifying the RGB or HEX values.
Syntax
p {border-color: blue ;}
- What are different values of Border Style?
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 ;}
- How do you use Border shortcut?
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 ;}
- What are limitations of CSS?
Although CSS is very useful, but it still has some issues. Some limitations of CSS are given below:
- Not same across different browsers
- Can easily be overridden
