Up to this point we have mostly ignored CSS with the exception of using it to add borders to tables. Review the example that we used earlier in the course.
<p style = "font-size: 20pt" > … </p><head>
<style>
p { font-size: 20pt}
</style>
</head>p { font-size: 20pt}<head> … <link rel="stylesheet" href="styles.css” >CSS uses selectors to decide which HTML elements to apply a particular style to. To apply the same style to everything visible in the body of the document, we'll use the body selector:
<style >
body {
background-color: #d2b48c;
}
</style>The "background-color" is what is known as a property. In this case, we're referring to the body's background-color. On the other side of the ":" is the value. In this case, the value is "#d2b48c". We can use defined colors, like "red", "blue", "green", "brown", etc., or use an HTML color picker to pick one. HTML colors can be defined using 6 hexadecimal digits preceded by a "#", where the first two correspond to the intensity of red, the second two the intensity of green, and last two the intensity of blue.
We can practice by trying to add some CSS to IT350.html or starter.html web page
Just like in HTML, we should also put comments in CSS to help us (or others reading our code) remember what is going on in a particular section. CSS comments are different from HTML comments, although they are similar to comments in other programming languages like C/C++, Java, and PHP. A comment in CSS starts with /* and ends with */
<style >
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
/*This makes the font sans-serif, like Arial*/
font-family: sans-serif;
}
</style>Remember, CSS is written in the following manner: the programmer defines what "selector" they want to style (for e.g., the body, or an h1, or a paragraph), and in between braces, define the "property:value" pairs of that style, separated by ;. Here is how we would specify that we wanted a paragraph to use the "monospace" font (included with all browsers) at a size of 48 pixels tall:
p {
font-family: monospace;
font-size: 48px;
}The range of font choices that come packaged with your browser are fairly limited, however. Luckily, Google (and others) offer many free fonts that we can use. Head over to Google Fonts to check some of them out.
Let's say I really like the "Oswald" font. In order to use it, we click the "+" button on the top right, which brings up a bar at the bottom that lets us know that one font family has been selected. Click on that bar at the bottom.
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">font-family: 'Oswald', sans-serif;p {
font-family: 'Oswald', sans-serif;
font-size: 48px;
}As we saw, by default, tables do not have borders, so when a table is displayed in the browser, it doesn't look like much. But that's because we haven't given it any style! Let's conjure up some CSS magic to make our table look a little bit better. First, let's add a border to our table using the "border" property, as we did when larning about tables.
table {
border: 1px solid black;
}Ok, now our table actually looks sort of like a table. Let's add the same border around each cell in our table:
td {
border: 1px solid black;
}The border looks a little close to the actual text though, doesn't it? Maybe I want some white space around the inner HTML of my "td"s. We do that using the "padding" property. Let's add 10 pixels of padding around each cell by adding padding: 10px; to the CSS selector that styles cells.
So far, we've just been writing CSS inside of our HTML file to style that specific page. In doing so, we're not taking advantage of much of the power of CSS — the ability to write the style for all elements of a particular type once, and use that style across multiple web pages. The way that CSS is really used in real life is by creating a "stylesheet" as a separate file, and then "linking", or importing, that stylesheet into multiple webpages. Ever notice that no matter what item you're viewing on Amazon, or which friend's profile you're checking out on Facebook, the style of the page is the same? That's because all of the pages on these websites are using the same stylesheet — rather than having some poor programmer retype the same CSS over and over into each file that reaches your browser.
Create a new file called "default.css" in the same directory as your HTML files. CSS files don't need the <style> tags that were needed when we wrote CSS in the <head> of our HTML files. Let's throw a couple selectors in there to start out:
h1, h2 {
font-family: sans-serif;
color: gray; }
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}If you reload any of your pages, you'll notice that nothing's changed. That's because we just haven't told our HTML file where to find our style file. We do this by adding a "link" element to the head of our HTML files. For any HTML file that you want to use the default.css stylesheet, add the following to the head section of your HTML file:
<link rel="stylesheet" href="default.css">Notice that h1 and h2 headings should have a "sans-serif" font, but all of our paragraphs have a "serif" font. Have you ever wondered to yourself, "why"? It turns out that all browsers have a default stylesheet — CSS that's used in case there isn't a stylesheet or CSS in the head of the HTML file to tell it to do something different. As "serif" fonts are generally considered harder to read on computer screens (not so in books, however), let's give our paragraphs a nice sans-serif font as well by modifying the paragraph selector in our CSS file.
h1, h2 {
font-family: sans-serif;
color: gray; }
h1 {
border-bottom: 1px solid black;
}
p {
font-family: sans-serif;
color: maroon;
}Reopen your HTML files in your browser. Did you notice that elements that exist inside of paragraphs (like the <em> and <a> elements) took on the sans-serif font too? That's because of "inheritance", any element that's inside of the selector that we just modified (a "child") will take on the properties that are applied to its "parent". There are a couple implications of this. The first is that rather than continuing to apply the same property over and over to a bunch of selectors, I can just put a selector higher up in the "tree" that is the nested HTML elements. For example, if I just want everything on the page to have a sans-serif font, apply that to the body. Every other element below the body will inherit this property:
body {
font-family: sans-serif;
}
h1, h2 {
font-family: sans-serif;
color: gray; }
h1 {
border-bottom: 1px solid black;
}
p {
font-family: sans-serif;
color: maroon;
}The browser will apply the style to an element given by the selector that is the most specific match. In other words, if I want paragraphs to be a "serif" font again, I can simply add this line to our CSS. Because the "p" selector is more specific than the "body" selector, the font-family property in the "p" selector is what gets applied. Try it out to prove this to yourself:
body {
font-family: sans-serif;
}
h1, h2 {
color: gray; }
h1 {
border-bottom: 1px solid black;
}
p {
font-family: serif;
color: maroon;
}Now that you believe it, take that font-family line out of the "p" selector we just added. There are a couple more unique situations that we need to learn about before we can call ourselves CSS Jedi. The first relates to elements that are nested within others. Say, for example, that we wanted to style <em> in a particular way, but only when they fall inside of a paragraph. We handle this situation by specifying both the parent and child tags in our CSS. First, in order to make this clear, add some text in an <em> tag outside of a paragraph, so we have some context for comparison. Next, let's add the following to our CSS:
body {
font-family: sans-serif;
}
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
p em {
color: green;
}
What you should observe now is that <em> tags inside of paragraphs become green, while those not inside of paragraphs remain the color that the browser's default CSS stylesheet made them — black.
Remove the selector we just added. We're almost done, but wait a second! Isn't it totally reasonable to want different paragraphs, for example, to be different colors? Great question! We can do this too, but it requires a new CSS concept — classes! Example:
<p class="greentea">Back to our CSS file. We need to add something that tells the browser what to do when it encounters a paragraph of the "greentea" class. To do this, we add the following new selector, and add whatever style we want elements of that class to have (I'll make the text green):
p.greentea {
color: green;
}