10 Introducing CSS and Selectors Flashcards
What are the 3 parts to a CSS rule?
selector and declaration
Select element
define how it should be styled
A declaration contains a property and a value
So you basically select an element, you select a property to change, then you set the value.
Use a css style sheet
<link rel=”stylesheet” href=”” type=”text/css” />
What is the format of the ‘type’ attribute in a link tag?
It's a mimetype type/subtype ex: text/css image/apng image/avif
An html page can have multiple stylesheets
t or f
T
create a series of css rules for a page (not linked, not inline)
<style type=”text/css”>
h1 {color:red;}
p {color:blue;}
</style>
create an inline css rule
< p style=”color:red; more”>
Do a universal selector (all elements on page)
- { }
Select by element type
Select multiple elements by types
h3 { }
h1, h2, h3 { }
elementtype {}
Select a class
.classname {}
Select a class within a certain element type
h1. classname {}
elementtype. classname {}
select an id
idname {}
select an id within a certain element type
h1#idname {}
elementtype#idname {}
select an id within a certain class and element type
h1#idname.classname {}
or
h1.classname#idname
order doesn’t matter
select target elements that are DIRECT children of another
parent>child
no spaces
Targeting children works with other chained elements
t or f
ex:
p#b>span.c {
color: red;
}
T
Target all direct children of another element
div>*
What happens with this code? <style> div#b>div.c { color: red; } </style>
<div id="b"> fsad <div class="a"> afds <div class="c"> afds </div> </div> </div>
nothing
> only targets direct children
Target the specific children/grandchildren of the specific element
div#b div.c {
color: red;
}
What style is changed
<style type=”text/css”>
div#a div#b>div {
color: red;
}
</style>
<div id="a"> asdfasfd <div> asdfasfd <div id="b"> asdfasfd <div> asdfasfd </div> </div> </div> </div>
the div child of div#b
Target the immediate next sibling only
h1+p {}
Target all next siblings
h1~p {}
Which divs are affected by the style? div#b+div { color: red; } <divid="a"> aaa </div> <div id="b"> aaa </div> <div id="c"> aaa </div> <div id="d"> aaa </div> <divid="e"> aaa </div>
c
What happens if two styles define the same element?
if two have have the same precedence, whichever was process most recently is used.
Which of these specificty rules are true h1 is more specific than * p is more specific than p b p#intro is more specific than p class is more specific than id
t
F
t
F
, but only if it is the */ /* only
element inside its parent */ p:only-of-type { background-color: lime; }
```