CSS Documentation

Introduction

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

There are three ways of inserting a style sheet:

Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the <head> section.

External CSS
<link rel="stylesheet" href="mystyle.css">
The internal style is defined inside the <style> element, inside the <head> section.
Internal CSS
To use inline styles, add the style attribute to the relevant html element. The style attribute can contain any CSS property.
Inline CSS
<h1 style="color:blue;text-align:center;">This is a heading </h1>

Syntax

A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

body { 

                     color: black; 

                     font-family: Helvetica;

                    }

Example explenation:

body is the selector and it points to the respective html element.
color and font-family are properties.
black and Helvetica are property values.

Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

Check also the CSS Selector Reference table.

Responsive Web Design

Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device.

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

Media query is a CSS technique introduced in CSS3. Media queries are used to make a webpage responsive.

An example of a media query:


                    @media only screen and (max-width: 600px) { 

                         body { 

                         background-color: lightblue; 

                        } 

                  }

TIf the browser window is 600px or smaller, the background color will be black.

Follow the link to learn more about Responsive Web Design.

CSS Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
A grid layout consists of a parent element, with one or more child elements.


                    <div class="grid-container"> 

                      <div class="item">1</div> 

                      <div class="item">2</div> 

                      <div class="item">3</div> 

                    </div>

An HTML element becomes a grid container when its display property is set to grid or inline-grid.


                    .grid.container { 

                      display: grid; 

                     }

Follow the link to learn more about CSS Grid.

Code snippets

This section includes code that I use in my stylesheets.

The first ruleset applies border box sizing to the root element and the second ruleset tells all other elements and pseudo-elements to inherit their box sizing:


                    :root { 

                         box-sizing: border-box; 
 
                         } 


            
                *, 

                ::before, 

                ::after { 

                     box-sizing: inherit; 

                     }

This ruleset overrides the default margin and padding values of the browser:


                    body {

                         margin: 0;

                         padding: 0;

                }