Guide to Basic CSS

CSS stands for Cascading Style Sheet; Generally used for website layout and design and can be extended with Sass/Less that allow you to use variables and conditionals. Provides additional options/rules for how images and text is displayed. It is a style language and not a programming language. They use Class followed but Subclass.

The syntax follows [p {color:blue;}] and would function like adjectives.

Flexbox is a CSS3 layout mode that allows you to allign elements really quickly.

Basic Selectors

Element Selector - specified HTMLelement; p{ color:blue:}
ID selector - element on page with specified ID, only one element per ID on page; #heading{ font-size:35px:}
```
<p id=”quote”> - you need to assign the id as an attribute in the html file
```

Class Selector - specified class element. Multiple instances allowed;

.para{ fontsize: 17px:}
            < class=”para”> needs to be in the html element.

Grouping selectors - multiple elements separated by a comma
* symbol implies ALL elements; *{background-color: yellow;}

CSS Box Model

The box that wraps around every HTML element, box model refers to design and layout. You can right click the elements and inspect them.
Padding Properties: generates space around the element. Everything is the same except you cannot use auto or negative values.

Components: Margin - space around outside of the element
Border - solid line that sits outside the padding
Padding - the space around the content
Content - the text images and content that appear

How Margin Values are applied:

One - all four sides
Two - first applies to top and bottom, second applies to right and left
Three - first goes to top, second to left & right, third to bottom
Four - apply in this order: top, right, bottom, left

You can set the margin value to auto and it will adjust and react with the website.

Example:

        p{
            margin-top:5px;
            margin-bottom:10px;
            margin-right;15px;
            margin-left:20px;        
        }

which is the same as the following:

        p{
            margin: 5px 15px 10px 20px;        
        }

Margin Properties: can be positive, zero, or negative

Length - size of the margin as a fixed value
Percentage - margin size relative to the width of the containing block
Interit - specifies that the margin inherits from the parent element
Auto - browser selects a suitable margin to use

Methods for Adding CSS

Styles - attributes that add styles to an element such as color, font, size and more.

You can apply CSS externally, internally, and inline.

Inline - by using the style attribute inside HTML elements. This method is not generally used by developers and is considered bad practice as the code is not clean, scalable, or practical.
```
 Example: 
            <h1 style="color:blue;">A Blue Heading</h1>
            
```

Internal - by using a <style> element in the <head> section. These make the code messy but its good if you have a single webpage. To make an internal CSS;

                <style>
                p {
                    color: blue;
                }
                </style>

 
                Example: 
                    <head>
                    <style>
                    body {background-color: powderblue;}
                    h1   {color: blue;}
                    p    {color: red;}
                    </style>
                    </head>

External - by using a <link> element to link to an external CSS file referenced and located generally in a stylesheets folder directory. This is a good one to use when you have to do multiple web pages and want to use only one style sheet to affect the relevant pages.
Example: Create a .css file in stylesheets with at least the following
```
                p {     - Selector for type 
                color: blue;    - Property: property value; This is considered a declaration.
                }            
            
```
```
                Example External CSS
                    p,li {      - Separate multiple elements with a “,”
                    color: blue;
                    font-size:30px;
                    border: 1px solid red;
                    }            
            
```
In the actual html index file, the following needs to be included in the header; <link href="stylesheets/mystyle.css" rel="stylesheet" type="text/css">

Note*: To link a external style sheet, you need to create a link, reference it, define the relationship, then define the type; This always has to be in the head section so it will load with the page. This is a good one to use when you have to do multiple web pages and want to use only one style sheet to affect the relevant pages.

Note**: To add comments to the CSS file, enclose it with a '/*' & '*/'
```
 
                Example: 
                    <head>
                        <link rel="stylesheet" href="styles.css">
                    </head>
            
```
External “styles.css” reference file.
```
                body {background-color: powderblue;}
                h1 {color: blue;}
                p {color: red;}
            
```

CSS Background-color Property

Used to change or specify the background color of an element. Valid color name or Hex value: #ff0000

                <body style="background-color:powderblue;">
                    <h1 style="background-color:DodgerBlue;">Hello World</h1>
                    <p style="background-color:Tomato;">Lorem ipsum...</p>

Text color is used for headings and paragraphs.

Example 1:

<h3 style="color:blue;">This is a heading</h3>

Which displays the following:

This is a heading

Example 2:

<p style="color:DodgerBlue;">Lorem ipsum...</p>

Which displays the following:

Lorem ipsum...

CSS Border Style property

Allows you to define the border for an element by specifying the style, width, and color.
Border-Style specifies what kind of border to display; dotted, dashes, solid
Border - set width of border and type of border and color.

Examples:

<h1 style="border:2px solid Tomato;">Hello World</h1>

<h1 style="border:2px solid DodgerBlue;">Hello World</h1>

<h1 style="border:2px solid Violet;">Hello World</h1>

Which displays the following

Hello World

Hello World

Hello World

CSS Positioning & Styling Page Title

padding: 0px 10px;
margin: 0px;
text-shadow: 5px 4px 8px gray;
**the order is horizontal position, vertical position, then blurr then shadow color.

