Learning Code

Creating & Linking Your Style Sheet

To create your style sheet (css code page), you can go to File → New in Brackets. A blank file will be created. Save this file, naming it something like style.css (.css at the end of the name is the important part). Make sure that the file is saved in the folder for your website.

Next, back in your HTML page, go to the head section and add the following (line 5 in the picture):

CSS Syntax

The most basic syntax for css is: selector {property: value;}
You can have multiple properties and values: selector {property: value; property: value;} or selector {property: value value;}
There can also be multiple selectors for a style (a comma is placed inbetween each selector): selector, selector {property: value;}

At its most basic, we can use CSS to choose our own font styles and colors. Though CSS is capable of changing a lot more!

Colors

Background colors are changed with the background-color property. Text colors are changed with the color property.

section {background-color: black;}
p {color: red;}

While there are many types of selectors, an easy strategy is to use the element name - then anywhere that element is used in the HTML, the CSS style will be used also.

Fonts

The font itself is set with the font-family property. The values are usually a list, so that if the first font isn't available there is a fallback. The list usually ends with a generic font family (serif, sans-serif, monospace, fantasy). This way something from a general category can be used in the case that none of the other fonts are available.

The font size is set with the font-size property. The unit is usually px or em (1 em = 16px). font-weight, font-variant, and font-style are other font specific properties.

section {
	font-family: "Times New Roman", Arial, Monospace;
	font-size: 20px;
	font-weight: 800;
	font-variant: small-caps;
	font-style: italic;
	}