WorksheetsWeb Design Standard 5: CSS Styling Techniques Quiz
Total questions: 10
Worksheet time: 5mins
Which of the following best describes the difference between an inline style and an external style sheet in CSS?
Inline styles are written in a separate file, while external style sheets are written within the HTML tag.
Inline styles are applied directly to HTML elements using the "style" attribute, while external style sheets are linked to the HTML file and stored separately.
Inline styles can only be used for text formatting, while external style sheets can only be used for layout.
Inline styles are used for JavaScript, while external style sheets are used for HTML.
Given the following CSS selector, what elements will be affected? ```css nav ul li a { color: blue; } ```
All anchor tags in the document
All anchor tags that are inside a list item within an unordered list inside a nav element
All unordered lists inside a nav element
All list items inside a nav element
Which of the following is the correct way to link an external CSS file named "styles.css" to your HTML document?
<link type="text/css" href="style.css">
<link rel="stylesheet" href="style.css">
<href="style.css">
<link rel="stylesheet" type="text/css" href="style.css">
A web designer wants to ensure that the text size on their website adjusts relative to the user's browser settings. Which CSS unit should they use for font size?
px
em or rem
cm
in
You are given a web page where the text overflows its container. Using CSS, how would you create a region to manage the text flow and prevent overflow?
Use `overflow: visible;`
Use `overflow: hidden;` or `overflow: auto;` on the container
Use `display: none;`
Use `position: absolute;`
You are designing a portfolio website and want to use both a header-located style and an external style sheet. How would you ensure that the external style sheet styles are applied, but can be overridden by styles in the header?
Place the external style sheet link after the header style block
Place the header style block after the external style sheet link
Use only the external style sheet
Use only the header style block
You are tasked with creating a navigation bar where the background color of the navigation links changes when hovered over. Which CSS selector and property would you use?
`nav a:active { background-color: red; }`
`nav a:hover { background-color: red; }`
`nav a:visited { background-color: red; }`
`nav a:focus { background-color: red; }`
A client wants their website to be accessible and readable on all devices. How would you use CSS to ensure that text size and layout adapt to different screen sizes?
Use fixed pixel values for all elements
Use relative units (em, rem, %) and media queries to adjust styles based on screen size
Use only inline styles
Use only absolute positioning
You are preparing to upload your completed web pages to your online career portfolio. Which of the following steps is most important to ensure your CSS files are correctly linked and displayed?
Only upload the HTML files
Upload both the HTML and CSS files, and verify the file paths in the HTML link tags
Upload only the CSS files
Use inline styles for all elements
Given the following CSS code, what will be the background color of the <div> element?
```div { background-color: red; } div:hover { background-color: blue; } ```
Red
Blue
Red when hovered, Blue otherwise
Blue when hovered, Red otherwise
