Chapter 10: Introducing CSS Flashcards
(18 cards)
CSS works by associating ____ with HTML elements which govern how content of specified elements should be displayed
rules
A CSS rule contains two parts: a ____ and a _____
selection, declaration
p {
font-family: Arial;}
p is the selecto, the rest is the declaration
CSS declaration sit inside curly brackets and each is made up of two parts, a ____ and a _____ separated by _____
property, value, colon
The ____ element can be used in an HTML document to tell the browser where to find the CSS file used to style the page
<link></link>
This specifies the path the to CSS file
href
This attirbute specifies the type of document being linked to
type
This epcifies the relationship between the HTML page and the file it is linked to
rel
You can also include CSS rules within an HTML page by placing them inside _____ element which usually sits inside the _____ element of the page
<style>
, <head></style>
Universal selector
Applies to all elements in the document
Ex: *{}
Type Selector
Matches element Names
h1, h2, h3 {}
Targets the <h1>, <h2> and <h3>
elements
Class Selector
Matches an element whose
class attribute has a value that
matches the one specified after
the period (or full stop) symbol
.note {}
Targets any element whose class
attribute has a value of note
p.note {}
Targets only <p> elements
whose class attribute has a
value of note
ID Selector
introduction {}
Matches an element whose
id attribute has a value that
matches the one specified after
the pound or hash symbol
Targets the element whose
id attribute has a value of
introduction
Child Selector
Matches an element that is adirect child of another
li>a {}
Targets any <a> elements that
are children of an <li> element
(but not other <a> elements in
the page)</a></a>
Descendant Selector
Matches an element that is a descendent of another specified element (not just a direct child of that element)
p a {}
Targets any <a> elements that
sit inside a <p> element, even if
there are other elements nested
between them</a>
Adjacent Sibling
Selector
Matches an element that is the next sibling of another
h1+p {}
Targets the first <p> element
after any <h1> element (but not
other <p> elements)
General Sibling
Selector
Matches an element that is a sibling of another, although it does not have to be the directly preceding element
h1~p {}
If you had two <p> elements that
are siblings of an <h1> element,
this rule would apply to both
