Scribd
Upload
6 views

R18 WT Unit-2 CSS NOTES

R18 jntuh

Uploaded by

amulyapittala2195
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

R18 WT Unit-2 CSS NOTES

R18 jntuh

Uploaded by

amulyapittala2195
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

CASCADING STYLE SHEETS

Anatomy of a Style Sheet


The anatomy of a style sheet includes some terminology that is likely new to you, such as
declarations and selectors. Here are some examples of how these terms relate to style
sheet programming.

Rules
At the very core of CSS are rules. The following is an example of a simple CSS rule:

h1 {color:green;}

Rules consist of two parts - the selector and the declaration. In the example above, the H1
tag is the selector (the object being modified), and the color is the declaration (what part
– color – and how – to green – the selector is being changed).

The following in an example of a CSS declaration:

{color:green;}

The declaration has two parts - the property and the value. In the example, above,
property is the color of the H1 tag that is being modified. The value is set to green, which
specifies how the property is being modified.

Adding CSS to XHTML


Defining the CSS rules is only a part of adding CSS to your pages. Once you have
defined your rules, you need to add the CSS rules to your XHTML document so it is
rendered properly by the browsers. This is done by simply adding a small bit of code
within the <head> tag of your XHTML document.

R18 WT – UNIT2 – CSS NOTES By P.Kishor, HOD & Assoc. Prof., SCIT,KNR Page 1
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
h1 {
color: #FF0000;
}
-->
</style>
</head>

<body>
<h1>How are you doing today?
</h1>
</body>
</html>

Grouping Selectors
As you add more and more styles to your pages, you might find yourself making the
same stylistic change to multiple XHTML elements. In these cases, you might consider
grouping your CSS selects. This can shorten the amount of code and make for a quicker
download.

h1 {color: blue; font-family: verdana}


h2 {color: blue; font-family: verdana}
h3 {color: blue; font-family: verdana}

They could be optimized and grouped like this:


h1, h2, h3 {color: blue; font-family: verdana}

This rule specifies that all the text within h1, h2, h3 tags will display in the Verdana font
with a blue color.

Class Selectors
In the preceding examples, you learned how to create styles based on XHTML elements
using selectors. Selectors are related to XHTML elements. If you wanted to apply a style
to something that wasn’t a tag (let’s say there was a certain sentence in your document
that you wanted to be bold, but it wasn’t anything other than text from a structural
definition), this kind of situation is where Class selectors are of value. Another situation
is which a Class selector comes in handy is when you want to style the appearance of
XHTML tags differently. Earlier you learned how to redefine the appearance of an
XHTML element (the h1 tag). Suppose you don’t want to format every h1 tag the same
way? This is a perfect place to consider creating a Class selector. Consider the following
code:

R18 WT – UNIT2 – CSS NOTES By P.Kishor, HOD & Assoc. Prof., SCIT,KNR Page 2
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.mytext {
color: #FF6600;
}
-->
</style>
</head>

<body>
<p class="mytext">This is how you use class selectors.
</p>
<p>&nbsp;</p>
</body>
</html>

 Class selectors are written in this syntax: always beginning with a dot (.) and a
unique name.
 The Class selector is applied to the XHTML element using the class attribute and
the name you assigned to the class. In this example, we gave the class the name of
“mytext”. Notice that the dot (.) is not included in the class attribute.

By creating a Class selector, you could now apply this formatting anywhere in your
document independent of the XHTML element. It will apply this format only where it
encounters this class, not across every instance of an XHTML element like previously
shown.

Here is an example of Class selector being applied only to a specific portion of a


