Doss2k Technical Documentation Page Example

Introduction

What is CSS?

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just one file!

CSS How To

Three Ways to Insert CSS

External style sheet
Internal style sheet
Inline style

External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the link element. The link element goes inside the head section like below:


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

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Here is how the "mystyle.css" looks:


            body {
                background-color: lightblue;
            }
                      
            h1 {
                color: navy;
                margin-left: 20px;
            }

CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

Color Names

In HTML, a color can be specified by using a color name such as:

Orange

Red

Green

Example:


            <p style="color:orange;">Orange</p>
            <p style="color:red;">Red</p>
            <p style="color:green;">Green</p>

CSS Borders

CSS Border Properties

The CSS border properties allow you to specify the style, width, and color of an element's border.

Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

Examples below:


        p.one {
            border-style: solid;
            border-width: 5px;
        }
                  
        p.two {
            border-style: solid;
            border-width: medium;
        }
                  
        p.three {
            border-style: solid;
            border-width: 2px 10px 4px 20px;
        }

Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

name - specify a color name, like "red"
Hex - specify a hex value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
transparent

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

If border-color is not set, it inherits the color of the element.

Examples:


        p.one {
            border-style: solid;
            border-color: red;
        }
                  
        p.two {
            border-style: solid;
            border-color: green;
        }
                  
        p.three {
            border-style: solid;
            border-color: red green blue yellow;
        }

CSS Text

Text Color

The color property is used to set the color of the text. The color is specified by:

a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

The default text color for a page is defined in the body selector.

Examples:


        body {
            color: blue;
        }
                      
        h1 {
            color: green;
        }

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):

The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):

Examples:


        h1 {
            text-align: center;
        }
                  
        h2 {
            text-align: left;
        }
                  
        h3 {
            text-align: right;
        }
        div {
            text-align: justify;
        }

Reference

All the documentation in this page is taken from w3schools CSS Page.