CSS (Fundamentals, Colors, and Styling) 1 — Questions and Answers
Question 1: The abbreviation CSS stands for __________
- Cascade Sheets Style
- Color Style Sheets
- Cascading Style Sheets (Correct answer)
- Cascade Style Sheet
Correct answer: Cascading Style Sheets
CSS is an acronym that stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of a document written in HTML or XML. The 'Cascading' aspect refers to how styles are applied and overridden based on specificity, inheritance, and order within the stylesheet.
Question 2: h1 is also known as_______ in CSS.
- Attribute
- Selector (Correct answer)
- Tag
- Value
Correct answer: Selector
In CSS, `h1` refers to an HTML element type. When you write `h1 { color: blue; }`, `h1` acts as a type selector (or element selector) to target all `h1` elements on the page. Selectors are fundamental patterns used in CSS to choose the HTML elements that you want to style.
Question 3: To embed CSS in an HTML page, which of the following tags is used?
- <!DOCTYPE html>
- <script>
- <style> (Correct answer)
- <css>
Correct answer: <style>
To embed CSS directly within an HTML page, the `<style>` tag is used. This tag is typically placed within the `<head>` section of the HTML document and contains the CSS rules that will be applied to the elements on that specific page, creating an internal stylesheet.
Question 4: Text, list, box, margin, border, color, and background properties have been introduced by __________.
- php
- css (Correct answer)
- html
- ajax
Correct answer: css
CSS (Cascading Style Sheets) is specifically designed to control the presentation and layout of web pages. Properties related to text formatting, list markers, the box model (margin, border), colors, and backgrounds are all core features introduced and managed by CSS, allowing for rich visual styling.
Question 5: Which selector is used to specify a binding rule for a single unique element?
- class
- both class and tag
- id (Correct answer)
- tag
Correct answer: id
The `id` selector is used to apply styles to a single, unique element within an HTML document. An `id` attribute must have a unique value across the entire page, making the `#id` selector the most specific way to target and style one particular element.
Question 6: The filter property blurs the images using which of the following elements?
- blur() (Correct answer)
- opaque()
- scatter()
- all of the mentioned
Correct answer: blur()
The `filter` CSS property allows you to apply graphical effects to an element. The `blur()` function is a specific value for this property that applies a Gaussian blur effect, making the element appear out of focus to a specified degree.
Question 7: Which of the following functions is used by the filter property to change the brightness of an element's color?
- brightness() (Correct answer)
- contrast()
- dark()
- light()
Correct answer: brightness()
The `filter` CSS property can modify the visual rendering of an element. The `brightness()` function is one of its available values, used to adjust the overall brightness level of an element's colors, making it appear lighter or darker.
Question 8: Which of the following functions is used by the filter property to modify the difference between light and dark values?
- dark()
- brightness()
- contrast() (Correct answer)
- light()
Correct answer: contrast()
The `filter` property in CSS provides various functions for visual adjustments. The `contrast()` function specifically modifies the difference between the light and dark values of an element, allowing you to enhance or reduce the distinction between its colors.
Question 9: Which of the following functions flips the colors of an element so that the filter property can use it?
- contrast()
- image()
- flip()
- invert() (Correct answer)
Correct answer: invert()
The `invert()` function, when used with the CSS `filter` property, flips the colors of an element. This means that light colors become dark and dark colors become light, effectively creating a photographic negative effect on the element's appearance.
Question 10: For use by the filter property, which of the following functions applies a saturation effect to an element's color, making it appear more or less vivid?
- saturation() (Correct answer)
- color()
- saturate()
- none of the above
Correct answer: saturation()
The `filter` property in CSS allows for applying various visual effects to an element. The `saturate()` function (often referred to as saturation) is used to apply a saturation effect to an element's colors, making them appear more or less vivid and intense.
Question 11: Which of the following are Webkit's CSS Extension Prefixes?
- -o-
- -web
- -chrome
- -webkit (Correct answer)
Correct answer: -webkit
Vendor prefixes are used by browser engines to implement experimental or non-standard CSS features before they are fully standardized. `-webkit-` is the specific prefix used by the WebKit rendering engine, which powers browsers like Safari and older versions of Chrome.
Question 12: What CSS property is the equivalent of the <center> attribute?
- margin
- font
- color
- align (Correct answer)
Correct answer: align
The deprecated HTML `<center>` tag was used to horizontally center content. In modern CSS, the `text-align` property with a value of `center` is used to achieve this effect for inline content within a block element. For block elements, `margin: auto` is typically used for horizontal centering.
Question 13: Which CSS property is the same as the <font> attribute?
- font-style (Correct answer)
- color
- font-family
- all of the mentioned
Correct answer: font-style
The deprecated HTML `<font>` tag was used to control various aspects of text appearance, including font family, size, and style. In CSS, `font-style` is the property specifically used to set text to italic or oblique, which was one of the capabilities of the `<font>` tag.
Question 14: To give a line above the text, which of the following CSS properties is used?
- text-decoration: line-through
- text-decoration: none
- text-decoration: underline
- text-decoration: overline (Correct answer)
Correct answer: text-decoration: overline
The `text-decoration` CSS property is used to add decorative lines to text. Setting its value to `overline` specifically draws a line directly above the text, providing a visual emphasis distinct from `underline` or `line-through`.
Question 15: On February 25, 2004, _________ was designated as a Candidate Recommendation, but on June 13, 2005, it was reverted to a Working Draft for further evaluation.
- CSS level 2.1 (Correct answer)
- CSS level 1
- CSS level 2
- CSS level 3
Correct answer: CSS level 2.1
CSS level 2.1 (CSS 2.1) was a major revision of CSS2, intended to correct errors, clarify definitions, and incorporate widely implemented features. Its development involved a long process, including being designated as a Candidate Recommendation before being reverted to a Working Draft for further refinement.
Question 16: ___________ has a grammar, but it is not defined with a document type definition like regular (X)HTML.
- CSS 2
- CSS 1
- CSS 3
- CSS 2.1 (Correct answer)
Correct answer: CSS 2.1
CSS 2.1, while a robust styling language, defines its own grammar for its syntax and rules. Unlike some XML-based languages, its grammar is not formally defined using a Document Type Definition (DTD), which is typically associated with (X)HTML documents.
Question 17: CSS properties for manipulating the position of "ruby," which are little annotations on top of or next to words that are particularly common in Chinese and Japanese, are described in ___________ .
- ruby (Correct answer)
- align
- text-align
- lang
Correct answer: ruby
The `ruby` CSS properties are specifically designed to control the presentation of 'ruby annotations.' These are small annotations, often used in East Asian typography (like Japanese furigana), that appear above or next to base text to provide pronunciation guides or additional information.
Question 18: We don't have to reapply style information throughout the document or to external documents when using Inline Style.
- A) False (Correct answer)
- B) True
Correct answer: A) False
This statement is false. Inline styles are applied directly to individual HTML elements using the `style` attribute. This approach requires reapplying the style information to every single element you want to affect, making it highly inefficient for styling multiple elements or maintaining consistency across a document or website.
Question 19: Which of the following tags should be used to link information inside?
- A)
- <head> (Correct answer)
- <body>
- <div>
Correct answer: <head>
The `<head>` tag in an HTML document is used to contain metadata about the document, including its title, character set, and links to external resources. This is where you typically link external CSS stylesheets using the `<link>` tag or embed internal CSS using the `<style>` tag.
Question 20: Which of the following measurements is used to define a measurement in relation to the x-height of a font?
- em
- px
- ex (Correct answer)
- pt
Correct answer: ex
The `ex` unit in CSS is a relative length unit that is defined in relation to the x-height of the font. The x-height typically refers to the height of the lowercase 'x' in the current font, making `ex` useful for sizing elements relative to the font's lowercase characters.
Question 21: Which of the following measurements is a percentage measurement?
- cm
- em
- in
- % (Correct answer)
Correct answer: %
The `%` unit in CSS represents a percentage, which is a relative measurement. It defines a value as a proportion of another value, such as an element's width being 50% of its parent element's width, making it highly flexible for responsive design.
Question 22: Which of the following CSS3 Color Feature adds an alpha channel value to specify the color's opacity, similar to RGB color?
- AlphaRGB
- RGB
- RGBa (Correct answer)
- RGBaplha
Correct answer: RGBa
RGBa is a CSS3 color format that extends the traditional RGB model by adding an 'alpha' channel. This alpha channel specifies the opacity of the color, allowing developers to control the transparency of an element from fully opaque (1) to fully transparent (0).
Question 23: Under CSS 2.1, which of the following Color Formats has 17 defined colors?
- Commonly defined named colors
- Specificationdefined named colors (Correct answer)
- HSLa Color
- System Color Names
Correct answer: Specificationdefined named colors
Under CSS 2.1, there are 17 specific named colors (e.g., `red`, `blue`, `green`, `white`, `black`) that are explicitly defined in the specification. These 'specification-defined named colors' provide a convenient and readable way to refer to common colors without using hexadecimal or RGB values.
Question 24: Which of the six-digit hexadecimal formats used by CSS is the same as the color defined in (X) HTML?
- 3-Hex Color
- RGBa
- 6-Hex Color (Correct answer)
- RGBS
Correct answer: 6-Hex Color
The 6-digit hexadecimal color format (`#RRGGBB`) is a widely used method in both HTML and CSS to define colors. Each pair of hexadecimal digits represents the intensity of red, green, and blue components, making it identical to how colors are defined in (X)HTML documents.
Question 25: Which of the following Color Formats is a CSS color? Which of the following color formats can be defined with the keyword rgb, followed by three numbers between 0 and 255, enclosed in parentheses and separated by commas, with no spaces between them?
- HSLa Color
- RGB Color (Correct answer)
- RGBa Color
- HSL Color
Correct answer: RGB Color
The RGB Color format in CSS is defined using the `rgb()` function, which takes three numerical values. These values, ranging from 0 to 255, represent the intensity of red, green, and blue components, respectively, to create a specific color.
The abbreviation CSS stands for __________