CSS (Cascading Style Sheets) is the code you use to style your webpage. CSS basics takes you through what you need to get started. We'll answer questions like: How do I make my text black or red? How do I make my content show up in such-and-such a place on the screen? How do I decorate my webpage with background images and colors?

Like HTML, CSS is not really a programming language. It is not a markup language either — it is a style sheet language. This means that it lets you apply styles selectively to elements in HTML documents. For example, to select all the paragraph elements on an HTML page and turn the text within them red, you'd write this CSS:

                p {
                  color: red;
                }
              

This whole structure is called a rule set (but often "rule" for short). Note the names of the individual parts:

• Selector

  • The HTML element name at the start of the rule set. It selects the element(s) to be styled. To style a different element, just change the selector.

• Declaration

  • A single rule like color: red; specifying which of the element's properties you want to style.

• Properties

  • Ways in which you can style a given HTML element.

• Property value

  • To the right of the property, after the colon, we have the property value, which chooses one out of many possible appearances for a given property

Other important parts of the syntax:

• Each rule set (apart from the selector) must be wrapped in curly braces ({}).

• Within each declaration, you must use a colon (:) to separate the property from its values.

• Within each rule set, you must use a semicolon (;) to separate each declaration from the next one.

                p {
                  color: red;
                  width: 500px;
                  border: 1px solid black;
                }
              

The font CSS property is a shorthand for font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family. Alternatively, it sets an element's font to a system font.

                html {
                  font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high  */
                  font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google fonts */
                }
              

This rule first sets a global base font and font size for the whole page (since html is the parent element of the whole page, and all elements inside it inherit the same font-size and font-family)

                h1 {
                  font-size: 60px;
                  text-align: center;
                }

                p, li {
                  font-size: 16px;
                  line-height: 2;
                  letter-spacing: 1px;
                }
              

Centering the text, setting a line height and letter spacing will make the body content much more readable. Adjusting the px value can increase or decrease your text to any desire you wish it to be.

                html {
                  color: blue;
                }
              

Along with changing the font and size, you can also apply a different color to all your text. The example above, shows that the color of all text, in the html, will be blue.

One thing you'll notice about writing CSS is that a lot of it is about boxes — setting their size, color, position, etc. Most of the HTML elements on your page can be thought of as boxes sitting on top of each other.

CSS layout is based principally on the box model. Each of the blocks taking up space on your page has properties like this:

• Padding

  • The space just around the content (e.g., around paragraph text).

• Border

  • The solid line that sits just outside the padding.

• Margin

  • The space around the outside of the element.

All the content in this documentation can be found from the CSS Basics Documentation Page