The CSS Border Property

Border is used to define properties about the border around an element. It is a short hand for border-color, border-style, and border-width. For example border: width style color. You can also make borders on just the top by using border-top/bottom/left/right.

The CSS Padding Property

Padding is the space between the contents of an element and the border. The margin is the space between elements.

The CSS Font-family Property

The font-family specifies the font for things in an element. It picks from left to right and will only go on to the next if the one is not available. The generic font names are serif, sans-serif, cursive, fantasy, and monospace.

The CSS Font-size Property

The font-size property is used to specify what the size of the font for an element is. You can use absolute size values from xx-small to xxx-large, relaative sizes values like smaller and larger, length values like pixles or em, percentage values, math value, and global values.

How to center image

One can center an image using the properties mx-auto and adding the values of margin-left: auto!important and margin-right: auto!important.

I added a classes in the div elements of all the different parts of the footer. In order to get to the right set up the classes I added were: col-md-3 col-sm-6 col-12.

Adding a background image to an element is easy. Just use selectors to choose what element you want to add the background image too then use background-image: url("") and background-repeat: and padding to make it do what you want.

Hiding Content with CSS

Bootstarp uses the screen size to check what it should do in different sizes. And if something is to small then is sets the display property to none.

Creating the prospective student handout/CSS

I started by putting all the content into the html using the right sections and everything. I used headers and flex box as well as an unordered list with no style. I added all the nesseary selectors and rules in the CSS.

Creating and Using Snippets

Snippets are a very useful ways to code quickly. You can create snippets by hitting the snippets tab and creating new or creating new from clipboard. The $# is useful so once you create a new snippet you can hit tab and your coursor will go to that place.

                    
                        <article>
                                    <h1>Lab-number</lth1>
                                    <section>
                                        <h1>title</lth1>
                                        <p>description</ltp>
                                    </ltsection>
                        </ltarticle>
                    
                

                    
                        <section>
                            <h1>title</lth1>
                            <p>desciption</ltp>
                        </ltsection>
                    
                

SCSS

Using SCSS over CSS is useful because you can make changes to one place rather than every place where there is a color. Also it just seems like it is smarter and there is more tricks for it.

Origional CSS

                    
                        body {
                            padding-top: 50px;
                          }
                          
                          #Invoice {
                            float: right;
                            font-size: 36px;
                          }
                          
                          table {
                            width: 100%;
                            border-collapse: collapse;
                            border: medium solid #000;
                            margin-bottom: 25px;
                          }
                          
                          #OrderInfo td:nth-child(odd),
                          #Addresses td:nth-child(odd) {
                            text-align: right;
                            padding-right: 10px;
                          }
                          
                          #OrderInfo td:nth-child(odd), #Addresses td:nth-child(odd) {
                            text-align: right;
                            padding-right: 10px;
                          }
                          #OrderInfo td:nth-child(odd)::after, #Addresses td:nth-child(odd)::after {
                            content: ":";
                          }
                          #OrderInfo td:nth-child(even), #Addresses td:nth-child(even) {
                            border: 1px solid #000;
                            padding-left: 10px;
                            text-align: left;
                          }
                          
                          #Addresses tr:first-child td:nth-child(even) {
                            border: none;
                          }
                          
                          .AddressType {
                            text-decoration: underline;
                            padding-left: 10px;
                          }
                          
                          .numeric {
                            text-align: right;
                            padding-right: 10px;
                          }
                          
                          #CompanyAddress {
                            font-size: 16px;
                          }
                          
                          .subtotals td {
                            border-top: solid medium black;
                          }
                          
                          #OrderDetailsTable .subtotals td, #OrderDetailsTable .shipping td, #OrderDetailsTable .total td {
                            border-left: none;
                          }
                          #OrderDetailsTable td, #OrderDetailsTable th {
                            border-left: 1px solid black;
                          }
                          #OrderDetailsTable th {
                            font-weight: bold;
                            color: #FFF;
                            background-color: #036;
                            text-align: left;
                            font-size: 16px;
                          }
                          #OrderDetailsTable tr *:not([class=numeric]) {
                            padding-left: 10px;
                          }
                          
                          #Footer {
                            font-family: "Segoe Script", Arial, sans-serif;
                            font-size: 18px;
                            color: #036;
                            text-align: center;
                          }
                          
                          #header {
                            color: #036;
                          }/*# sourceMappingURL=invoice.css.map */
                    
                

