Introduction to CSS | Learning to Code

What is CSS?

CSS (Cascading Style Sheets) is a language that is intended to be used in conjunction with HTML and other structured document formats, such as XML.
CSS controls presentation of information and is not concerned with its structure.
Structure is determined by HTML.
CSS, on its own, is never going to be enough for a viable website or application. It has to be used in conjunction with markup / tagging.
Each instruction for a given tag or tags in CSS is referred to as a rule. The following is a rule:
```
h1 {font-size: 16px;}
```
Content in every <h1> tag in your document should now be 16 pixels tall.
Each rule contains selectors and declarations.
- Selectors specify what will be affected by the CSS
- Declarations specify what the presentation will be.
In the prior example these are:

Selector: h1
Declaration: font-size: 16px
The declaration breaks down further, into property: value pairs. In the prior example these are:
Property: font-size
Value: 16px
CSS Syntax:
- The declarations are always inside a single set of curly braces: { }
- Follow each property with a colon.
- If there are two (or more) words in a property name, they are always separated by hyphens.
- Follow every declaration with a semicolon, as that indicates the end of one and the beginning of the next.
- While it is technically not necessary to include a semicolon if only a single declaration is given, it is good coding style to still supply the semicolon, to prevent potential issues when styles are added down the road (future coders maintaining your code will appreciate it).
Any tag that is valid within <body> (including <body> itself) can be used as a selector.
As long as the browser recognizes the tag (and it is located inside <body>), it should respond to CSS.
Multiple property: value pairs can be specified; there is no limit to the number of declarations.

Grouping Selectors

The example given previously involved just one selector (h1), but what if you wanted to apply the same declaration(s) to more than one selector?
The solution is to separate the selectors with commas. Each comma instructs the device reading the styles that another selector is being specified that will also use the declaration(s).
In this example both <p> and <td> are being told to render their content at a size of 12 pixels:
```
p, td {font-size: 12px;}
```
This is more streamlined and efficient than the following (the two code examples have the same effect):
```
p {font-size: 12px;}
td {font-size: 12px;}
```
Sequence of the selectors makes no difference. It could be:
```
p, td {font-size: 12px;}
```
or:
```
td, p {font-size: 12px;}
```

Contextual Selectors

A contextual selector is one that will only come into effect when a specific pattern of nesting tags is followed.
What creates the context is the use of a space between the selectors. The space indicates that the next element is a child (immediately nested within) or descendant (nested any number of levels) of the previous element.
Consider this example:
```
td p {font-size: 12px;}
```

Only text that is inside a paragraph, which is itself inside a table data cell, will be 12 pixels in size.

<td>
  This text is inside a td but is not inside a paragraph so it does not use the CSS.
  <p>This text is inside a paragraph that is also inside a td, so it uses the CSS.</p>
</td>

What you are styling in a contextual setup is the content inside the very last element / tag (the one furthest to the right).
The other elements listed establish the context for that final element in the selector.
Why use contextual selectors? They allow us to pinpoint changes to specific areas of a document, rather than applying styles to every instance of a particular element. Assuming that your document is structured properly, these can be extremely useful.
You can also have selectors that involve grouping as well as contextualization (because CSS is very flexible):
```
div p strong em, div blockquote a {font-size: 12px;}
```
Important:
- Contextual selectors do not require that the indicated tags be nested immediately within each other (a parent-child relationship), although that works.
- As long as the nesting occurs somewhere along the line (a descendant relationship), the CSS will work. Of course, the nesting must follow the indicated sequence or nothing will happen.

CSS Comments

CSS comments are enclosed in /* */, which distinguishes them from the  HTML comments
```
/* This is a sample CSS comment */
```

Validating Your CSS

The W3C has a validator for CSS at jigsaw.w3.org/css-validator/

CSS Troubleshooting

Browsers have an inspector tool built in that allows you to click on a tag/element in a code view and see all the styles that are applied, as well as the ones being overridden.
You can also edit those styles in the inspector to experiment with the rendering. Just be sure to copy/paste or otherwise save that modified styling if you want to use it going forward, because the changes are only in your version of the page and will not be seen by others or persist over time.
The inspector tool is launched through right-clicking on the page rendering area where you want to investigate or experiment and selecting 'Inspect' or 'Inspect Element' (exact phrasing and capitalization varies by browser). Pressing F12 will generally also launch the inspector.
This video provides a walkthrough of how this tool can be used: