<head>
<style type="text/css">
hr {color:yellow;}
p {margin-left:20px;}
body {background-image:url("pictures/profile10.gif");}
</style>
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
<link rel="stylesheet" type="text/css" href="Snyderstyle.css" />
#text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
p {color:red;text-align:center;}
/*This is a comment, CSS declarations always ends with a semicolon,
and declaration groups are surrounded by curly brackets*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
#para1
{
text-align:center;
color:red;
}
/*This is another comment, This style rule will be applied to the element with id="para1"*/
.center {text-align:center;}
/*This is another comment, all HTML elements with class="center" will be center-aligned*/
</head>
<style> /* I use the <style> and </style> tags and then define the type of text I want to format */
<!--
textstylename {
attribute: value;
}
-->
</style>
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<style>
<!--
h1 {
color : #FF0000; /*I want to display the colour red for all heading 1 text*/
}
-->
</style>
</head>
<body>
<h1>This heading is defined by the style.</h1>
</body>
</html>
<html>
<head> /* This stylesheet defines text in the <h1> heading */
<title>This text appears in the title bar.</title>
</head>
<style>
<!--
h1 {
}
p {
/* This stylesheet defines text in the <p> paragraph text */
color : #00FF00;
background-color: $FF0000;
text-align : center; /* Text-align attributes */
}
-->
</style>
</head>
<body>
<h1>This heading is defined by the style.</h1>
<p>This is text is modified by the paragraph style.</p>
</body>
</html>
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<style>
<!--
h1 {
color : #FF0000;
}
p {
color : #00FF00;
background-color: $FF0000;
text-align : center;
}
-->
</style> /* this style defines formatting for the <p> paragraph text */
</head>
<body>
<h1>This heading is defined by the style.</h1>
<p>This is paragraph text gets modified by the paragraph
style.</p> /* A single style formats text stored in both <p> tags*/
<p>This is paragraph text also gets modified.</p>
</body>
</html>
<style>
<!--
.classname {
/* I can define style classes if I want the flexibility to choose different styles to use for text stored within identical tags. A style class lets me define formatting and then I can apply this style class to any type of text stored within different types of tags. I define a class name and its formatting attributes to create a style class.
*/
attribute: value;
}
-->
</style>
<tag class = “classname”>Text to be formatted</tag> /*Include the class name within a tag to use a style class*/
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<style> /*Style classes let me apply different styles to text stored within identical tags*/
<!--
.firstclass {
color : #FF0000;
}
.secondclass {
color : #00FF00;
text-align : center;
}
-->
</style>
</head>
<body>
<h1 class = “firstclass”>This heading is defined by the
firstclass style.</h1>
<p class = “firstclass”>This is paragraph text gets
modified by the firstclass style.</p>
<p class = “secondclass”>This is paragraph text gets
modified by the secondclass style.</p>
</body>
</html>
store stylesheets in separate files.
h1 {
color : #FF0000;
}
.myclass {
/*the stylesheet simply contains the tag or class names along with the attributes I want to modify, when the stylesheet is stored as a separate file.*/
color : #00FF00;
text-align : center;
}
/*I store one or more styles in a separate file saved with the .css file extension.*/
<link rel = “stylesheet” jref = “stylesheet.css” type = /* I include that stylesheet file in my HTML Web page by adding the <link> tag*/
“text/css” media = “screen”> /* The media portion of the <link> tag defines how the Web page will be viewed. i.e. braille, aural, handheld.*/
.firstclass {
color : #FF0000;
}
.secondclass {
color : #00FF00;
text-align : center;
} /* I store the styles in a styleme.css file*/
<html>
<link rel = “stylesheet” href = “./styleme.css” type =
“text/css” media = “screen”> /* I include this stylesheet in any HTML Web page by using the <link> tag*/
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<h1 class = “firstclass”>This heading is defined by the
firstclass style.</h1>
<p class = “firstclass”>This is paragraph text gets
modified by the firstclass style.</p>
<p class = “secondclass”>This is paragraph text gets
modified by the secondclass style.</p>
</body>
</html>
<html> /* Any styles stored in the HTML code of my Web page takes precedence over any styles stored in either the file2.css or file1.css external files. The text will be formatted according to the stylesheet closest to the text. Styles stored in an internal stylesheet take precedence over an external stylesheet.*/
<link rel = “stylesheet” href = “./file1.css” type =
“text/css” media = “screen”> /* I define the order to apply the external stylesheets by using multiple <link> tags if I have two external stylesheets that format the same text.*/
<link rel = “stylesheet” href = “./file2.css” type = /* the styles stored in the file2.css stylesheet take precedence over the styles stored in the file1.css. */
“text/css” media = “screen”>
<body>
</body>
</html>
1 comment:
XSLT/CSS is the skin defining the look of the webpage.
Post a Comment