Getting Started: CSS Basics
Understanding CSS Syntax
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
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
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*/
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
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
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*/
Excellent guide for CSS selectors:
http://www.w3.org/TR/CSS2/selector.html
From that page, a modified list of 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".
| Topic | Author | Posted | Replies |
|---|---|---|---|
  test | by GL_Support | 4996 days ago | 2 Replies |
| Create a Custom Splash Page | by cipher_nemo | 5500 days ago | 0 Replies |
| How to upload custom CSS using a file | by cipher_nemo | 5505 days ago | 1 Replies |
| Understanding CSS Syntax | by cipher_nemo | 5505 days ago | 1 Replies |
| Why everyone who codes should use Firebug in Firefox | by cipher_nemo | 5505 days ago | 1 Replies |
