Getting Started: CSS Basics

Understanding CSS Syntax

0
Understanding CSS Syntax
What is Syntax? Syntax is the string of code that makes up CSS,

What makes up CSS?
You need to have a basic understanding of HTML

How does CSS link to HTML?
CSS is made up of two main parts:

The Selector - e.g. h1, p, .header, #main content
One or more declarations – e.g. {background-color: #000000; background-image: url (image.jpg); background-repeat: no-repeat;}
The selector name is used to call the selector with the same name in the CSS document.

e.g. HTML document
Forum Image

Each declaration consists of a property and a value.

The property is the style attribute you want to change. Each property has a value.

e.g. CSS document
Forum Image

In this example background-image is the property of the Declaration and the value is the image.

Attention to detail when writing CSS is very important

CSS declarations always end with a semicolon
Background-color: #ffffff;

Declaration groups are always surrounded by curly brackets
{ background-color: #ffffff; font: arial; }

Comments in CSS
You can make helpful comments in HTML, so why not CSS? Well you can and they can be helpful if you ever need to go back and edit your CSS.

A CSS comment begins with /* and ends with */ like this:
/*This is your comment*/
0
Excellent guide for CSS selectors:

http://www.w3.org/TR/CSS2/selector.html

From that page, a modified list of selectors:

  • * Matches any element.
  • E Matches any E element.
  • .E Matches any E class.
  • E.F Matches any E element with an F class.
  • #E Matches any E ID.
  • E F Matches any F element that is a descendant of an E element.
  • E > F Matches any F element that is a child of an element E.
  • E:first-child Matches element E when E is the first child of its parent.
  • E:link Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited.
  • E:visited Matches element E if E is the source anchor of a hyperlink of which the target is already visited.
  • E:active Matches E during mouse selection.
  • E:hover Matches E during mouse cursor hover.
  • E:focus Matches E during keyboard selection hover.
  • E + F Matches any F element immediately preceded by a sibling element E.
  • E[atr] Matches any E element with the attribute "atr".
  • E[atr="value"] Matches any E element whose "atr" attribute value is exactly equal to "value".
  • E[atr~="value"] Matches any E element whose "atr" attribute value is a list of space-separated values, with one exactly equal to "value".
 
Hammerfist Clan [HFC]
Last Forum Posts
TopicAuthorPostedReplies
User Comment ImageView in Descending Ordertest by GL_Support4574 days ago2 Replies
User Comment ImageView in Descending OrderCreate a Custom Splash Page by cipher_nemo5077 days ago0 Replies
User Comment ImageView in Descending OrderHow to upload custom CSS using a file by cipher_nemo5082 days ago1 Replies
User Comment ImageView in Descending OrderUnderstanding CSS Syntax by cipher_nemo5082 days ago1 Replies
User Comment ImageView in Descending OrderWhy everyone who codes should use Firebug in Firefox by cipher_nemo5082 days ago1 Replies
Last Forum Post RSS Feed
No FB Yes FB Hand (smaller) Lap 40.063em Desk 64.063em Wall 90.063em