Style Your Personal Site

Now that we have an understanding of how the "structure" of our personal webpage is put together, naturally we will want to change its appearance. CSS, or Cascading Style Sheets, is the most effective way to do this. From Mozilla's developer docs:

Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a style sheet language. CSS is what you use to selectively style HTML elements.

To get started with CSS, try adding some basic styles to your personal landing page. Follow these steps to get started:

In the website starter kit, there is a CSS file named style.css in your assets. This is the CSS file we'll edit to change the appearance of our sites.
Link style.css to your index.html file by adding a <link> tag with a href attributing pointing to style.css (more below).
In your style.css file, add a selector changing the color and font-family of your <body>'s text. Then add a span with a class attribute to change the font-family of a specific character or string of text to create a dropcap.

You will see that you can control a lot of your site's presentation with just a few lines of code! Continue experimenting with CSS by changing the appearance of your personal landing page to match your preferences. The W3C CSS Reference is a great resource to see what you can customize on your page!

Linking your css file

Add the following code to your index.html file to link your CSS stylesheet:

<head>
<link rel="stylesheet" type="text/css" href="assets/style.css">
</head>

Try adjusting the color and font-family of your webpage by adding the following CSS to your style.css file:

body {
    color: red;
    Font-family: arial;
}

Save your CSS file, then refresh your HTML file to see the result! Next try adding a "dropcap" to your page by adding a span with a class attribute to change the font-family of a specific character or string of text. An example in your index.html file could be:

<h1><span class="cursive">C</span>hris Hamamoto</h1>

and in your CSS:

.cursive {
    font-family: cursive;
}

Continue experimenting with CSS and customize your site.

Anatomy of a CSS ruleset

CSS follows a specific syntax, known as rulesets. This is composed of the following:

Selector - the HTML element name at the start of the ruleset which defines the element(s) to be styled
Declaration - a single rule like color: red;. It specifies which of the element's properties you want to style.
Properties - the attribute of the element you want to style. These include properties such as color, background-color, font-size, etc.
Property value - the value you apply to the property. This appears to right of the property — after the colon. Depending on the property, you can give it specific values.

From Mozilla's developer docs:

Apart from the selector, each ruleset must be wrapped in curly braces ({}). Within each declaration, you must use a colon (:) to separate the property from its value or values. Within each ruleset, you must use a semicolon (;) to separate each declaration from the next one.

There are many CSS properties you can style. Check out the full list of CSS Properties here.

Next Steps

This is the very basics of CSS. To delve further visit Mozilla's CSS Basics webpage (heavily referenced here), and try the Codecademy: Learn CSS module.

Style Your Personal Site

Linking your css file

Anatomy of a CSS ruleset

Next Steps

Resources