css html tutorial code example
Example: css
CSS has the rules that apply to selected elements on the page
a rule combines a selector with style properties
p { color:green; } unless overwritten
by a more specific rule (specificity)
or a rule that comes after this one (precedence)
... all paragraphs on the page wil be green
there are 270 + properties ... color, position, height, width
each can have different TYPES of values...
color ...red, rgb(), rgba(), #rgb/#rrggbb, #rgba/#rrggbbaa, hsl(), and hsla().
Silly built-in names like aliceblue as well. see: https://css-tricks.com/converting-color-spaces-in-javascript/
size ... px(pixels), x%, em(blah blah blah... etc etc)
"selectors" : p #theId .theClass
gettiing a selector to target exactly the element(s) you want is an art
which must take into account two things...
Precedence and Specificity.
Precedence is determined by when the rule is defined. The last rule wins.
Specificity is determined by how specificly the selector is defined
a general selector would be all <p> Elements
in the markup language of css, that would look like this...
div { color:red; }
a more SPECIFIC selector would look like this
div span { color: blue; }
and target span elements inside div elements
<div> text outside the span is red <span> text inside is blue </span> </div>
Inline styles that are added directly to an element...
<p style="font-weight: bold;"> </p>
always overwrite any styles in external stylesheets, ie: highest specificity.
Style can also be added in the <head> portion of the page
Style can be added by stylesheets... .css files.