CSS Documentation
Introduction Pre-Requisites What Is Css Applying CSS What Are Selectors Properties And Values Organization
Introduction

CSS (Cascading Style Sheets) is the next language you should learn after HTML. Where HTML gives your page structure, CSS provides the layout and style. Cascading Style Sheets give you the ability to alter the font, control the spacing, all the way up to adding animation.

This documentation is intended to be a short, beginner friendly introduction to CSS. Moving forawrd, we will cover some pre-requisites, how to apply your CSS, different selectors, properties and values, and some organizational tips.

Pre-Requisites

Prior to venturing into CSS you should have:

What Is CSS

CSS (Cascading Style Sheets) is a rule based language that is defined by specifying groups of styles that get applied to specific elements or even groups of elements on your web page. CSS gives you the ability to make amazing looking web pages by specifying how a document is layed out and styled.

Applying CSS

There are three ways you can add CSS you your document, the most common and practical is to link an external stylesheet. Next you can apply it in a style section, in the head section of the document itself. Lastly we have inline styles, which is done by adding a style attribute to an individual HTML element, this is NOT considered best practice.

  1. External StyleSheets

    Let's start with applying CSS with external stylesheets. You will need to add it in the head (<head></head>) section. First you will need to add the link tag with a relationship and location in the rel and href properties respectively.

    It should look like this: 

    
                    <head>
                        <link rel="stylessheet" href="styles.css" />
                    </head>

    Remember, it must be placed inside the head section. To actually see some style take effect, let's add something to your CSS. Inside your styles.css file, add the following code: 

    
                    body {
                        background-color: yellow;    
                    }

    Now, save both files and reload your page, the background should be yellow. If it is not, simply make sure everything is typed correctly and that the CSS file is linked correctly inside the head section.

  2. Style Section

    Next we will look at adding your styles to a style setion in the head section of the document, also called internal stylesheets.

    This will look somethin like this: 

    
                    <head>
                        <style>
                            body {
                                background-color: yellow;
                            }

                            h1 {
                                color: purple;
                            }
                        </style>
                    </head>

    There are times when using an internal stylesheet can be useful, maybe you just need a quick jist of some style to use while working on your project before doing the main stylesheet. There may also be situations where you are blocked from modifying the external stylesheets, like when working with content management systems.

    The downside to internal stylesheets is you would need one for every page. For bigger sites, this could quickly become inconvenient for maintenance amd updating.

  3. Inline Styles

    The last way we will look at add CSS to a project is using inline styles. Inline styles are typically applied with a style attribute, and only affect the HTML element applied to.

    Using inline styles will look something like this: 

    
                    <!DOCTYPE html>
                    <html lang="en">
                        <head>
                            <meta charset="utf-8" />
                            <title>My CSS Tech Doc</title>
                        </head>
                        <body>
                            <h1 style="color: white; background-color: charcoal;">Inline Styles</h1>
                            <p style="color: blue;">This is how you apply inline styles</p>
                        </body>
                    </html>

    As you can see this gets messy quickly and is NOT considered best practice. You may see this used if you have a very strict work environment, like a content management system that only allows editing of the HTML body. May also be used in emails to achieve compatibility with more clients.

What Are Selectors

The first part of a CSS rule is the CSS selector. Selectors will tell the browser which HTML element to apply the CSS rule to. There are several different selectors, they are; type, class, ID, attribute, pseudo-class, pseudo-element, and combinators.

Properties And Values

All of CSS works by matching declarations, which are property and value pairs, to their intended element of a page. Properties have certain value types they are allowed, some can use multiple types. First we will go over some common value types and units like numeric, color, image, and position. Then we will look at some commonly used CSS properties in which you would see such values.

Organization

There is no right or wrong way to organize your CSS, though inline styles is considered not best practice, the biggest key is consistency. Having a consistent set of rules will help save time and mental overhead, thus deciding on indentation, naming convention, and file structure beforehand can help. For structure, it cam be helpful to comment your code so you can easily see what each section of styles applies to. Also it wouldn't hurt to structure styles with all of your default styles first, then utilities (action styles), then page specific (market page vs settings page), and then item or componjent specific if needed. With this you should have a basic understanding of how to start styling and structuring your page, go experiment with your own code and see what you can do.