Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

TM252 > Week 4 - CSS > Flashcards

Week 4 - CSS Flashcards

Covers all CSS taught in week 4 (56 cards)

Start Studying
1
Q

What is CSS and why is it important?

A

CSS (Cascading Style Sheets) controls the look and feel of HTML elements. It manages layout, colors, fonts, and responsiveness, transforming plain content into visually engaging, user-friendly websites.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Why should you learn CSS?

A

CSS is a core web development skill. It enables you to design responsive, professional-looking websites that function well across devices. It’s essential for front-end development and widely used in the industry.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

How did CSS originate and evolve over time?

A

CSS was created in the mid-1990s to separate content from design. CSS1 introduced basic styling, CSS2/2.1 added layout and browser support, and CSS3 modularized features, allowing faster, independent updates.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Why doesn’t CSS use traditional version numbers anymore?

A

Modern CSS is modular. Instead of major version releases, individual modules like Flexbox or Grid are updated separately, making CSS more flexible and quicker to evolve.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What are the three main ways to add CSS to a webpage?

A

Inline: Style written directly in HTML tags (e.g., <p style="color: blue">) — quick but messy.

Internal: CSS in a <style> tag in the <head> — good for one-page styles.</style>

External: A separate .css file linked to HTML — clean, reusable, best for multi-page or team projects.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

When should you use inline, internal, or external CSS?

A

Use inline styles for small, one-off tweaks.

Use internal styles for small single-page sites.

Use external stylesheets for large, scalable, or team-based projects.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How do you create and link an external stylesheet?

A

Create a .css file (e.g., styles.css).

Write your CSS rules in it.

In your HTML <head>, add:

<link></link>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Why are external stylesheets preferred for most projects?

A

They keep code clean and maintainable, allow reuse across pages, support responsive design via media queries, improve loading speed through caching, and enable teamwork by separating concerns.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What steps should you follow to implement external stylesheets properly?

A

Plan your design.

Choose a code editor.

Organize folders (HTML, CSS, images).

Create styles.css.

Write clean, sectioned CSS.

Add media queries for responsiveness.

Minify for performance.

Upload via FTP/host.

Link in HTML <head>.

Test on browsers/devices.

Keep CSS updated and clean.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What are the pros and cons of using separate CSS files for each section of a website?

A

Modular, easier to manage, ideal for team collaboration.
Cons: Can lead to duplication and clutter if too many files exist.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the purpose of a global CSS file?

A

To apply consistent styles across multiple HTML pages.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

How do you link a CSS file to an HTML page?

A

Using the <link></link> tag:

<link></link>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What’s a common folder structure for organizing a web project?

A

/project-folder
├── index.html
├── css/
│ ├── global.css
│ └── home.css
└── images/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the basic structure of a CSS rule?

A

