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*/
html, body {
margin-top: 0px;
	height: 100%;
font-family: 'Roboto', Arial, sans-serif;

}


nav ul {
	list-style-type:none;
	margin-top:5px;

	padding:0;
	position: absolute;
}



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;
}



.nav_color1{
	background-color: #ED1515;
}
.nav_color2{
	background-color: #1526ED;
}
.nav_color3{
	background-color: #FCCD08;
	color:black;
}

#footer {
	position: fixed;
	text-align: center;
	left: 0px;
	bottom: 0px;
	z-index: 1;
	height: 60px;
	background-color: #E6E5E5;
	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;
	border-top:5px solid #000000;
}

	#footer a{
		color:black;
		text-decoration: none;
	font-weight: bold;
	}

gallery {
        margin: 10px 40px;
    }
      
    .gallery img {
        width: 200px;
        height: 50px;
        transition: 1s;
        padding: 5px;
    }
      
    .gallery img:hover {
        filter: drop-shadow(4px 4px 6px gray);
        transform: scale(1.1);
    }

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