Adding CSS to your website

Warning: Undefined variable $num in /home/shroutdo/public_html/courses/wp-content/plugins/single-categories/single_categories.php on line 126

Warning: Undefined variable $posts_num in /home/shroutdo/public_html/courses/wp-content/plugins/single-categories/single_categories.php on line 127

Congratulations – you have a website! But what if you want to add some regular content (say, blog posts)?

For that, you need something called CSS (cascading style sheets). CSS lets you apply styles to the entire website (instead of just particular blocks of text) or to individual sections without needing to code each section.

Start by navigating to your Catapult account. Click on File Manager. Navigate to the folder that contains the files for your course blog.

We’re going to add a new file to that folder. Click on the new file button, and name the new file style.css

Once the file is created, click on it once to select it, and then click edit (IMPORTANT: NOT HTML EDITOR)

Paste in the following code:

/* This section lets you change the margins and the background color.*/

body{
	margin:0;
	background-color: #881124;
}

/* This section lets you change the font color and size for the whole document.*/
header {
	font-size: 20px;
	background-color: black;
	color: #cccccc;
	height: 75px;
}

/*This section creates different sections - you can use these, or not!*/
#topbar{
	width:75%;
	margin-left: auto ;
    margin-right: auto ;
}
nav {
	float: right;
}
nav li{
	display: inline;
	padding-right: 30px;
}
.logo {
	float:left;
	font-size:30px;
	padding-left:20px;
	padding-top:20px;
}

.box{
	margin-top: 20px;
	width:75%;
	margin-left: auto ;
    margin-right: auto ;
    height: 400px;
}

.blog-post{
	margin-top:20px;
	float:left;
}
.blog-heading{
	font-size: 36px;
	margin-bottom:20px;
}
.sidebar{
	float:right;
}
footer{	
	color: white;	
	margin-left: auto ;    
	margin-right: auto ;	
	font-size:16px;	
	min-height: 50px;	
	padding:20px;	
	background-color: black;	
}
#footer{	
	width:75%;
	margin-left: auto ;    
	margin-right: auto ;
}

In order to apply this styling to your blog, we need to tell your index page to look at it. Add the following line of code to the head section of your index page.

 <link rel="stylesheet" href="style.css">

Save your .css file and your .html file. Look at your website. The background should be garnet!