Lab 4

The CSS Border Property

The border property in CSS is used to design the border

The CSS Padding Property

The Padding property in CSS is used to give space between the borders and letters. Padding represents the amount of inner space an element has, while the margin is whitespace available surrounding an element.

The CSS font-family Property

when adding a font family you have to add several different types because sometimes the browser doesnt contain the font you want. For example using "serif", "san-serif","monospace"

The CSS font-size Property

normally you will set the font sixe with pixels and this size can be relative or absolute.

Lab 5

Using the class mx-auto will shange the photo to be centered and using img-fluid will make sure the image is centered no matter the screen size.

Hiding Content with CSS

CSS uses the display element to be able to have the website no matter the size of the screen be readable and aesthetic.

Creating the prospective student handout/CSS

I first did the basic HTML and then just started creating headings, paragraphs and an unordered list. Then in CSS I selected certain elements when I wanted to chnage their backgroud or the type of font they were using.

  • Creating and using snippets: Snippets are very useful to make writing htlm or css a lot faster. 
                            
                            Lab < section >
                            < h1 > < /h1 >
                            < /section >

  • SCSS: The primary benefits of usuing SCSS instead of CSS is that its cleaner way to write code but also its faster than css. 
                                
                                css:
                                #OrderInfo td:nth-child(odd)::after,

                                #Addresses td:nth-child(odd)::after 
                                {
                                    content:':'}
                                scss:
                                #OrderInfo,#Addresses{
                                    td:nth-child(odd) {
                                      text-align:right;
                                      padding-right:10px
                                      &::after{
                                        content:":";
                                      }