selector {
property: value;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

How do you combine selectors to apply the same style?

A

Separate them with commas, e.g.,
h1, h2 {
color: blue;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

How do you write a comment in CSS?

A

/* This is a comment */

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

How do you select all <p> elements?

A

p

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

How do you select elements with a class named highlight?

A

.highlight

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

How do you select an element with ID main?

A

main

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What selector targets an input element of type “text”?

A

[type=”text”]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What does the :hover pseudo-class do?

A

Applies styles when the user hovers over an element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What is the order of CSS rule precedence (from lowest to highest)?

A

Browser default → external → internal → inline → !important

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is the specificity of an ID selector?

24
Q

Which has higher specificity: a class or an element selector?

Study These Flashcards
A

A class selector.

25
How do you force a property to override all others?
Use !important, e.g., color: red !important;
26
Are all properties inherited in CSS?
No, only some (like color, font). Others must be explicitly set or inherited using inherit.
27
How do you define red using RGB?
rgb(255, 0, 0)
28
What is the HEX code for black?
#000000
29
How do you make a semi-transparent blue using RGBA?
rgba(0, 0, 255, 0.5)
30
What does HSL stand for?
Hue, Saturation, Lightness
31
How do you add a background image?
background-image: url("image.jpg");
32
What property prevents a background image from repeating?
background-repeat: no-repeat;
33
How do you make a background image cover the entire element?
background-size: cover;
34
What does background-attachment: fixed do?
It keeps the background fixed while scrolling.
35
Write a shorthand background declaration for a fixed, centered image.
background: url("img.jpg") no-repeat center/cover fixed;
36
Why use the shorthand background property in CSS?
It allows you to define multiple background properties—like image, position, size, repeat, and color—in one line, reducing repetition and keeping your code cleaner and more efficient.
37
When should you use longhand background properties instead of shorthand?
Use longhand when you need precise control or want to change just one aspect of the background. It’s especially helpful for debugging or in team projects where clarity is important.
38
What are the two main types of HTML lists and when are they used?
Ordered lists (
    ) are used when order matters (numbered items), while unordered lists (
      ) are used when order doesn’t matter (bulleted items).
39
How can you style list markers using CSS?
Use list-style-type (e.g., circle, square, decimal), list-style-image to use custom images, and list-style-position to control marker placement (inside or outside the content box).
40
How do you add spacing and readability to list items?
Use margin and padding on
  • elements, and line-height (e.g., 1.6) to improve readability. Background color and borders can also enhance visual structure.
    • 41
    What are the five CSS pseudo-classes for hyperlink states and in what order should they appear?
    Use :link, :visited, :focus, :hover, :active—in that specific LVFHA order to ensure styles are applied correctly without being overridden.
    42
    What CSS properties can you use to style links effectively?
    You can use color, text-decoration, background-color, font-weight, and border to control appearance and interactivity.
    43
    How can CSS help control the size and responsiveness of images?
    Use width, height, max-width, and max-height to control dimensions and responsiveness.
    44
    What properties adjust how images fit and display inside their containers?
    Use object-fit (like cover or contain) and object-position for alignment inside the element box.
    45
    How can you enhance images visually using CSS?
    Use border, border-radius, box-shadow, filter (e.g., grayscale, blur), and z-index for layering.
    46
    What are the four parts of the CSS box model?
    Content (inner text/image), Padding (space around content), Border (edge around padding), and Margin (space outside the border).
    47
    How is the total element width calculated using the box model?
    Total Width = Content + Padding + Border + Margin.
    48
    What are some advanced background properties in CSS?
    background-size (e.g., cover), background-clip (border-box, padding-box, content-box), background-repeat, and background-position.
    49
    How does box-shadow enhance layout design?
    It creates depth and a lifted appearance by applying shadow effects using horizontal and vertical offsets, blur radius, and color.
    50
    What's the difference between display: none and visibility: hidden?
    display: none hides the element and removes it from the layout, while visibility: hidden makes the element invisible but keeps its space in the layout.
    51
    What’s the purpose of inline, block, and inline-block display values?
    block starts on a new line and fills the width; inline flows within text without width/height control; inline-block combines inline flow with the ability to set dimensions.
    52
    How can you make HTML tables cleaner and easier to read?
    Use border-collapse: collapse, add borders and padding to /, and use background colors for headers and alternate rows.
    53
    How do you improve table usability and responsiveness?
    Add row hover effects with :hover, apply :nth-child(even) for zebra striping, and use wrappers with overflow-x: auto for mobile responsiveness.
    54
    How can you improve the layout and appearance of form inputs?
    Use padding, full width (width: 100%), border styling, and margin spacing for inputs. Style labels to be readable and clearly associated with inputs.
    55
    What is the purpose of
    and in forms?
    groups related form elements, and provides a caption. Styling both helps create a clear, user-friendly structure.
    56
    How can you style submit buttons for better UX?
    Apply padding, a background color with hover effect, border-radius for soft corners, and a cursor pointer for interactivity.

    TM252 (7 decks)

    Brainscape helps you reach your goals faster, through stronger study habits.
    © 2025 Bold Learning Solutions. Terms and Conditions