2. CSS Basics
CSS is used to control the style and layout of web pages.
CSS3 is the latest standard for CSS.
Selector {
declaration:
}
Property: Value
Imagine there is an invisible box around every HTML
element. CSS allows you to create rules that control the
way that each individual box (and the contents of that
box) is presented.
Block level elements <h1>-<h6>, <p> and <div> elements
Inline elements <b>, <i>, <img>, <em> and <span>.
3. Important Selectors to Know
*
#X
.X
X Y
X
X:visited and X:link
. X + Y
X > Y
4. External and Internal CSS
Link
The link element can be used in an HTML document to tell the
browser where to find the CSS file used to style the page.
Ex: <link href =“css.styles.css” type=“text/css” rel=“stylesheet”
Style
CSS rules are included within an HTML page by placing them inside a
style element.
The value should be text/CSS
5. Pseudo-Classes: Attribute
Selectors
E[foo^="bar"]
an element whose "foo" attribute value
begins exactly with the string "bar"
E[foo$="bar"]
an element whose "foo" attribute value
ends exactly with the string "bar"
E[foo*="bar"]
an element whose "foo" attribute value
contains the substring "bar"
Block level elements look like they start on a new line, while inline elements flow within the text and do not start on a new line. Example styles: width and height, borders (color, width, and style), background color and images.Selectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.Declarations indicate how the elements referred to in a selector should be styled. Properties indicate the aspects of the element you want to change, and values specify the settings you want to use for the chosen properties. (ie color: yellow;)
#X=id.X= classX Y= descendent selector (ie: li a)X = type selectorWe use the :link pseudo-class to target all anchors tags which have yet to be clicked on.Alternatively, we also have the :visited pseudo class, which, as you’d expected, allows us to apply specific styling to only the anchor tags on the page which have been clicked on, or visitedThis is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.The difference between the standard X Y and X > Y is that the latter will only select direct children. For example, consider the following markup.
Block level elements look like they start on a new line, while inline elements flow within the text and do not start on a new line. Example styles: width and height, borders (color, width, and style), background color and images.Selectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.Declarations indicate how the elements referred to in a selector should be styled. Properties indicate the aspects of the element you want to change, and values specify the settings you want to use for the chosen properties. (ie color: yellow;)
:nth-child pseudo-class selectorEver want to style a table so that every other row was a different color?Or have a gallery of images so that each row is 3 images wide?:nth-child pseudo-class is used to style every 2nd, 3rd, 4th, or "nth" element