Intro to CSS
CSS, or Cascading Style Sheets, is used to apply visual design to HTML elements. The use of style sheets came about in an effort to separate content from de# web documents. In the early days of HTML, all of the visual information was contained inside the HTML tags themselves, cluttering up the code with lots of information that wasn’t related to the core content of the document. With CSS, the design information is usually stored outside of the main HTML, so that an HTML document can focus on the information it intends to deliver.
As an added advantage, an HTML page can change its entire look by just applying a different style sheet. CSS Zen Garden is a popular site that demonstrates this concept — it provides designers with an HTML document and invites them to submit CSS that implements a design without changing the original HTML. A quick look at the site shows you how vastly differently the same piece of HTML can look based on CSS styles.
CSS lets you select particular tags within an HTML document and apply a style. The style might define the background color, the font, or the layout of an element on a page. The tag/s you choose to style might be every link on the page, or one particular paragraph out of many. CSS syntax controls which tags you select, and hence, these rules are called “selectors”.
Cascading refers to the parent-child structure of CSS. A style set on a parent element will also apply to its child elements, unless a child has style rules that override that of the parent. For example, if the body has a text color set of dark gray, and no other elements have text colors set, then all text on the page will display in dark gray. If, though, the list item tag sets its text color to red, then it will be red and not gray.
The simplest type of selectors are tag selectors. These allow you to apply the same style to every tag of a particular type. For example, you might apply the same font to all paragraphs, or the same color to all links.
To target a particular tag, start by writing the name of the tag, followed by curly brackets.
p{
}
The information that goes inside the brackets is made up of a collection of properties. There are properties for most visual elements you can think of, from font and color to layout.
We’ll set the text color on the paragraph tag:
p{
color: #990000;
}
The name of the property is followed by a colon, then the value of the property. Each line ends with a semicolon. For the color property, the value is represented here as a hexadecimal color code.
- color
- background-color
- border
Colors in CSS can be expressed in hexadecimal (as in #ff3366) or RGB (as in rgb(255,51,102) ) values. To find hexadecimal and RGB values for color, see this color picker.
Colors can be applied to many different properties. Here’s an example of tags with background and border colors:
li{
border:1px solid #333333;
}
p {
background-color: rgb(81,138,196);
}
To create a border in CSS, you need to specify the size of the line, the style of border, and the line color — in that order. The <li> tag in the code above has a border defined. Size is expressed in pixels here, but can be expressed in any unit that CSS allows. The border style is a choice of a few properties: solid, dotted, dashed, double, and a few others. The color value works as in the rest of CSS, and can be in hexadecimal or RGB.
To learn more about properties, see this guide.
To make the HTML respond to our CSS styles, there are a few options. The first is to use the style attribute inside a tag, as we did in last week’s HTML class. A big advantage of CSS, though, is being able to separate style from content, so using this “inline” method is not ideal. The second way is to put our CSS definitions inside a <style> tag in the <head> section of HTML:
<head>
<style type="text/css">
h1 {
color: #990000;
}
h2 {
color:#ccff66;
}
p {
color: #3333333;
}
</style>
</head>
This method is preferable to inline styles, but we still have the style definitions in our HTML file. Ideally, the CSS should be completely separate from the HTML. We can do this by creating a CSS file and then linking it to the HTML file. The link to the stylesheet will go inside the <head> area of the page.
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Often, you’ll want more specific control over which tags are styled, beyond all paragraph tags, or all link tags. CSS selectors provide a great deal of precision. Some of the more common selectors allow you to select a tag based on its id or class attribute.
For example, a div tag like this:
<div id="navigation">
nav bar goes here
</div>
would be styled in CSS using the pound sign (#) like this:
#navigation{
background-color: #ccc;
}
A paragraph tag with the following class attribute:
<p class="highlight">My paragraph here</p>
will be styled using the period (.) like this:
.highlight{
border: 1px solid #333;
background-color: yellow;
}
The link tags have special selectors because a link can be in various states of activity — for example, a link tag changes color by default when its been visited. The states of a link are as follows:
- Normal – the default state for a link the user has not visited
- Visited – a link to a page the user has been to
- Hover – when the user rolls the mouse over the link
- Active – the moment the link is clicked
Most browsers default the normal links to blue, the visited ones to purple, and active to red. They generally will underline the link text as well. But you can change all that!
a:link{
color: #990000;
text-decoration: none;
}
a:visited{
color: #ccc;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
a:active{
color: #99ff00;
}
Order matters. This is one of the few places in CSS where the order in which you list the selectors matters. They should go in the order: link, visited, hover, active. The pneumonic device to remember this is “Love Hate” or “L.V.H.A.”
Units of measurement in CSS can be absolute, like the size of a pixel, or relative, such as 75 percent of the height of the page. There are lots of units that CSS will acknowledge, but the most commonly used ones are pixels (px), percent (%) and the height of the font (em). Sometimes you’ll want to set an element at a particular width or height, but it’s suggested that you use the unit em where possible, because it scales as the font scales. The em unit is particularly relevant to font sizes.
Let’s look at some width and height examples:
#nav{
height: 20px;
width: 300px;
border: 1px solid #333;
}
When you set the width and/or height on an element, keep in mind that if contents of the element make it larger than your specifications, those properties will be ignored. If you’d like the element to keep the width and height regardless of how much content it includes, you can set the overflow property to hidden.
The display of fonts in CSS depends on the fonts available on the user’s browser. Hence, there are a limited number of fonts that are considered “web-safe” — in other words, very likely to exist on any user’s system. The value of the font-family property is usually expressed as a list, from the most preferred font to a font to use if no other fonts are found. Usually the last value is either “serif” or “sans-serif” to indicate that if none of the specific fonts are available, use the browser’s default serif or sans serif font.
Example of the font-family property:
p{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Font size can be set in pixels, points, or em. An em stands for the height of a capital “M” in a specific font face and size. As mentioned before, it’s often a good idea to use em because the sizes of fonts vary a good bit between browsers and you want the fonts sized relative to each other.
Font sizes are inherited, meaning that if there’s a font size set on a parent element, its child element will either be the same size or will size based on the parent. In other words, if the body tag is set to a font size of 14pt, then the heading tags will scale up in relation to that value. If you use an em value on a child element, it will scale in relation to whatever styles are set on its parent.
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14pt;
}
p{
font-size: .9em;
}
CSS offers very fine-tuned control over how text is styled. First the basics: bold, italics, and alignment. Here’s an example of the properties that control those three:
p{
font-weight: bold;
font-style: italic;
text-align: right;
}
Some other options include controlling the line spacing with the line-height property and the distance between letters with letter-spacing.
p{
font-size: 14px;
line-height: 2em;
letter-spacing: .2em;
}
We’ve already looked at borders, but there are also margins and padding to think about. All three of these affect the way an element flows around other elements in the page. Margins are the spaces outside of an element, while padding is the space within an element. The layout around an element is called the box model because the area that an element occupies can be thought of as a box.
More about the box model here: http://www.w3schools.com/css/css_boxmodel.asp
Margins and padding can be set so that all sides are the same or so that each side has different values. The syntax you use in CSS will depend on how many of the sides need to be different.
If the padding around the inside of the entire box is 10px, you only need to specify one value. Like this:
#content{
padding: 10px;
}
On the other hand, if you want the padding on each side to be different, you need to specify four values. Start with the top value and go clockwise:
#content{
padding: 5px 0 10px 1px;
}
In the example above, the padding on top is 5px, the right is 0, bottom is 10px, and left is 1px. Remember, it’s clockwise starting at 12 o’clock.
Often you won’t need four separate values, you’ll want the top and bottom to be one value and the left and right to be another. There’s a shortcut for that. Use two values, starting with the top/bottom values:
#content{
padding: 5px 10px;
}
Here, the top and bottom padding values are 5px, and the left and right are 10px.
It’s also possible to set the value for just one side at a time, like this:
#main{
margin-left: 20px;
}
In HTML, a block element is one that takes up space for itself in the flow of the page by creating line breaks before and after itself. Inline elements, on the other hand, do not force line breaks and do not break out of the flow of the page. In CSS, an element can be set as an inline or a block element using the display property. This means you can change block elements to inline and vice versa.That can come in really handy when you want to do something like make an HTML list display as a horizontal navigation bar.
#nav li{
display: inline;
}
####But wait! A new way to display!#### There's a newer display type that can save you some trouble with floating elements (covered in the next section). It's called an inline-block. Read this nice, succinct tutorial about it to learn more.
To allow elements to flow around each other horizontally, CSS uses floating. Floating is similar to what you might think of in the print world as wrapping. Elements can float to the left or the right, allowing other elements to fill in the horizontal space next to them. Think of a page with a narrow sidebar down the right side and a wider content section to its left. The sidebar is most likely floated right.
To position two boxes side-by-side on a page, we need to first give them widths so that they can reasonably both fit in the area of the browser. For instance, the browser window may be 1000 pixels wide, so we could make both boxes 400px just to make sure we have enough room. This would be plenty of space for most windows, but keep in mind that if the user makes the window smaller than the two boxes, then they’ll stack vertically. You can try this out by changing the size of your browser window.
Here’s what the CSS would look like:
#box1{
width:400px;
margin-right: 25px;
float:left;
}
#box2{
width:400px;
float:left;
}
Notice that both of these boxes are floated left, and the first one has a right margin of 25px. This will make them sit next to each other on the left side of the page with a 25px gutter between them. You could also float the second box to the right, and it would stick to the far right of the page, making the size of the gutter vary depending on the size of the window.