Step 1: Learn About CSS
Click on this link to see an example of how much CSS can change in a website.
CSS can be written in-tag, like this:
<p color:Purple>Some text here</p>
That would show "Some text here" in purple.
It can also be written in-document, as in, standard CSS syntax inside a <style> tag, inside the <head> tag of the HTML document.
What is standard CSS syntax, you may ask? It's like this:
body {
background-color: yellow;
margin: 10px;
}
h1 {
color: yellow;
background-color: blue;
text-align: center;
}
p {
font-size: 15px;
}
Each of those sections in curly brackets {} defines formatting for a certain type of tag. In this case, we defined special formatting for the body tag (all page content), top-level headings, and regular paragraphs of text.
What about tags (or format properties) that we don't define? They default to whatever the browser default is. In-tag CSS overrides document CSS and imported CSS, which overrides browser defaults.
In-tag is quick but can get repetitive and messy. In-document is better; you'd just put something like the above in a <style> tag. The cleanest and most flexible option is to have a separate file for CSS. This is what I've done for this activity, in my_css.css. You can open it up and take a look at it.
To tell the HTML document to use a certain stylesheet, you add a link inside the <head> tag of the document:
<head>
<link rel="stylesheet" href="my_css.css">
</head>
This links my_css.css into the document and tells it that it's a stylesheet. Having external CSS like this can make it easier to manage your HTML content and change the styling quickly. Of course, you can also add in-document or in-tag styling which will override the stylesheet.
This page gives more detailed explanations of this. It's not long, so give it a look before moving on.
Step 2: I Baked You Some Code
Open my_css.css and look it over. Look up what each of the properties mean (here is a good, quick reference.) Open up my_homepage.html in a browser and see how it looks. Try changing the CSS file, then refreshing the page. You should see your changes take effect.
Step 3: Make it Your Own
Look up what properties change different things that you want to change about your site, and modify them in my_css.css. You can also use in-tag (inline) or in-document formatting if it's useful.
Instead of manually setting an inline property every time you want a specific element to be different, consider identifying it by class or ID in the CSS file. This page shows how to use different selectors to make your CSS file better fit what you're actually trying to do with it. A little bit of this is done in the original version of my_css.css, but you should change it based on what you're using different tags and classes for.
Read more, do cooler things, write less extra stuff.
Have fun!
