CSS Flashcards
Selector
points to the html element you want to style
In this example, "p" is the selector:
p {
color: red;
text-align: center;
}
Selector types
Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element like the first letter or first line)
Attribute selectors (select elements based on an attribute or attribute value, like all the ones with a “target” attribute)
ID Selector
para1 {
uses the id attribute of an HTML element to select a specific element
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
text-align: center;
color: red;
}
Class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
.center {
text-align: center;
color: red;
}
Explain the three main ways to apply CSS styles to a web page.
External - load a css file using the tag; 3. external - use a `` tag to load an external file
Use this to separate CSS and HTML, to update multiple pages at once, facilitate maintenance of large websites.
Internal - use the tag inside the <head> section; This modifies only the page that includes it. Use it when making changes to a single document or when creating a standalone page.
Inline - use the style attribute; use inline styles for quick changes, to override the main stylesheet, or when you can’t access stylesheet
How do you target something inside or around another element?
class inside a class:
.nav .nav-item { ... }
class immediately inside a class:
.nav > .nav-item { ... }
next to:
.button + .button { … }
What are pseudo elements and what are they used for?
Pseudo elements are used to style particular parts of an element, rather than the whole thing. For example, you can use it to style the first line or first letter of a paragraph, text you’ve selected, or you can use it to insert text or shapes before or after an element.
p::first-line { … }
What are pseudo classes and what are they used for?
they apply styles when an element is in a certain state. For example, you could style a button differently based on whether the user has their mouse pointer over it, or when they click the button.
.link:hover { … }
Another common use case is to style only certain occurrences of elements in a row. For example, styling the first tab in a series of tabs, or every second tab
.tab:first-child { … }