Final SCSS

                    
                        $hopeBlue: #036;

                        body {
                          padding-top: 50px;
                        }

                        #Invoice {
                          float: right;
                          font-size: 36px;
                        }

                        table {
                          width: 100%;
                          border-collapse: collapse;
                          border: medium solid #000;
                          margin-bottom: 25px;
                        }

                        #OrderInfo td:nth-child(odd),
                        #Addresses td:nth-child(odd) {
                          text-align: right;
                          padding-right: 10px;
                        }

                        // #OrderInfo td:nth-child(odd)::after,
                        // #Addresses td:nth-child(odd)::after {
                        //   content: ':'
                        // }
                        
                        #OrderInfo, #Addresses{
                          td:nth-child(odd){
                            text-align: right;
                            padding-right: 10px;
                            &::after{
                              content: ":";
                            }
                          }
                          td:nth-child(even){
                            border: 1px solid #000;
                            padding-left: 10px;
                            text-align: left;
                          }
                        }

                        #Addresses tr:first-child td:nth-child(even) {
                          border: none;
                        }

                        // #OrderInfo td:nth-child(even),
                        // #Addresses td:nth-child(even) {
                        //   border: 1px solid #000;
                        //   padding-left: 10px;
                        //   text-align: left;
                        // }
                        
                        .AddressType {
                          text-decoration: underline;
                          padding-left: 10px;
                        }

                        .numeric {
                          text-align: right;
                          padding-right: 10px;
                        }

                        #CompanyAddress {
                          font-size: 16px;
                        }

                        .subtotals td {
                          border-top: solid medium black;
                        }

                        // #OrderDetailsTable .subtotals td,
                        // #OrderDetailsTable .shipping td,
                        // #OrderDetailsTable .total td {
                        //   border-left: none;
                        // }

                        // #OrderDetailsTable td,
                        // #OrderDetailsTable th {
                        //   border-left: 1px solid black;
                        // }

                        // #OrderDetailsTable tr *:not([class='numeric']) {
                        //   padding-left: 10px;
                        // }

                        // #OrderDetailsTable th {
                        //   font-weight: bold;
                        //   color: #FFF;
                        //   background-color: $hopeBlue;
                        //   text-align: left;
                        //   font-size: 16px;
                        // }


                        #OrderDetailsTable{
                        .subtotals td, .shipping td, .total td{
                            border-left:none;
                        }
                        td, th{
                            border-left: 1px solid black;
                        }
                        th{
                            font-weight: bold;
                            color: #FFF;
                            background-color: $hopeBlue;
                            text-align: left;
                            font-size: 16px;
                        }
                        tr *:not([class='numeric']) {
                            padding-left: 10px;
                        }
                        }

                        #Footer {
                        font-family: "Segoe Script", Arial, sans-serif;
                        font-size: 18px;
                        color: $hopeBlue;
                        text-align: center;
                        }

                        #header {
                        color: $hopeBlue;
                        }
                    
                

Styling Tabs

Here we applyed the hope theme and did so by using the specific colors for hope and by changing some of the different styling.

Styling accordions

The script element helped with styling and the button needed to have an additional attribute to make it look right. Finally there was another script element added so that we could make it work right.

Creating Nav Menu

In order to make the nav menu what I had to do was create a div that was a flex box with all the li elements which had a elements with links to all the other sites. This can be done quickly by using the snippets that I created. Start by using the new nav bar and then in order to add more menus items use the snippet for that and use tab to quikcly go from point to point and fill out the nesseasry parts. Also, I created drop down menus for each of the tabs so that there could be multiple links and it was more ordered. To see how I did it I can just look at this lab.

Styling Nav Menu

To style the nav menu I created a series of CSS rules which targeted the parts I wanted to style. By using the active class I was able to change the color of the drop down meanus. If I want to see how to do this I can just look at the CSS file I have for this lab.

Using fonts from google

To use google fonts you just have to go to the google site and look up a font that I want and then get the CSS link for it and put it in the CSS file wihtou the style parts at the top and the bottom.

The input element

The input element in forms is used to define a new feild of infomration that will be part of the form. In this lab we used the types: Tel, email and text. Some of the ways this looks can be seen in gthe lab 10.

The select element

You can create a dropdown menu by using the select and the option elements together to define a list to select from and what their values are respectively. You can group parts of the drop down selection together by wraping them with the optgroup element.