CSS Basics Flashcards
(15 cards)
What does CSS stand for and what is its primary purpose?
CSS stands for Cascading Style Sheet. It is used to style webpages and set how the page will look. CSS uses HTML markup to apply specific styles to different elements.
Write the basic syntax structure for CSS styling.
selector { property: value; property: value; } - Selector targets the element - Properties and values are inside curly braces - Each property-value pair ends with semicolon
What are the three main types of CSS selectors and give an example of each?
- Element selector: body { background-color: lightblue; } 2. Class selector: .highlight { background-color: yellow; } 3. ID selector: #special { color: red; font-size: 20px; }
How do you target an HTML element by its class name in CSS?
Use a dot (.) before the class name. Example: .highlight { background-color: yellow; font-weight: bold; } - This targets all elements with class=’highlight’
How do you target an HTML element by its ID in CSS?
Use a hash (#) before the ID name. Example: #special { color: red; font-size: 20px; } - This targets the element with id=’special’
What are pseudo-classes and what is their syntax structure?
Pseudo-classes are added after selectors to change styling only in specific situations. Syntax: selector:pseudo-class { property: value; } - They represent events happening on or to the element.
Write CSS code that changes a button’s background to dark blue when the mouse hovers over it.
“.my-button:hover { background-color: darkblue; } - :hover pseudo-class triggers when mouse is over the element - Applies only to elements with class ‘my-button’”
Write CSS code that makes a button shrink slightly and turn navy when clicked.
“.my-button:active { background-color: navy; transform: scale(0.95); } - :active pseudo-class triggers when element is clicked - transform: scale(0.95) shrinks to 95% size”
What’s the difference between :hover and :active pseudo-classes?
:hover triggers when mouse is hovering over element (mouse over). :active triggers when element is being clicked/pressed (mouse down). :hover is for mouse presence, :active is for interaction.
Fix this CSS code: body background-color: lightblue
body { background-color: lightblue; } - Missing opening curly brace after selector - Missing closing curly brace after property - Missing semicolon after property value
You want to style all paragraph elements to have red text. Write the CSS.
p { color: red; } - Use element selector ‘p’ to target all paragraph elements - ‘color’ property controls text color
What’s wrong with this CSS? .my-class { color red; font-size: 16px }
Missing colon after ‘color’ property and missing semicolon after ‘red’ value. Should be: .my-class { color: red; font-size: 16px; } - Also missing final semicolon is bad practice.
How would you make a class called ‘warning’ have yellow background and bold text?
“.warning { background-color: yellow; font-weight: bold; } - Use class selector with dot - background-color for background - font-weight: bold for bold text”
Write CSS that makes an element with ID ‘header’ have a font size of 24px and blue color.
header { font-size: 24px; color: blue; } - Use ID selector with hash - font-size property for text size - color property for text color
What happens when you use CSS without HTML markup?
CSS cannot work without HTML markup because CSS uses HTML elements, classes, and IDs as targets for styling. CSS needs the HTML structure to know which elements to style.
