Scribd
Upload
12 views

Explain Types of Style Sheets

There are three types of style sheets: 1. Internal style sheets are placed within <style> tags in the <head> section and only apply to that page. 2. External style sheets are linked via <link> tags and apply to all pages that reference the external .css file. 3. Inline style sheets are applied directly to elements using the style attribute and only affect those elements.

Uploaded by

SyedaDF Ikram
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

Explain Types of Style Sheets

There are three types of style sheets: 1. Internal style sheets are placed within <style> tags in the <head> section and only apply to that page. 2. External style sheets are linked via <link> tags and apply to all pages that reference the external .css file. 3. Inline style sheets are applied directly to elements using the style attribute and only affect those elements.

Uploaded by

SyedaDF Ikram
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Explain types of Style sheets.

What is Style Sheet?

 It is a definition of a document's appearance in terms of elements such as the default


typeface, size, color for headings and body text etc.
 The Style Sheet definitions created with a CSS file can be inserted into HTML
documents.
 A Cascading Style Sheet is Style Sheet which is used for describing the presentation
of a document written in a markup language.

Types of Style Sheet

There are three types of Style Sheet:


1. Internal
2. External
3. Inline

1. Internal

 It can be placed inside the <head> tag.


 It defines the Style Sheet rules using <style> tag.
 It can be used only for the web page in which they are embedded.

Example:
<html>
<head>
<style>
h2 {color: blue;}
</style>
</head>
<body>
<h2>CareerRide Info</h2>
</body>
</html>

Output:

CareerRide Info
2. External

 It is declared in an external file with a .css extension.


 The external Style Sheets are called using the <link> tag.
 The <link> tag takes three attributes:

1. rel: This attribute takes “stylesheet” value.


2. type: This attributes takes “text/css” value.
3. href: This attribute denotes the name or location of the external Style Sheet which
is going to be used.

 This <link> tag should be placed in <head> tag.

Example:
<head>
<link rel = “stylesheet” type = “text/css” href = “abc.css”>
</head>

3. Inline

 It can be directly placed in the HTML element.


 In Inline Style Sheet, we cannot use the Style Builder to make an Inline Style Sheet.
 It can be declared within individual tags and affected on those tags only.
 This Style Sheet is declared with a “style” attribute in a <style> tag.

Example:
<h2 style = “color:blue;”>CareerRide Info</h2>

Which type of CSS is good for developer & Why?


 Web developers always need some CSS tools to simplify their job.
 Now a day, there are various tools which act as time savers for the developers and aid
the developers with modern designs and functionality.
 There are a number of CSS tools and generators available for the web developers to
help them in working smoothly.
 External CSS is good for the developer to develop the CSS. Because it takes only link
of that particular CSS where you can write all the designing part which is going to be
used in your web page.

Style Sheet properties:

 CSS Style Sheet properties retrieves an interface pointer.


 It provides access to the Style Sheet object's properties and methods.

Following are the Style Sheet properties:

Property Description
A shorthand property for setting all the background properties in one
CSS Background
declaration.
CSS Text-align Specifies the horizontal alignment of text.
CSS Font Sets all the font properties in one declaration.
CSS Border Sets all the border properties in one declaration.
CSS Outline Sets all the outline properties in one declaration.
CSS Margin-bottom Set the bottom margin for a <p> element.
CSS Padding- Set the bottom padding for a <p> element.
bottom
CSS List-style Specify all the list properties in one declaration.
CSS Table-layout Sets the layout algorithm to be used for a table.

Explain the two tags : <DIV> and <SPAN>.


Sr.
<DIV> <SPAN>
No.
It defines a division in a web It makes no visual difference in the page, unless
1.
page. customized with the style attribute.
It is a block element. The default
2. It is an in-line element.
value is “block”.
It is used while creating CSS It is used to stylize text. The in-line feature makes it
3.
based layouts in HTML. easy to use custom styles without changing the layout.
No line breaks by default, but this can be achieved if
By default, a line break is placed
4. we change its in-line nature by specifying in the style
before and after this element.
attribute to “display:block”.
It is used for defining a section It is used for grouping and applying styles to in-line
5.
of your document. elements.
Example: Example:
6.
<DIV class= “code”>CareerRide <SPAN style= “color:#FF0000;”>CareerRide Info
Info Pvt. Ltd.</DIV> Pvt. Ltd.</SPAN>
It is the generic container for
It is a generic in-line container for phrasing content,
7. flow content, which does not
which does not represent anything.
represent anything.

Explain how & when to use the following HTML


elements / tags in a web page for design. Illustrate with
suitable example.
i) Frame
ii) Heading
iii) Table

You might also like