CSS: Creating "main_styles"

    main_styles.css

    All CSS defined in the "main_styles.css" file will affect all of the viewports of this website (desktop, tablet and mobile).

    It might help to consider it the "master" css file that defines what everything should look like, while the other CSS files will alter the way certain elements are styled differently for the type of viewing device—for example the navigation size may change for touch-devices.

  1. Create a new CSS file (File > New > CSS) and add this code to the file:
    2. 
@charset "UTF-8";
/*All this CSS is the same for Mobile and Desktop CSS*/


/*MAIN FRAMEWORK*/		
/*These styles affect the content in the BROWSER WINDOW*/
html, body {
margin-top: 0px;
height: 100%;
font-family: 'Roboto', Arial, sans-serif;
}




/*NAVIGATION*/
nav ul {
list-style-type:none;
margin-top:5px;
padding:0;
position: absolute;
}


/*These are classes that can be applied to individual NAVIGATION links (in case you want each to be a different color, etc.)*/
.nav_color1{
background-color: #ED1515;
}
.nav_color2{
background-color: #1526ED;
}
.nav_color3{
background-color: #FCCD08;
color:black;
}





/*TEXT STYLES*/
p{
font-family: 'Roboto', Arial, sans-serif;
font-size: 1em;
line-height: 1.2em;
color: #000000;
}

h1{
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
line-height:1.2em;
color:#000000;
}




/*MAIN CONTENT*/

/*Styles the COLUMNS & GALLERY div tags*/
#col_1, #col_2, #col_3, #gallery{
margin-bottom: 100px;/*This height should be equal to the height of your footer, so the footer doesn't cover your content*/
}



/*Styles the LIGHTBOX GALLERY section (the images that us ethe Lightbox function)*/
#gallery {
margin: 10px 40px;
}

/*Styles all IMAGES in the LIGHTBOX GALLERY section*/
#gallery img {
width: 140px;
height: 140px;
transition: 1s;
padding: 5px;
}

/*Styles the HOVER state of all IMAGES in the LIGHTBOX GALLERY section*/
#gallery img:hover {
filter: drop-shadow(4px 4px 6px gray);
transform: scale(1.1);
}

/*Styles all LIST ITEMS in the LIST in the LIGHTBOX GALLERY section */
#gallery ul li{
list-style: none;
display: inline-block;
}






/*FOOTER*/
/*Styles the FOOTER div tag*/
#footer {
position: fixed;
text-align: center;
left: 0px;
bottom: 0px;
z-index: 1;
height: 60px;
background-color: green;
width: 100%;
padding: 10px;
float: left;
font-size: .8em;
box-shadow: 2px -2px 5px #888888;
font-family: 'Roboto', sans-serif;
line-height: 1.2em;
color: #686666;
}

/*Styles all LINKS in the FOOTER div tag*/
#footer a{
color:black;
text-decoration: none;
font-weight: bold;
}



/* CSS Document */
  2. Save file as "main_styles.css" in the "css" folder.