paragraph:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.mytext {color: #FF6600; font-family:verdana; font-weight:bold;}
-->
</style>

R18 WT – UNIT2 – CSS NOTES By P.Kishor, HOD & Assoc. Prof., SCIT,KNR Page 3
</head>

<body>
<p>This is how you use <span class="mytext"> class</span> selectors. </p>
<p>&nbsp;</p>
</body>
</html>

 The Class selector syntax is displayed on this line with the font-family and the
font-weight properties applied.
 The <span> tag is used to designate the area of text that is to be formatted using
the Class selector. Notice that there is a closing </span> tag to end the formatting.

Block-Level and Inline-Level Elements


Block-level elements acts like boxes that start at the margin of one line of text and end so
that the content after the closing element is forced to start on a new line of text. The
content of a block-level element can be, and typically is, several lines long. Basically,
block level elements start and end a line of text. For example, the paragraph <p> element
is a block-level element. It starts at one margin and anything that comes after the closing
</p> element is forced to appear on a new line. Any formatting applied to a block-level
element will affect everything within it.

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.mytext {
color: #CC9900;
}
-->
</style>
</head>

<body>
<div class="mytext">
<p>Greenwaves, Inc </p>
<p>Company Information</p>
</div>
</body>
</html>

R18 WT – UNIT2 – CSS NOTES By P.Kishor, HOD & Assoc. Prof., SCIT,KNR Page 4
A <div> element is used to create a range, or invisible box if you will, around the two
<p> elements. The body Class is attached to the <div> element, which causes both
paragraphs to be formatted with the body Class. So, instead of applying the body Class to
both paragraph elements, it was applied once to the <div> element. This results in less
code, which is a good thing.

Inline elements: As described, inline-elements act like boxes as well, except they are used
within block-level elements. This is the difference between the two. For example, if you
have a <div> element that is the formatting a paragraph of text with a style sheet and you
want to format a single word within that <div> element, you would use the inline element
<span>.

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.color1 {
font-family: "Times New Roman", Times, serif;
color: #FF3300;
}
.color2 {
font-family: Arial, Helvetica, sans-serif;
color: #339933;
}
-->
</style>
</head>
<body>
<h1 class="color1">How are we <span class="color2"> doing </span> today? </h1>
</body>
</html>

Pseudo-Classes

So far, you have learned about selectors, classes, and Ids. Things are about to get
interesting with pseudo-classes. These are class selector that let the designer apply styles
to element that don’t exist within the document. It lets you apply styles to elements that
you know will exist, you just don’t know when. For example, users are likely to move
their cursor over a link at some point. The anchor tag is probably the most common
pseudo-class. Here is an example:

R18 WT – UNIT2 – CSS NOTES By P.Kishor, HOD & Assoc. Prof., SCIT,KNR Page 5
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
a:link {
color: #FF6600;
}
a:visited {
color: #FFCC33;
}
a:hover {
color: #0066FF;
}
a:active {
color: #99CC33;
}
-->
</style>
</head>
<body>
<a href="http://www.cnn.com">link to cnn
</a>
</body>
</html>

The pseudo class is automatically applied to every anchor tag in the document. You do
not have to add any additional code in the <body> portion of the document.

The following chart identifies the pseudo-classes available in the CSS2 recommendation.
Note that pseudo-class selectors and links must be in a specific order to work properly.

:link, :visited, :hover, :active, :first-child, :lang

Types of Style Sheets


There are three popular types of style sheets: Internal (embedded), External, and inline.
There is also another type of style sheet called as Imported.

Internal
Here is an example of “internal” style sheet. Notice that the <style> element is used
inside the <head> portion of the page. All of the formatting information is contained
within the HTML page. These types of style sheets will only affect the appearance of this
single page. They can be effective for creating design efficiency within the single page.

R18 WT – UNIT2 – CSS NOTES By P.Kishor, HOD & Assoc. Prof., SCIT,KNR Page 6
Example:
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
h1 {
color: #FF0000;
}
-->
</style>
</head>
<body>
<h1>How are we doing today? </h1>
</body>
</html>

External
Here’s an example of an “external” style sheet. Notice the <link> element is using the
<href> attribute to point to the “external.css” file. The external.css file is the document
that contains all the formatting information for this XHTML page. Because the
formatting information exists independent of the XHTML page, it can easily be applied
to several XHTML pages and updated more efficiently.

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="external.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1> Check it Out! </h1>
<p> My style is really cool! </p>
</body>
</html>

The file this document references is called external.css. You can give your style sheet any
name you want; just be sure to save it in text only mode and upload it to the same
directory. Make sure to give it a .css extension. You don’t have to put an external style
sheet inside a comment tag because no style information is stored within the XHTML
code.

R18 WT – UNIT2 – CSS NOTES By P.Kishor, HOD & Assoc. Prof., SCIT,KNR Page 7
Your external.css document could look like this:
h1 {color: red; font-family: sans-serif}
p {background: black; color:yellow; font-family: verdana;}

Inline
An “inline” style sheet only applies to the parts of an HTML document that are specified
and will override any style settings being applied by an external or internal style sheet.

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1 style="font-family:sans-serif; color: gray"> Check it Out! </h1>
<h1> My style is really cool! </h1>
</body>
</html>

In the above example, Inline style will override both external and internal style. Internal
will override external.

ID versus Class
At this point, you might be wondering about the difference between a Class and ID
selector. Functionally, it doesn’t really matter because they both accomplish the same
thing. However, there are a few differences.

Ids start with a # symbol instead of a dot (.). Also, it is considered an error to use the
same ID selector more than once. In fact, Ids should be used only once within a given
document, and they should always have a unique name different from other Ids in the
document. This makes them great for absolute positioning, where they would only want
to use them once. Classes are great for formatting text because they can be used multiple
times on a web page. Because of this, you will find yourself probably using classes most
of the time.

R18 WT – UNIT2 – CSS NOTES By P.Kishor, HOD & Assoc. Prof., SCIT,KNR Page 8
CASCADING STYLE SHEETS (CSS)

CSS style sheet OR


- made up of one or more rules.
- each style rule in a style sheet has 2. Type <div
2 main parts: class="name">content</div>, where
name is the identifying name of the class
that the division belongs to.
declaration
H1{color:red}
FORMATTING WITH STYLES
value
selector 1. Choosing a Font Family

property Font-family property has a special


characteristic: you can specify more than
one font in the style rule.
SELECTOR -- indicates which elements
will be formatted. Example:
1. H1{font-family:"verdana"}
DECLARATION -- describes the
formatting that should be executed. 2. H1,P{font-family:"verdana", "tahoma"}

EXAMPLE: 2. Creating Italics

1. h1{color:red;} Italics are often used to set off


quotations, emphasized text, foreign words,
2. h1{color:red; magazine names and much more.
background:yellow;
font-family:georgia; Example:
text-align:center;} 1. H1{font-style:italic}
p{color:green;}
2. H1{font-family:"verdana", "tahoma";
3. div#gaudi{color:red;} font-style:italic}

4. div#gaudi p{color:red} 3. Applying Bold Formatting

6. div.works{color:red} Bold formatting is the most


common and effective way to make text
Breaking up a Page into Divisions stand out.

-- allows you to apply styles to an font-weight:bold


entire chunk of your page at once.
-- useful in designing layouts with Example:
CSS. 1. H1{font-weight:bold}
2. H1{font-family:"verdana", "tahoma";
To break up a page into divisions: font-style:italic;
font-weight:bold}
1. Type <div id="name">content</div>,
where name uniquely identifies the 4. Setting the Font Size
division.

R18 WT – UNIT2 – CSS NOTES By P.Kishor, HOD & Assoc. Prof., SCIT,KNR Page 9
font-size:xx-small or 16px
x-small 18px
small 24px
medium
large 9. Changing the Text Case
x-large
xx-large text-transform:capitalize
uppercase
Example: lowercase
1. P{font-size:medium}
2. H1{font-size:24px} Example:
H1{text-align:center;
5. Setting the Text Color text-transform:uppercase}

Example: 10. Decorating Text


1. P{color:blue;
font-size:small} text-decoration:underline
overline
6. Changing the Text's Background line-through
(background of the specified blink
element) Example:
H1,h2{text-transform:uppercase;
Example: text-decoration:blink}
1. P{background:red}
11. To use a background image:
2. H1{font-family:"verdana", "tahoma";
font-style:italic; background-image:url
font-weight:bold;
font-size:large; 12. Setting the border
color:blue
background:red} a. To define the border-style:

border-style:dotted
7. Adding Indents dashed
solid
text-indent:length (18px, 24px.....) double

Example: b. To set the width of the border:


1. P{text-indent:24px}
2. P{text-indent:18px} border-width:n (where n is the
desired width)
8. Aligning Text
c. To set the color of the border:
text-align:left
right border-color:color (where color is
center the color name)
justify
Example:
1. P{text-align:justify;
text-indent:24px}
2. H1{text-align:center}

R18 WT – UNIT2 – CSS NOTES By P.Kishor, HOD & Assoc. Prof., SCIT,KNR Page 10

You might also like