Education Committee


Advanced CSS

How To Build Your Own Personal Website

Part 3: Advanced CSS - UNDER CONSTRUCTION

By Abhinav Bhaskar



Purpose

Welcome back to Part 3 of our Web Dev tutorial series! Due to length, I decided to split the CSS tutorial into two sections. You can find Part 2 here. This Part will be slightly more advanced and will focus on introducing you to more properties you can play with and getting you to think more about the layout of your website. Again we highly encourage our members to play around with the CSS we go over in this chapter to get a better understanding of everything that can be done with CSS and HTML.

Step 5: Other Useful Properties

In this section we will just list some of the most used properties on the SAAS website. Due to the vast number of properties and abundance of existing resources on the internet, we will not list each and every one. For a larger reference, please visit This Page or This Page.

background-color:

This property will change the background of the container it is applied to. The usage is identical to color, which was covered last tutorial, and the same three forms of specifying color may be used: text, hex code, or rgba.
Usage: .container { background-color:#fff}

Tables???????

Step 6: Styling Images

Images are for the most Part the same as text with the obvious exception that you cannot alter the some properties such as color.

background-image:

Selecting a background image will apply the select image to the background of the container it is used on. To select an image, we use url("location.extension") as shown below. In addition to specifying a background image, we can modify properties of the background by using settings like background-repeat, background-position, and background-attachment the last of which is important in creating a parallax effect where the website seems to scroll over the background image.
Usage:

.container {
        background-image:url("susa.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
      }

Step 7: Positioning

With Flexbox, positioning elements on a webpage is extremely easy. However, we will try to do the same without flexbox due to previous directors opting to use Bootstrap 3 and traditional methods to position elements on the SAAS website.

Step 8: Bootstrap Revisited - Flexbox

Step 9: Animations