Enhancing the look and feel of view files with CSS styles - PHP

In reality, enhancing the visual aspect of the web page created in the previous segment is only a matter of adding to the “header_view.php” file some basic CSS styles. It’s that simple, really. Nonetheless, it's useful to keep these styles, along with images, JavaScript, Flash files, etc residing in a separate folder, as you usually do when building your own web applications, right?

To accomplish this in a simple manner, I’m going to create an “assets” folder under the “codeigniter” directory (assuming that this is the root directory in your CI installation) and add a new subfolder called “css.” Once there, I’m going to define a “default.css” CSS file that will be attached to the header view, which will look like this:

body{

padding: 0;

margin: 0;

background: #999;

}

#container{

width: 600px;

margin: 0 auto;

}

#header{

padding: 10px;

background: #eee;

}

#content{

padding: 10px;

background: #9cf;

}

#footer{

padding: 10px;

background: #eee;

}

h1{

font: bold 2em Arial, Helvetica, sans-serif;

margin: 0 0 18px 0;

color: #039;

}

h2{

font: bold 1.5em Arial, Helvetica, sans-serif;

margin: 0 0 18px 0;

}

p{

font: normal .8em Arial, Helvetica, sans-serif;

margin: 0 0 18px 0;

}

That’s not rocket science, right? All that I did above was create a simple CSS file that hopefully will make the whole web page look a bit more appealing. Apart from building your skills in CSS, the educational aspect of creating this file is that it should give you a clear idea of how to define the structure of your web application when using CodeIgniter. In a case like this, the “assets” folder would include CSS, JavaScript and Flash files, along with images and so forth.

Well, now that I've defined the CSS file that will improve the visual presentation of the previous web page, it’s time to modify the “header_view.php” file that you learned before, so it can load the file.

This will be done in the next section. Thus, click on the link that appears below and keep reading. We’re almost finished!