Scribd
Upload
13 views9 pages

Cascading Style Sheets: By: Shaina Ashraf

This document discusses three methods for applying CSS styles: inline, internal, and external. Inline styles are applied directly in HTML elements using a style attribute. Internal styles are defined within <style> tags in the HTML <head> using classes, IDs, or general element types. External styles are defined in separate CSS files linked via <link> tags. The document provides examples of each method.

Uploaded by

jahanzeb
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
13 views9 pages

Cascading Style Sheets: By: Shaina Ashraf

This document discusses three methods for applying CSS styles: inline, internal, and external. Inline styles are applied directly in HTML elements using a style attribute. Internal styles are defined within <style> tags in the HTML <head> using classes, IDs, or general element types. External styles are defined in separate CSS files linked via <link> tags. The document provides examples of each method.

Uploaded by

jahanzeb
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/ 9

Cascading style

sheets
By: Shaina Ashraf

CSS apply methods


In-line
using a style attribute in HTML elements

Internal
using a <style> element in the HTML <head> section
Using IDs
Using Class

External
using one or more external CSS files

In-line Style
<p style="color:blue;marginleft:30px; >text</p>
<h1 style="color:blue">This is a
Blue Heading</h1>

Internal
Embedded, or internal, styles are
used for the whole page.
Inside the head element, the style
tags surround all of the styles for the
page.

<head>

Internal

<title>CSS Example</title>
<style>
p{

color: red;
}

a{

color: blue;
}

</style>

<head>

<style>

p{

Internal

border:1px solid grey;

padding:10px;

margin:30px;

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

</body>

Internal (using ID)


To define a special style for one special
element, first add an id attribute to the
element:
p#p01 {
color:blue;
}
<p id="p01">I am different</p>

Internal (using Class)


To define a style for a special type (class) of
elements, add a class attribute to the
element:
<p class="error">I am different</p>
p.error {
color:red;
}

Difference b/w Id & class


Use id to address single elements.
Use class to address groups of
elements.

You might also like