About CSS
CSS stands for Cascading Style Sheets. A style sheet is a set of directions detailing how a browser should display the content of a page. It allows web developers to set typographic (text typeface, font, size, color, etc.) and page layout instructions to entire web sites with one set of instructions. So, for example, a css page could provide direction about what the margins should be on every page of the web site. Modern web designers separate out the content (the information) of a page from its formatting (how it's diplayed).
This separation is helpful for several reasons:
CSS can take the form of:
HTML stands for Hypertext Markup Language. This is the set of symbols or coding you have been using in this course to create your web pages.
A newer version of HTML, called XHTML (Extensible Hypertext Markup Language), reformulates the coding to allow for more developed and structured coding. It also helps web designers create sites which work more fluidly with modile devices like cell phones.
XHTML works very similarly to HTML. As a beginner, the biggest difference you need to know is:
Every xhtml document should begin with this crazy looking tag set. This code references a Document Type Definition or DTD. A DTD is a file that identifies for the browser what version of HTML you are using. Just copy and insert it instead of the opening <html> tag:
<!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" xml:lang="en" lang="en">
A Generic CSS Setup
A CSS Example:
body { background-color:green;}
p {
background-color:white;
border-width:10px;
border-style:dashed;
font-size:30pt;
border-color:blue;
}
THE HTML FILE with the CSS inserted (In-line CSS):
<html>
< head>
< title>My CSS Example</title>
< /head>
< body >
< p style="background-color: yellow; border-width:10px; border-style: dashed; font-size:30pt; border-color:blue;">Hello world!</p>
< /body>
< /html>
THE HTML FILE with a Style section (Embedded CSS):
<html>
<head>
< title>My CSS Example</title>
< style type="text/css">
body{background-color: green;}
p{background-color: yellow; border-width:10px; border-style: dashed; font-size: 30pt; border-color:blue;}
< /style>
< /head>
<body>
< p>Hello world!</p>
< /body>
</html>
THE HTML FILE with a link to another CSS page (External CSS):
<html>
<head>
<link rel="stylesheet" type="text/css" href="myCSSpageName.css"/>
<title>My CSS Example</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
This separation is helpful for several reasons:
- The html page becomes a much smaller file size and can load quicker.
- Global styling changes to an entire web page can be made with just a few code alternations in the CSS rather than to each html element on every page.
- Styles and formatting can be changed without changing the content in the html document.
- CSS styling is more powerful than html in defining how a page should be displayed
CSS can take the form of:
- Inline Styles which are coded directly into the body section of an xhtml document.
- Embedded Styles which are coded into the header section of a web page.
- External Styles which are coded into a separate text document saved with the extension .css and which are associated with the xhtml document through a <link /> tag element in the header section.
HTML stands for Hypertext Markup Language. This is the set of symbols or coding you have been using in this course to create your web pages.
A newer version of HTML, called XHTML (Extensible Hypertext Markup Language), reformulates the coding to allow for more developed and structured coding. It also helps web designers create sites which work more fluidly with modile devices like cell phones.
XHTML works very similarly to HTML. As a beginner, the biggest difference you need to know is:
Every xhtml document should begin with this crazy looking tag set. This code references a Document Type Definition or DTD. A DTD is a file that identifies for the browser what version of HTML you are using. Just copy and insert it instead of the opening <html> tag:
<!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" xml:lang="en" lang="en">
A Generic CSS Setup
A CSS Example:
body { background-color:green;}
p {
background-color:white;
border-width:10px;
border-style:dashed;
font-size:30pt;
border-color:blue;
}
THE HTML FILE with the CSS inserted (In-line CSS):
<html>
< head>
< title>My CSS Example</title>
< /head>
< body >
< p style="background-color: yellow; border-width:10px; border-style: dashed; font-size:30pt; border-color:blue;">Hello world!</p>
< /body>
< /html>
THE HTML FILE with a Style section (Embedded CSS):
<html>
<head>
< title>My CSS Example</title>
< style type="text/css">
body{background-color: green;}
p{background-color: yellow; border-width:10px; border-style: dashed; font-size: 30pt; border-color:blue;}
< /style>
< /head>
<body>
< p>Hello world!</p>
< /body>
</html>
THE HTML FILE with a link to another CSS page (External CSS):
<html>
<head>
<link rel="stylesheet" type="text/css" href="myCSSpageName.css"/>
<title>My CSS Example</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>