text-align and font-family follow the same formatting as setting text color.

text size is based on percentage and defines the text size for the HTML element.

Which displays the following

This is a paragraph.

Color Values - In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

RGB - rgb(255, 99, 71)

<h1 style="background-color:rgb(255, 99, 71);">...</h1>

Which displays the following

...

HEX - #ff6347

<h1 style="background-color:#ff6347;">...</h1>

Which displays the following

...

HSL - hsl(9, 100%, 64%)

<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

Which displays the following

...

RGBA - rgba(255, 99, 71, 0.5)

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

Which displays the following

...

HSLA - hsla(9, 100%, 64%, 0.5)

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Which displays the following

...

CSS Display property

Display property specifies how an element is displayed, can be used to control layout. Every HTML element has a default display value depending on the type of element. Default display for most elements are block or inline

Block level elements will always start on a new line and occupies the full width available. <p>, <div>, <h1-h6>

Inline elements do not start on a new line and only occupies width required. <a> & <img>

CSS Font Property

font-style is mainly used to make text italic

font-weight is to set the text to bold. Values are typically 100s or bold presets

font-size is to set the size of the text

font-family - when doing font-family, you would want more than just the default font in case the default font is not available and separate it by commas, such as: Arial, Helvetica, Times;
The main difference between serif and sans-serif is that serif letter text have hooks on their letters and sans-serif outputs flat or smooth letters

Arial (sans-serif), which displays as;
Example: Lorem ipsum dolor sit amet, consectetur adipiscing elit,
Verdana (sans-serif), which displays as;
Example: sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Helvetica (sans-serif), which displays as;
Example: Ut enim ad minim veniam, quis nostrud exercitation
Tahoma (sans-serif), which displays as;
Example: ullamco laboris nisi ut aliquip ex ea commodo consequat.
Trebuchet MS (sans-serif), which displays as;
Example: Duis aute irure dolor in reprehenderit
Times New Roman (serif), which displays as;
Example: in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Georgia (serif), which displays as;
Example: Excepteur sint occaecat cupidatat non proident,
Garamond (serif), which displays as;
Example: sunt in culpa qui officia deserunt mollit anim id est laborum.
Courier New (monospace), which displays as;
Example: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Brush Script MT (cursive), which displays as;
Example: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Other fonts include:

Arial Black, Gadget, sans-serif
Bookman Old Style, serif
Comic Sans MS, cursive,, sans-seif
Courier, monospace
Courier New, Courier, monospace
Garamond, serif
Georgia, serif
Impact, Charcoal, sans-serif
Lucida Console, Monaco, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif
MS Sans Serif, Geneva, sans-serif
MS Serif, New York, sans-seif
Palatino Linotype, Book Antiqua, Palatino, serif
Geneva, Tahoma, sans-serif

**Note** fonts.google.com; has you use the google API to access the fonts. Open Sans is commonly used; developers.google.com/fonts/docs/getting_started for instructions.
You add the link to your head section before the <body> but you would have to be online to add the font.

Syntax Recap

            Example: 
            a { background-color: green; }

'p' woould be the selector that specifies which html element the styling applies to if there is no class or id to override it.
'{' & '}' would indicate where the declaration starts and finishes.
'background-color' would be the property that's always paired with specific key values.
':' represents the property/value separator.
'yellow' would be the value.
';' represents the declaration separator.

Basic CSS Example

        body{
            background-color:#e0dfda;
            color:#a1a1a1;
            
            font-family: Geneva, Tahoma, sans-serif;
            font-size:16px;
            font-weight:normal;
        }

or

        body{
            font: normal 16px Geneva, Tahoma, sans-serif;
        }

line-height:1.6em; -adjusts the line spacing between the lines. 'em' represents a unit of measurement. Used for more responsive type websites unless you want to use 'px' for pixels.

Classes & ID

To call a class you use a '.' followed by the class name in the CSS file.

To call an ID tag, you would use a '#' followed by the ID tag.

Positioning in CSS

Static - default positioning rendered in the order of the document flow.
Relative - element that is positioned relative to its normal position. So this means top, left, right, bottom.
Absolute - target whatever position we want inside of a relatiive element.
Fixed - Fixed position to the browser window.
Initial - to its default position
Inherit - inherits the property of its parent element.

Example Layout:

            <html>
                <head>
                    <title>Blogs for Days</title>
                    <meta name="description" content="simple sample blog">
                    <meta name="keywords" content="simple sample blog company name">
                </head>
                <body>
                    <header id="main-header">
                        <h2>My Very Own Blog Website</h2>
                    </header>
                    
                    <a href="index.html">Go to Home Page</a>
                    
                    <section>
                        <article class="post">
                            <h3>First Post: Day 1</h3>
                            <small>Posted by John Doe on May 4, 2021</small>
                            <p>Each article that goes here will be a blog post. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            <small><a href="post.html">Read more...</a></small>
                        </article>
                        
                        <article class="post">
                            <h3>Second Post: Week 1</h3>
                            <small>Posted by John Doe on May 11, 2021</small>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            <small><a href="post.html">Read more...</a></small>
                        </article>
                        
                        <article class="post">
                            <h3>Third Post: Week 3</h3>
                            <small>Posted by John Doe on May 24, 2021</small>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            <small><a href="post.html">Read more...</a></small>
                        </article>
                    </section>
                    
                    <aside>
                        <h2>Categories</h2> 
                        <nav>
                            <ul>
                                <li><a href="#">Category 1</a></li>
                                <li><a href="#">Category 2</a></li>
                                <li><a href="#">Category 3</a></li>
                            </ul>
                        </nav>
                    </aside>
                    
                    <footer id="main-footer">
                        <p>Copyright © 2021</p>
                    </footer>
            </body>
            </html>

