CSS CHAPTER 10
What element can you use to include CSS rules within an HTML page (internal CSS):
<style>
How to envision HTML when writing CSS:
Envision there is an invisible box around every html element. CSS allows you to create rules that control the way that each individual box (and contents of that box) is presented.
Specificity Rule for Precedence
If one selector is more specific than the others, the more specific rule will take precedence over more general ones.
Last Rule Precedence
If the two selectors are identical, the latter of the two will take precedence.
What does the declaration rule do:
Indicates how the elements referred to in the selector should be styled.
Where does the <link> element live?
Inside the head element of html.
What does the selector rule do:
It indicates which element the rule applies to. ********The same rule can apply to more than one element if you separate the element names with commas.
A CSS rule contains two parts:
Selector, declaration
What does the <link> element do and how should it be used:
Tells the browser where to find the CSS file used to style the page and is used with the HTML code. It is an empty element.
Inherit value code and meaning:
You can force a lot of properties to inherit values from their parent elements by using inherit for the value of the properties.
Important precedence rule and code:
add !important after any property value to indicate that is should be considered more important than other rules that apply to the same element.
Universal selector
applies to all elements in the document. * {} targets all elements on the page.
h1, h6, p, div elements are examples of block or inline?
block
How do separate several properties in one declaration?
by a semi-colon ;
How are declaration parts split:
by using a colon :
What kind of brackets do CSS declarations sit inside of?
curly brackets { }
h1, h2, h3 {font-family: arial} What is each?
h1,h2,h3 is the selector. font-family is the declaration property. arial is the declaration value.
<link> element has 3 attributes:
href. type. rel.
What does the property declaration do:
indicates the aspects of the element you want to change.
b, i, img, em, or span elements are examples of block or inline?
inline
where does the <style> element live:
inside the <head>
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.
Child selector
matches an element that is a direct child of another. li>a {} targets any <a> elements that are children of an <li> element (but not other <a> elements in the page).
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.
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)
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
matches an element whose id attribute has a value that matches the once specified after the pound or hash symbol. #introduction {} targets the element whose id attribute has a value of introduction.
Type selector
matches element names. h1, h2, h3 {} targets the <h1>, <h2>, and <h3> elements.
Declarations are split into two parts:
property, value
What does the href attribute do in the <link> element:
specifies the path to the CSS file.
What does the rel attribute do in the <link> element and what should be its value:
specifies the relationship between the HTML page and the file it is linked to. The value should be stylesheet when linking to a CSS file.
What does the value declaration do:
specifies the settings you want to use for the chosen properties.
What does the type attribute do in the <link> element and what should be its value:
specifies the type of document being linked to. The value should be text/css.
