We are going to to change the background colors of our web page and put borders around some of our elements by editing the style.css file. I recomend using the program notepad++ Download and install notepad++ if it is not installed already.
First we need to set up an ftp connection. If the FTP pane is not showing on the menu bar of notepad++ go to plugins - Npp-FTP - Show NppFTP window
Click on the Settings icon in the FTP pane and select Profile Settings.
Click Add New then enter a name for this profile (say your droplet name) and click OK
Now enter your IP address in the Hostname field and the Linux username and password in their respective fields. Use the filepath to your html directory in the Initial remote directory field: /var/www/html. Click Close to to close the profile settings window.
To access the web server click on the Connect icon in the FTP Pane and select the profile you just created.
Once the server connects you should see your server directory structure from the HTML folder.
Next we will edit our style sheet to change the appearance of the page.
In the demonstration site we have a link in the header to a custom style sheet I named style.css in the css folder of our websites home directory.
The ' . ' (full stop) is called a class selector. .header refers to all elements that have the class header. Inside the braces are a list of properties and values in the format property: value;
In this example we are giving any element in our HTML page that has the class of 'header' a background color value of #7ff. The '#' indicates a hexidecimal mumber (base 16 where 10,11,12,13,14,15 are represented by 'a','b','c','d','e' and 'f' repectively) Each digit refers to an amount of red, green or blue. Where #fff is all colors or white and #000 is no color or black.