This displays the following:

Blogs for Days

My Very Own Blog Website

Go to Home Page

First Post: Day 1

Posted by John Doe on May 4, 2021

Each article that goes here will be a blog post. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more...

Second Post: Week 1

Posted by John Doe on May 11, 2021

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more...

Third Post: Week 3

Posted by John Doe on May 24, 2021

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more...

Form Example

A common class used for forms in bootstrap would be 'form-group'

Below is an example of some basic form options

The form is generated using the following HTML5 code:

            <form action="process.css" method="POST">
                <div class="form-group">
                    <label>First Name:</label>
                    <input type="text" name="firstName" placeholder="Enter first name">
                </div>
                <div class="form-group">
                    <label>Last Name:</label>
                    <input type="text" name="lastName" placeholder="Enter last name">
                </div>
                <div class="form-group">
                    <label>Email:</label>
                    <input type="email" name="emailAddress">
                </div>
                <div class="form-group">
                    <label>Birthday:</label>
                    <input type="date" name="birthday>
                </div>
                <div class="form-group">
                    <label>Quantity</label>
                    <input type="number" name="quantity" value="1">
                </div>
                <div class="form-group">
                    <label>Topic:</label>
                    <select name ="emailTopic">
                        <option value ="newOrder">New Order</option>
                        <option value ="customerService">General Customer Service</option>
                        <option value ="productSupport">Order Support</option>
                        <option value ="suggestiions">Suggestions</option>
                        <option value ="other">Other</option>
                    </select>
                </div>
                <div>
                    <label>Message:</label>
                    <textarea name="message"></textarea>
                </div>
                <input type="submit" name="submit" value="Submit">
            </form>

Floating Block Example:

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Position Box Example

Following HTML code:

paired with this CSS code:

displays the following:

Hello

Goodbye

Positioned as static by default if there is no position specified.

Absolute allows you to move the element around the webpage and not within the element box model as it's not positioned as relative. Uses the following line after being called.
position: absolute;

Relative position is in relation to how element that is positioned relative to its normal position. So this means top, left, right, bottom.
position: relative;

In order to use an image as an element background, you would edit the css element and add the background-image attribute with a url to the image source. The background repeats as a default unless you set it to otherwise. You can also position the image to the center position with use of the background-position.

Psuedo Classes

Pseudo classes are set in the CSS file following the element and class selector while seperated by a colon in the CSS file.

List Item: first-child
List Item: nth-child(even)
List Item
List Item
List Item: nth-child(5)
List Item
List Item
List Item
List Item
List Item
List Item
List Item
List Item: last child

list has a class named "generic-list" and the following CSS format to apply colors or properties to the list.

        .generic-list li:nth-child(even){
            background: grey;
        }

Creating a Fixed Button

Home

Using the following code:
<a class="fix-position button" href="">Home</a>

with the following CSS: 
        .fix-position{
        position: fixed;
        top: 0%;
        }

will create a home button that stays fixed to the upper left of the screen.

CSS Reset

Styling meant to be used for 'boiler-plates' to remove page presets.

            html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                font: inherit;
                vertical-align: baseline;
                box-sizing: border-box
            }

            article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
                display: block;
            }
            
            body {
                line-height: 1;
            }
            
            ol, ul {
                list-style: none;
            }
            
            blockquote, q {
                quotes: none;
            }
            
            blockquote:before, blockquote:after, q:before, q:after {
                content: '';
                content: none;
            }

            table {
                border-collapse: collapse;
                border-spacing: 0;
            }

            html {
                box-sizing:border-box
            }

            * {
                box-sizing:inherit
            }

Styling example

            <html>
            <head>
                <title>Sample Site</title>
                <link rel="samplestyle" type="text/css" href="css/samplestyle.css">
            </head>
            <body>
                <header id="main-header">
                    <div class="container">
                    <h1>Sample Site</h1>
                    </div>
                </header>
                
                <nav id="navbar">
                    <div class="container">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>        
                    </div>
                </nav>
                
                <!--Showcase Area-->
                <section id="showcase">
                <div class="container">
                    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
                </div>
                </section>
                
                <!--Main Area-->
                <div class="container">
                <section id="main-header">
                    <h1>Welcome</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </section> 
                <!--Side Bar-->
                <aside id="sidebar">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </aside>
                </div>
                
                <footer id="main-footer">
                        <p>Copyright ©2021: My Website</p>
                </footer>
            </body>
            </html>