CSS syntax primer
CSS legal name must begin with ... a letter(a-z), followed by any number of dashes, underscores, letters, or numbers.
Note while CSS is not case sensitive, try to use only lower case.
CSS class groups similar elements; e.g. all tables used for laying out pictures could have <table class"=PicClass"...
CSS id selects specific item e.g. a tables used for laying out a video could have <table class"=picclass" id="YouTubeVideo"...
CSS div groups together chunks of web page
e.g. <div id="navigation"> groups together all left side of page
e.g. <div id="content"> groups together all rest of page
CSS element {declaration;}
e.g. h2 {font-size: 1.5em;}
CSS element {declaration1; ... declarationn;}
e.g. h2
{
color: green;
font-size: 1.5em;
font-weight: bold;
font-family: sans-serif;
}
CSS element1, ... elementn {declaration;}
e.g. h2, h3, h4
{color: green;}
CSS element1 ... elementn {declaration;}
e.g.£site-map
{
background-position: 0px -322px;
height: 100%;
}
e.g.£site-map h4
{
font-size: 1em;
font-weight: bold;
}
e.g.£site-map li
{
list-style-type: none;
padding: 0;
}
e.g.£site-map li ul
{
font-size: 0.75em;
font-family: sans-serif;
margin: 0;
padding: 0;
}
CSS element.class
e.g. p.intro {margin-left: 2em; }
where "p" is the element and
"intro" is the class
so this refers to the paragraphs with the class "intro"
CSS element£id
e.g. p£firstname
where "p" is the element and
"firstname" is the id
so this refers to the paragraphs with the id "firstname"
Selector Example Selects
.class .intro all elements with class="intro"
£id £firstname the element with id="firstname"
* * all elements
element p all <p> elements
element,element div,p all <div> elements and all <p> elements
element element div p all <p> elements inside <div> elements
element>element div>p all <p> elements where the parent is a <div> element
element+element div+p all <p> elements that are placed immediately after <div> elements
[attribute] [target] all elements with a target attribute
[attribute=value] [target=_blank] all elements with target="_blank"
[attribute~=value] [title~=flower] all elements with a title attribute containing the word "flower"
[attribute|=value] [lang|=en] all elements with a lang attribute value starting with "en"
:link a:link all unvisited links
:visited a:visited all visited links
:active a:active the active link
:hover a:hover links on mouse over
:focus input:focus the input element which has focus
LAST UPDATED: 02 February 2018 (Bluetooth File Transfer)