CSS Crash Course: Intro to Cascading Style Sheets
ColdFusionSo…lets talk about Cascading Style Sheets…
“Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language.” Wikipedia.com
“Markup language” in this case is referring to HTML or XML. Although, I have only used CSS for HTML code.
A simple example of a use for a .css page would be to determine the style of the <body> section of an html page. You can predetermine any style attributes in this style.css page that you could using <body style=””>
Found in a file called ‘style.css’
BODY {
Background: white;
Font-family:verdana, arial, Helvetica, sans-serif;
Font-size:12px;
}
Note: You can assign styles to any DOM objects on the page. For example you could assign style attributes to P {} or H1{} etc.
Think of a HTML page in terms of a collection of containers…if you assign a style to the <body>, everything within the <body></body> tags will inherit those styles unless you specify otherwise (i.e. set the style of each object in the style.css page).
Now that you have your style.css page created, you need to relate that to your html page so it “knows” what style to apply. The call to the style.css page is assuming it is in the same directory as your html page. You could also store the stylesheet in another directory that would just be called using a relative path.
Found in which ever .html page you choose (for example index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" /> <!—this is where you are linking the stylesheet-->
</head>
<body>
</body>
</html>
Add Comment
Loading....