WorksheetsComprog Css syntax selectors font and color properties
Total questions: 50
Worksheet time: 50mins
What is the basic syntax of a CSS rule?
selector { property: value; }
{ property: value; } selector
selector value { property; }
property: value; selector
Which of the following is NOT a way to link a CSS stylesheet to an HTML document?
Using the <link> tag in the <head> section
Embedding an internal CSS using the <style> tag
Using the <script> tag to import a CSS file
Embedding an inline CSS directly within an HTML element using the style attribute
What is a CSS selector?
A keyword used to specify the value of a CSS property
A code that specifies the HTML element, class or ID to which a particular style should be applied
A declaration block that contains CSS properties and values
A rule that defines the overall layout of a web page
Which of the following is NOT a type of CSS selector?
Element selector
Class selector
ID selector
Function selector
What is the difference between an ID selector and a class selector?
ID selectors can be used multiple times on a page, while class selectors can only be used once.
ID selectors have higher specificity than class selectors.
Class selectors can be applied to one element, while ID selectors will affect all elements.
There is no difference between ID selectors and class selectors.
What is a declaration block?
A set of CSS rules that defines the style of an HTML element
A specific value assigned to a CSS property
A keyword that specifies the type of selector
A comment within a CSS stylesheet
How do you separate multiple declarations within a declaration block?
With a comma ,
With a semicolon ;
With a colon :
with a new line character \n
Which CSS selector targets all the <p>(paragraphs) on a webpage?
#p
.p
p
*
In the following CSS code, what is the name of the section between the curly braces {}?
Selector
Declaration
Property Name
Rule
What is the property name and value in the following declaration?
background-color: blue;
Property name: blue; Value: background-color
Property name: background-color; Value: blue
Property name: background; Value: color: blue
Property name: color; Value: background
Which selector is used to style an element with a specific id in CSS?
#text
.text
$text
@text
What is the purpose of the semicolon (;) in a CSS declaration block?
To separate the property name and value
To indicate the end of a declaration
To enclose the declaration block
To separate the selector from the declaration
What is wrong with the following CSS code?
Missing selector
Missing semicolon after font-size
Curly braces are incorrect
color is not a valid CSS property
How would you change the text color of all <h1> elements to blue using CSS?
h1 { text-color: blue; }
h1 { color: blue; }
h1 { font-color: blue; }
h1 { background-color: blue; }
Which selector applies styles to all elements on a webpage?
*
.
#
;
Which part of the following CSS rule is the selector?
margin: 0;
font-family: Arial, sans-serif;
body
{}
Which of the following is an advantage of using external CSS?
It allows for quick application of styles to a single element only.
It keeps HTML and CSS completely separate, making the code easier to maintain.
It can only be applied to a single webpage.
It allows for styles to be applied inline directly within HTML elements.
How do you link an external CSS file to an HTML document?
<css href="styles.css">
<link rel="stylesheet" href="styles.css">
<script src="styles.css"></script>
Where should internal CSS be placed in an HTML document?
Inside the <head> tag, within <style> tags
Inside the <body> tag, within <script> tags
Inside a <div> tag, within inline attributes
In an external .css file linked to the HTML document
Which of the following is an example of applying inline CSS?
<h1 style="color: blue;">Welcome to my website</h1>
<link rel="stylesheet" href="styles.css">
<style> h1 { color: blue; } </style>
<div class="header">Welcome to my website</div>
Which method of adding CSS would you use if you need to apply styles to a single element only and want to avoid creating a new class in internal CSS or editing external files?
External CSS
Internal CSS
Inline CSS
Browser Default Styling
If a conflict occurs between inline, internal, and external CSS, which one will take priority?
External CSS
Internal CSS
Inline CSS
All methods will apply equally
Which of the following is true about internal CSS?
It can be reused across multiple pages.
It is written directly in the HTML element's style attribute.
It is defined within <style> tags in the <head> section.
It is always more efficient than external CSS.
You want to set the background color of a webpage to light blue. Which of the following CSS rules is correct?
background-color: blue;
background: lightblue;
background-color: lightblue;
color: lightblue;
To set the text color of a paragraph to red, you should use which CSS property?
font-color
text-color
color
font-style
Which property is used to change the font size of text?
font-weight
font-size
font-family
text-size
You want the text in your headings to appear bold. Which CSS property should you use?
font-style: bold;
font-family: bold;
font-weight: bold;
font-bold: true;
You are designing a webpage and want the text in your paragraph to be displayed in the font "Arial." If "Arial" is not available, you want the browser to use any sans-serif font. Which CSS declaration should you use?
font-family: Arial;
font: Arial, sans-serif;
font-family: Arial, sans-serif;
font-type: Arial;
p { font-size: 16px; color: black; }
In the following CSS rule, which part is the declaration block?
p
{ font-size: 16px; color: black; }
font-size: 16px;
color: black;
Which of the following is an example of a CSS property name and value?
font-size: 16px;
color { blue; }
selector { font: Arial; }
h1 { }
Examine the code and identify which type of CSS is used:
What type of CSS is applied to the <h1> element?
External CSS
Internal CSS
Inline CSS
No CSS is applied
Examine the code and identify which type of CSS is used:
What type of CSS is used to style the <p> element?
External CSS
Internal CSS
Inline CSS
No CSS is applied
Examine the code and identify which type of CSS is used:
What type of CSS is used to style the <h1> element?
External CSS
Internal CSS
Inline CSS
No CSS is applied
Examine the code and identify which type of CSS is used:
What type of CSS is used for the <p> element?
External CSS
Internal CSS
Inline CSS
No CSS is applied
Examine the code and identify which type of CSS is used:
What type of CSS is applied to the <h1> element?
External CSS
Internal CSS
Inline CSS
No CSS is applied
Examine the code and identify which type of CSS is used:
What type of CSS is applied to the <h1> element?
External CSS
Internal CSS
Inline CSS
No CSS is applied
Examine the code and identify which type of CSS is used:
What type of CSS is used for the <h1> element?
External CSS
Internal CSS
Inline CSS
No CSS is applied
Examine the code and identify which type of CSS is used:
What type of CSS is used for the <h1> element?
External CSS
Internal CSS
Inline CSS
No CSS is applied
Examine the code and identify which type of CSS is used:
What type of CSS is used for the <h1> element?
External CSS
Internal CSS
Inline CSS
No CSS is applied
Examine the code and identify which type of CSS is used:
What type of CSS is used to style the <p> element?
External CSS
Internal CSS
Inline CSS
Both Internal and Inline CSS
What type of CSS selector is used for the #header rule?
Element Selector
ID Selector
Class Selector
Universal Selector
What type of CSS selector is used for the .navbar rule?
Element Selector
ID Selector
Class Selector
Universal Selector
Grouping
What type of CSS selector is used for the #footer rule?
Element Selector
ID Selector
Class Selector
Universal Selector
Grouping
What type of CSS selector is used for the p rule?
Element Selector
ID Selector
Class Selector
Universal Selector
Grouping
What type of CSS selector is used for the #main-content rule?
Element Selector
ID Selector
Class Selector
Universal Selector
Grouping
What type of CSS selector is used for the #main-content rule?
Element Selector
ID Selector
Class Selector
Universal Selector
Grouping
What type of CSS selector is used for the * rule?
Element Selector
ID Selector
Class Selector
Universal Selector
Grouping
What type of CSS selector is used for the rule?
Element Selector
ID Selector
Class Selector
Universal Selector
Grouping
Which of the following is the correct syntax for a CSS rule?
color: red; { body }
body { color: red; }
body ( color: red )
{ color: red; } body
What does a CSS declaration block contain?
The property and its value
The selector
The HTML element
The color scheme
