-
Notifications
You must be signed in to change notification settings - Fork 18
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 design in 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][] [http://www.csszengarden.com/] 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 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>