View source for M1 Introduction to CSS

== CSS (Cascading Style Sheets) ==


Notice that we haven't said a word about how things look yet.  This is because that is what CSS is for!

CSS stands for ''Cascading Style Sheets'', and it defines the ''appearance'' of your page.  CSS is composed of ''rules'', and each rule consists of a ''selector'' and one or more ''declarations''.  Let's see an example:

<source lang="css">
header {
	color: blue;
	font-family: Verdana, sans-serif;
}
</source>

The above CSS rule does three things:

* It ''selects'' all <code><nowiki><header></nowiki></code> elements
* It ''declares'' the ''property'' '''color''' (i.e. the text color) of the selected elements to be blue
* It ''declares'' the ''property'' '''font-family''' (i.e. the font "face") of the selected elements to be Verdana, or alternatively any sans-serif font if Verdana is not available

All CSS rules follow this general format.  The following sections will discuss more detail on CSS selectors and declarations.

=== Selectors ===

{{DoctypeTV
|youtube_id=W9H95NcbTSw
|time=5m27s
|desc=CSS Selectors, Part 1
}}

In the previous section's example, the most basic CSS selector was used: selecting by the ''tag name''.  To select by the ''class name'', use a period, like so:

<source lang="css">
.info {
	font-weight: bold;
}
</source>

{{DoctypeTV
|youtube_id=0a4r4bm1nQA
|time=1m29s
|desc=CSS Selectors, Part 2
}}

A third common way to select an element is by its ID.  To select by ID, use a number sign, like so:

<source lang="css">
#medal_table {
	border-collapse: collapse;
}
</source>

Selectors can be combined.  For example, to select all hyperlinks in any paragraph having the class "alert", you could do:

<source lang="css">
p.alert a {
	font-style: italic;
}
</source>

The <code>p.alert</code> selects all <code><nowiki><p></nowiki></code> tags with the class name "alert".  The space tells CSS to look for all descendants of such paragraphs.  Finally, the <code>a</code> selects all <code><nowiki><a></nowiki></code> elements in the resulting set.

It is also very common to use a right-angle bracket to select a ''child'' rather than a ''descendant'', the distinction being that ''descendants'' could be nested at any depth: child, grandchild, and so on, while a ''child'' must be at the next level down in the DOM.  For example:

<source lang="css">
ul.fruits > li {
	text-decoration: underline;
}
</source>

