Scribd
Upload
122 views

M3 CSS

To link an external style sheet to an HTML document, the <link> tag is used in the <head> section of the HTML document. The <link> tag requires the following attributes: - rel="stylesheet" - Specifies the relationship between the HTML document and the linked CSS document. - type="text/css" - Specifies the type of document being linked is a CSS file. - href="mystyle.css" - Specifies the path/URL to the external CSS file. So the full code to link an external CSS file called "mystyle.css" would be: <link rel="stylesheet" type="text/css" href="mystyle.css">

Uploaded by

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

M3 CSS

To link an external style sheet to an HTML document, the <link> tag is used in the <head> section of the HTML document. The <link> tag requires the following attributes: - rel="stylesheet" - Specifies the relationship between the HTML document and the linked CSS document. - type="text/css" - Specifies the type of document being linked is a CSS file. - href="mystyle.css" - Specifies the path/URL to the external CSS file. So the full code to link an external CSS file called "mystyle.css" would be: <link rel="stylesheet" type="text/css" href="mystyle.css">

Uploaded by

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

MODULE 3

CASCADING STYLE SHEETS (CSS)


CASCADING STYLE SHEETS (CSS)

• Levels of Style Sheets


• Style Specification Formats
• Selector Forms
• Property-Value Forms
• Font Properties
• List Properties
• Alignment of Text
• Color
• The Box Model
• Background Images
• The span and div Tags
INTRODUCTION

• HTML specify the content and structure of a


document.

• CSS is the W3C technology for formatting and


presenting the information in the document.

• Hence the structure ( section headers, body text,


links etc) can be separated from the presentation
(font, spacing, colors etc.) which simplifies the
maintenance and modification of a webpage.
CASCADING STYLE SHEETS

• HTML style sheets are called Cascading style sheets


because they can be defined at three different levels to
specify the style of the document.

• Lower-level style sheets can override higher-level style


sheets.

• So the style of the content of a tag is determined by a


cascade of style sheet applications.
LEVELS OF STYLE SHEETS

• Inline: lowest level


–Applies to the content of a single tag

• Document: intermediate level


–Applies to the whole body of a document

• External: highest level


–Applies to the body of any number of documents
ORDER OF PRECEDENCE

highest •Inline styles


intermediate •Document styles
lowest •External styles
INLINE STYLES

• Used to declare an individual element’s


format

–Attribute style
–CSS property
– Followed by a colon and a value

<p style=“color:red; font-family:arial”>


This paragraph is displayed with syle</p>
DOCUMENT-LEVEL STYLE SHEETS

• Document level style specification appear in the document head section


and appear to the entire body of the document.

<style type="text/css">
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
color:darkgreen;
}
.special{color:blue;}
</style>
EXTERNAL STYLE SHEETS

– Separate style sheet file with .css extension

– External style sheets are not part of any documents to which


they apply

– They are stored separately and are specified in all documents


that are meant to use them.

– External style sheets are written as text files with the MIME
type text/css

– External style sheets are used if a style sheet need to be


applied to more than one document
LINKING EXTERNAL STYLE SHEETS

• The <link> tag is used to specify external style sheets.

• rel attribute is used to specify the relationship of the linked-to


document to the document in which the link appears.

• href attribute of the <link> is used to specify the URL of the


style sheet document.

<link rel=“stylesheet” type= “text/css”


href=“mystyle.css”>

• The link to an external stylesheet must appear in the head of the


document.
QUESTION

• How to link an external style sheets to an HTML document?


What are the attributes required for that?

You might also like