Web Technologies > CSS > Flashcards

CSS Flashcards

(87 cards)

Study These Flashcards
1
Q

Q: What does CSS stand for?

A

A: Cascading Style Sheets — a language used to describe how HTML elements should be displayed.

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

Q: What is the main purpose of CSS?

A

A: To separate presentation and design from HTML structure and content.

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

Q: Who created CSS?

A

A: The World Wide Web Consortium (W3C).

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

Q: Why separate structure (HTML) and presentation (CSS)?

A

A: It improves modularity, reusability, and maintainability of web pages.

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

Q: What is a stylesheet?

A

A: A document or section containing CSS rules that define how HTML elements are styled.

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

Q: How do you link a CSS file to an HTML document?

A

A: <link></link>

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

Q: What is the basic syntax of a CSS rule?

A

A: selector { property: value; }

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

Q: What is a selector in CSS?

A

A: The part of a rule that identifies which HTML elements the style applies to.

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

Q: What is a property in CSS?

A

A: The visual aspect you want to style, such as color, font-size, or margin.

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

Q: What is a value in CSS?

A

A: The setting for the property, e.g., color: red; font-size: 16px;

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

Q: Example of a CSS rule:

A

A: The setting for the property, e.g., color: red; font-size: 16px;

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

Q: Example of a CSS rule:

A

A: p { color: blue; font-size: 16px; }

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

Q: What file extension do CSS files use?

A

A: .css

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

Q: What are the three main ways to apply CSS?

A

A: Inline styles, document-level (internal) styles, and external stylesheets.

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

Q: Which method of applying CSS is preferred?

A

A: External stylesheets — they can be reused across multiple pages.

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

Q: What type of styling do browsers apply if no CSS is used?

A

A: Default user-agent styles (built-in browser formatting).

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

Q: What does the term “cascading” refer to in CSS?

A

A: The order of priority that determines which styles take effect when multiple rules apply.

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

Q: Why is CSS important?

A

A: It controls layout, colors, fonts, and spacing, creating visually appealing and consistent web pages.

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

Q: What symbol is used to end a CSS declaration?

A

A: A semicolon ( ; )

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

Q: What must all property-value pairs be enclosed in?

A

A: Curly braces { }

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

Q: What is a type (element) selector?

A

A: Targets all elements of a given type, e.g. p { color: blue; }

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

Q: What does a class selector do?

A

A: Targets all elements with a specific class attribute: .menu { color: red; }

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

Q: How is a class applied in HTML?

A

A: <p class="menu">Item</p>

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

Q: What does an id selector do?

A

A: Targets the element with a specific id: #header { background: gray; }

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q: How should id values be used in a document?
A: They must be unique — only one element should use a given id.
26
Q: What does the universal selector (*) do?
A: Matches all elements on the page.
27
Q: What is a descendant selector (E F)?
A: Targets elements F that are inside element E: div p { color: green; }
28
Q: What is an attribute selector?
A: Selects elements based on attributes, e.g. [title] or [type="text"]
29
Q: Example of selecting inputs with a specific type:
A: input[type="text"] { border: 1px solid black; }
30
Q: What does E.warning mean?
A: Any element E with class="warning"
31
Q: What does E#myid mean?
A: Element E with id="myid"
32
Q: Can selectors be combined?
A: Yes, separated by commas: h1, h2, h3 { color: blue; }
33
Q: What does .class1.class2 mean?
A: An element that has both class1 and class2 assigned.
34
Q: What selector targets elements inside others?
A: Descendant selectors (E F)
35
Q: What is the difference between .menu and #menu?
A: .menu targets a class; #menu targets an id.
36
Q: How can you select all paragraphs inside divs?
A: div p { … }
37
Q: How can you select all links inside navigation bars?
A: nav a { … }
38
Q: What does the space in “E F” mean?
A: It indicates F is nested anywhere within E.
39
Q: Can you select elements with multiple conditions?
A: Yes, e.g. input[type="text"].active
40
Q: Which property sets text color?
A: color
41
Q: Which property sets background color?
A: background-color
42
Q: How do you set the font family?
A: font-family: Verdana, Arial, sans-serif;
43
Q: How do you make text bold?
A: font-weight: bold;
44
Q: How do you italicize text?
A: font-style: italic;
45
Q: How do you set the font size?
A: font-size: 16px;
46
Q: Which property changes text alignment?
A: text-align: center;
47
Q: How do you set margins around an element?
A: margin: 10px;
48
Q: How do you set padding inside an element?
A: padding: 20px;
49
Q: Which property controls element width?
A: width: 200px;
50
Q: Which property controls element height?
A: height: 100px;
51
Q: How do you set the border of an element?
A: border: 1px solid black;
52
Q: What are common color formats in CSS?
A: Named colors (red), hex (#ff0000), rgb(255,0,0), rgba(255,0,0,0.5)
53
Q: What does font-family: Verdana, Arial, sans-serif mean?
A: Use Verdana if available, otherwise Arial, otherwise any sans-serif font.
54
Q: How do you make an image centered horizontally?
A: display: block; margin-left: auto; margin-right: auto;
55
Q: How do you remove underlines from links?
A: a { text-decoration: none; }
56
Q: Which property controls spacing between lines of text?
A: line-height
57
Q: Which property sets outer spacing vs inner spacing?
A: margin controls outer space, padding controls inner space.
58
Q: How do you make text uppercase?
A: text-transform: uppercase;
59
Q: What are inline styles?
A: CSS rules added directly in an element’s style attribute.
60
Q: Example of inline style:
A:

Warning!

61
Q: What are document-level (internal) styles?
A: CSS rules written inside
63
Q: What are external stylesheets?
A: Separate .css files linked to HTML using .
64
Q: Example of linking an external stylesheet:
A:
65
Q: Which CSS method is most reusable?
A: External stylesheets.
66
Q: Which CSS method has the highest specificity?
A: Inline styles.
67
Q: Can multiple style sheets be used in one page?
A: Yes, browsers combine (cascade) them.
68
Q: In what order does CSS apply styles?
A: Inline → internal → external → browser defaults.
69
Q: How can you override browser defaults?
A: By specifying styles explicitly in CSS.
70
Q: Where should