CSS

Cascading Style Sheets (CSS) tells the web browser how the page should appear. Without CSS all web pages would look very similar and boring. Color, typography, sizing, and layout can all be altered using CSS to create a visually appealing web page. CSS is essential to creating a well designed web page. The benefit is that with proper CSS all changes can be made once and in a single location for the entire website.

Linking

CSS styles are normally saved as external style sheets (.css files) and are linked in the HTML document inside the

            <head> </head>
            

tag with this line of code:

            <link rel="stylesheet" type="text/css" href="mystyle.css">
            

The name of your CSS file is put inside the href.

Syntax

A CSS rule consists of a selector and a declaration. The selector is generally the HTML element to be modified and the declaration is made up of a property and a value.

Selectors

On top of the already existing HTML selectors, an ID or class can be used to create your own selectors. When using an ID selector a "#" is placed before the name in the CSS style sheet.

For example:

HTML

            <section id="information">
            <p>Information goes here.</p>
            </section>
            

CSS

            #information {
            color: black;
            }

When using a class selector a "." is placed before the name in the CSS style sheet.

For Example:

HTML

            <section class="information">
            <p>Information goes here.</p>
            </section>
            

CSS

            .information {
            color: black;
            }

Styling

Many elements of a web page can be styled using CSS. The background can be modified by adding a color or using an image as a background. Text color, alignment, and font options can easily be modified with CSS. Some examples are shown below.

Background:

            body {
            background-color: #000000;
            }
            Page {
            background-image: url ('image.jpg');
            }

Text:

            body {
            font-family: "Times New Roman", Times, serif;
            color: #FFFFFF;
            text-align: center;
            text-decoration: underline;
            }

Links, lists, and tables can be altered as well. The spacing around objects include both the margin and the padding. The margin is outside the border of an element and the padding is the space inside the border of an element. The positioning of an element on the page along with the margin and padding can be changed using CSS.

The capabilities of CSS are vast and there are many more things that can be done with this language. A newer version, CSS3, along with an extension of CSS, SASS, are available that open even more options.

More examples and references can be found at www.w3schools.com/css.