css learning website code example

Example 1: css

/* Answer to "css" */

/*
  Cascading Style Sheets (CSS) is a style sheet language used for
  describing the presentation of a document written in a
  markup language like HTML.

  In other words, it's the style of the website.

  For example, the positioning of everything on a website or
  the colour, shape, size of a button. Every design on a
  website is most likely made using css.
*/

Example 2: 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.

Tags:

Css Example

Recent Posts