Week 4 - CSS Flashcards
Covers all CSS taught in week 4 (56 cards)
What is CSS and why is it important?
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.
Why should you learn CSS?
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 did CSS originate and evolve over time?
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.
Why doesn’t CSS use traditional version numbers anymore?
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.
What are the three main ways to add CSS to a webpage?
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.
When should you use inline, internal, or external CSS?
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 do you create and link an external stylesheet?
Create a .css file (e.g., styles.css).
Write your CSS rules in it.
In your HTML <head>, add:
<link></link>
Why are external stylesheets preferred for most projects?
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.
What steps should you follow to implement external stylesheets properly?
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.
What are the pros and cons of using separate CSS files for each section of a website?
Modular, easier to manage, ideal for team collaboration.
Cons: Can lead to duplication and clutter if too many files exist.
What is the purpose of a global CSS file?
To apply consistent styles across multiple HTML pages.
How do you link a CSS file to an HTML page?
Using the <link></link> tag:
<link></link>
What’s a common folder structure for organizing a web project?
/project-folder
├── index.html
├── css/
│ ├── global.css
│ └── home.css
└── images/
What is the basic structure of a CSS rule?
selector {
property: value;
}
How do you combine selectors to apply the same style?
Separate them with commas, e.g.,
h1, h2 {
color: blue;
}
How do you write a comment in CSS?
/* This is a comment */
How do you select all <p> elements?
p
How do you select elements with a class named highlight?
.highlight
How do you select an element with ID main?
main
What selector targets an input element of type “text”?
[type=”text”]
What does the :hover pseudo-class do?
Applies styles when the user hovers over an element.
What is the order of CSS rule precedence (from lowest to highest)?
Browser default → external → internal → inline → !important
What is the specificity of an ID selector?
100
Which has higher specificity: a class or an element selector?
A class selector.
- ) are used when order matters (numbered items), while unordered lists (
- ) are used when order doesn’t matter (bulleted items).
-
Key Links
-
Subjects
-
Company
-
Find Us
-
