Having a basic understanding of HTML code enables you to build simple websites and edit or troubleshoot websites developed using other tools.

What is CSS?

CSS stands for Cascading Style Sheets. CSS is a set of rules that tell a web browser how to style content on the internet. The words you are reading right now have a designated font, color and size derived from cascading style sheets. CSS can be used to make words bold or italicized. One of the big advantages of CSS is the ability to centralize a website's style in one location in order to make it easy to create a uniform look for a large collection of content. Let's say you created a website a few years ago, and now want to make it easily accessible from mobile devices. CSS lets you do this by creating a new style without modifying any of your content.

Why should I learn CSS?

CSS is integral in creating all visual content online. Having an understanding of how content and style combine and inform one another can give you a more valuable understanding of each. CSS is widely used, so if you work collaboratively, proper CSS will make it easier for others to understand, modify and reuse your work. An understanding of CSS increases your technical literacy and knowledge of how CSS and HTML communicate helps you prepare to learn a programming language.

Where will I encounter CSS?

If you build a site from scratch, you will almost certainly use CSS. Even if this is an unlikely scenario for you, many pre-made web platforms allow you to tweak appearance and functionality through CSS. Template blogs like Wordpress or Tumblr allow users to modify style extensively through CSS. Knowledge of HTML is fundamental, but knowledge of CSS will unlock exponentially more use options for web pages.

How do I use CSS?

One type of CSS is in-line CSS. This means that the instructions for styling content are inserted directly in-line with the content itself. However, if you are repeating the style every time you use it you are not taking full advantage of the control and simplicity CSS allows. The other type of CSS is external. External CSS exists as a separate file that is referenced in-line in your HTML. Multiple references to a single external file saves time and space in your code, and grants consistency and control to your projects.

Examples

Below are a few examples of the types of style that can be applied with CSS. These are basic examples of manipulating text. CSS can also be used for more complicated tasks, such as layout.

In-line CSS:

Here is a piece of in-line CSS written directly into an HTML web page. Below that markup, we see an example of what that CSS looks like when rendered by a browser.

External CSS:

Here is a piece of HTML with external CSS. The HTML does not contain specific instructions but refers to a class. The class is stored in a separate .css file, and this is where we find the style instructions for the newspaper class. Finally, we see a representation of what this will look like when rendered by a browser.

While the external CSS way may not look easier, when scaled across any number of pieces of content, it can save you a lot of time and effort.

What are some useful resources and where can I learn more?

Web resources:

W3 Schools is a great reference for looking up he basics of CSS (as well as HTML and other related acronyms). Can't remember proper CSS for getting your margins just right? Chances are, W3 Schools has the answer.

CSS Tricks is a blog that covers news in the CSS/web development world. Are you comfortable with the basics and want to learn something new and fun? CSS Tricks is your next stop.

Useful Tools:

Chrome has a built-in "Inspect Element" feature, which allows you to quickly view the source (HTML) as well as the CSS applied to an element on a web page. When you right-click and select Inspect Element, a bar will appear at the bottom of the browser that shows the page's source (HTML) on the left, and the CSS on the right. Both the HTML and CSS can be edited, and you can check and uncheck CSS rules to see how each one is combined to create the finished visual effect.

Similarly, there is a Firefox extension, Firebug, which does the same thing and is very valuable to learn by dissecting others' implementations.

1. Go to your cPanel home page.
2. Under the Software section, select Site Software.
3. Select WordPress.
4. Under the Install tab, select Show Advanced Configuration.
5. Under Installation URL, keep the path blank (delete "wordpress").
6. Create an Admin User (This is just any username you want to use).
7. Create an Admin Password (This is just a password you want to use).
8. Input the same Admin Password again to confirm you typed it correctly.
9. Input your Email Address.
10. Create a Blog name (This can be changed within the WordPress interface later).
11. Create a Blog description (This can be changed within the WordPress interface later).
12. Select the blue Install button.
13. On the new page click the link to access the site. If you scroll to the bottom of your site, under Meta you will be able to Log in to manage your site.

Accessing your WordPress in the Future

1. Login to cPanel.
2. Under Software, click on Site Software.
3. Click on WordPress.
4. Under Manage select the appropriate URL.
5. Scroll to the bottom of your site, and Log in under the Meta heading.