Some common CSS selectors are listed below.  For a complete list of CSS selectors, see [https://www.w3.org/TR/CSS/#selectors section 4.2 of the CSS Specification].

* '''foo''' selects an element with tag name ''foo''
* '''.foo''' selects an element with the class name ''foo''
* '''#foo''' selects an element with the ID ''foo''
* '''[foo="bar"]''' selects an element with the attribute ''foo'' whose value is ''bar''
* '''foo bar''' selects an element matching ''bar'' that is a descendant of an element matching ''foo''
* '''foo > bar''' selects an element matching ''car'' that is a child of an element matching ''foo''
* '''foo + bar''' selects an element matching ''bar'' that is the next sibling of an element matching ''foo''


==== Pseudo-Classes ====

Elements can also be selected based on their current state using ''pseudo-classes''.  Pseudo-classes always begin with a colon.  For example, this is how you could change the color of all visited links on your web page:

<source lang="css">
a:visited {
	color: #99FF99; /* this example uses a hexadecimal RGB definition for the color, which allows you to
		mix over 16 million colors */
}
</source>

Some common pseudo-classes are listed below.  For a complete list, see [https://www.w3.org/TR/CSS/#selectors section 4.2 of the CSS Specification].

* '''foo:first-child''' selects an element matching ''foo'' that is the first child of its parent (i.e., any ''foo'' that doesn't have older siblings)
* '''foo:last-child''' selects an element matching ''foo'' that is the last child of its parent
* '''foo:empty''' selects any element matching ''foo'' that has no children
* Pseudo-Classes for Form Elements:
** '''input:checked''' selects all checkboxes and radio buttons that are checked
* Pseudo-Classes for Hyperlink Elements:
** '''a:link''' selects all hyperlinks that have not been visited yet
** '''a:visited''' selects all hyperlinks that have been visited
* Pseudo-Classes for Interactive Elements (like buttons, hyperlinks, etc):
** '''foo:active''' selects elements matching ''foo'' that are being pressed on
** '''foo:hover''' selects elements matching ''foo'' that are being hovered over
** '''foo:focus''' selects elements matching ''foo'' that are selected (no pun intended)

=== Properties ===

Selectors are used to select elements that need to have styles applied to them, and properties are used to actually define those styles.  Throughout this section, you've seen properties including '''color''', '''font-family''', '''font-style''', and '''text-decoration'''.  There are dozens more properties you can define, some of which are listed below.

For a complete list of CSS properties, see [https://www.w3.org/TR/CSS/#properties section 4.1 of the CSS Specification].

* '''background-image''' sets the background image of an element.  Usage: <code>background-image: url(path/to/image.png);</code>
* '''background-color''' sets the background color of an element (note: the image takes precedence over the color; the color will be displayed if the image can't be found)
* For Tables:
** '''border-collapse''' removes the spacing between table cells.  Usage: <code>border-collapse: collapse;</code>
** Note: You can select td elements that are grandchildren of a table element, and then specify border properties on the td's, like this: <code>#myTable > tr > td { border: 1px solid black; }</code>
* '''border''' defines the border around an element.  Usage: <code>border: 1px dashed red;</code>
* '''border-radius''' lets you have rounded corners on your elements
* '''float''' makes the text of a document flow around the element.  Usage: <code>float: left;</code> (or <code>right</code>)
** '''clear''' makes an element stop wrapping around floats and instead move down to where the floats end.  Usage: <code>clear: both;</code>
** Note: If you specify multiple object in a for as floating, they will appear next to each other horizontally.
* '''cursor''' lets you change the type of cursor that appears then your element is in focus.  Example usage: <code>cursor: pointer;</code>
* '''font''' lets you specify the font-size, line-height, and font-family in one fell swoop.  Usage: <code>font: 14px/18px Verdana, Arial, sans-serif;</code>
* '''list-style-type''' specifies the type of number or bullet used on <code><nowiki><ol></nowiki></code>'s and <code><nowiki><ul></nowiki></code>'s
* '''text-align''' lets you justify text on the left, center, or right
* '''display''' lets us specify an element as inline or block (see below), and it also enables us to "turn off" an element from being displayed on a page.  Example usage: <code>display: none;</code>

==== Units ====

Some CSS properties require that you specify numerical values for things (font-size, line-height, border-width, and so on).  CSS supports a number of units, the most common of which include:

* '''px''', which defines a distance in pixels (relative to screen resolution).
* '''em''', which defines a distance relative to font size.  (Note: an ''em'' is the width of the capital letter M.  No, I'm not kidding.)
* '''rem''', which defines a distance relative to the font size of the root element.  Compare to '''em''', which defines a distance relative to the font size of the current element (which might have a different font size than the document root).
* '''pt''', which is a traditional print unit equal to 1/72 of an inch (should appear the same size on all screens regardless of resolution).
* '''%''', which defines a distance relative to that property of its parent element.  For the most part, you'll only use % when working with the Box Model (see below).

=== The Box Model ===

For the most part, all elements fall into one of two categories:

* Inline (Examples: a, span, strong)
* Block (Examples: p, div, section)

The properties we've seen thus far apply mostly to inline elements.  As it turns out, CSS has an additional set of properties that describe block elements.  These properties compose the ''box model''.

While inline elements flow with the text, block elements stand on their own.  You can define the space between the block element and the next closest element on the page using ''margin'', the block element's border using ''border'', and the space between the block element's border and its content using ''padding'':

[[File:Box.png]]

For example, you could make a padded box that is centered on the page using this CSS:

<source lang="css">
div.box {
	width: 500px;
	margin: 0 auto; /* when two "arguments" are passed to margin or padding, the first defines top
		and bottom margin/padding and the second defines left and right margin/padding */
	padding: 25px; /* when only one "argument" is passed to margin or padding, it defines the
		margin/padding on all four sides */
	border: 1px solid black; /* the 1px defines the border-width; the solid defines the border-style;
		the black defines the border-color */
}
</source>

Here is what the resulting box looks like:

[[File:CSSBoxExample.png]]

Note that the ''width'' defines only the ''content width''.  To compute the actual "width" of the element, you need to add the left and right padding border, and margin.

This is only scraping the surface of the CSS box model.  All advanced web sites utilize the box model to its full extent to produce the complex layouts you have come to expect on the internet.  For more information on the CSS box model, read [https://www.w3.org/TR/css3-box/ the W3C specification].

=== Typography ===

Traditionally, Web developers were limited to a small subset of fonts that were commonly installed on all computers:

* Andale Mono
* Arial
* Arial Black
* Comic Sans MS
* Courier New
* Georgia
* Impact
* Times New Roman
* Trebuchet MS
* Verdana
* Webdings

That was it.  Incredibly limiting.

However, fonts other than these are used widely on the Web.  How?  CSS has evolved to the point where it now allows you to upload a font to your server, and use that font on your site, or even include CSS from another server that adds the fonts you want. One excellent resource for a wide variety of 
fast, appropriately-licensed fonts is [https://fonts.google.com/ Google Fonts].


== Using HTML and CSS in your Web Page ==

Recall that HTML defines the ''content'' of your page, while CSS defines the ''appearance''.

Most of the HTML you write will be in the <code><body></code> tag, because, naturally, this is where the ''content'' of your page should reside.  CSS, on the other hand, is supplemental to the content, and so it should be included in the <code><head></code> tag, as shown in the following section.

=== How to Include CSS ===

There are three options for using CSS in your web page:

# Loading external stylesheets
# Embedding stylesheets in the document
# Inline styles using the style attribute

The first option is almost always preferred in production applications for the following reasons:

* Browsers can cache external stylesheets, so once they've loaded the stylesheet once, they won't have to load it again, making future pages load faster and reducing requests to your server
* External stylesheets are more modular; that is, they can be included in multiple pages on your web site without the need for copying and pasting embedded stylesheets

To include external stylesheets in your document, place the following empty HTML tag in your <code><head></code>:

<source lang="html4strict">
<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css" />
</source>


It may be convenient during development to use embedded stylesheets, because then you don't have to click back and forth between files in your IDE and clear your browser cache.  You may place embedded stylesheets in a <code><style></code> tag, also in your <code><head></code>:

<source lang="html4strict">
<style type="text/css">
styles {
	go: here;
}
</style>
</source>


For a variety of reasons, inline styles should almost always be avoided.  Instead of using inline styles, give your element a CSS class, and assign styles to that class in your stylesheet:

<source lang="css">
p.notice {
	color: blue;
}
</source>
<source lang="html4strict">
<p class="notice">Well done using classes instead of inline styles!</p>
</source>


Just so you know it when you see it, the following example shows the usage of inline styles, which are declared using the '''style''' attribute.

<source lang="html4strict">
<p style="color:red;">You'd better think twice about using inline styles.</p>
</source>

=== Quick and Easy Page Layout ===

I like to use the following code when I just want a simple, aesthetically pleasing web page:

<source lang="html4strict">
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>My Web Page</title>
<style type="text/css">
body{
	width: 760px; /* how wide to make your web page */
	background-color: teal; /* what color to make the background */
	margin: 0 auto;
	padding: 0;
	font:12px/16px Verdana, sans-serif; /* default font */
}
div#main{
	background-color: #FFF;
	margin: 0;
	padding: 10px;
}
</style>
</head>
<body><div id="main">

<!-- CONTENT HERE -->

</div></body>
</html>
</source>

Put your document where the <code><nowiki><!-- CONTENT HERE --></nowiki></code> is.  Your page will go instantly from dull-looking to presentable. ;-)

=== The HTML5 Shiv ===

Some browsers (*cough cough* IE < version 9) do strange things when you apply CSS styles to the newest HTML elements that were introduced with HTML5.  Fortunately, there is a painless solution.  Simply include the following code in your '''<head>''' tag:

<source lang="html4strict">
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</source>

This so-called '''HTML5 Shiv''' will make older versions of Internet Explorer render your pages more closely to how modern browsers do.