Scribd
Upload
19 views

Css Styles Types

This document is an HTML file demonstrating various CSS styling methods including inline, internal, and external styles. It showcases the use of selectors, properties, and values to style different HTML elements. The document includes examples of specific selectors and the use of the !important rule to override styles.

Uploaded by

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

Css Styles Types

This document is an HTML file demonstrating various CSS styling methods including inline, internal, and external styles. It showcases the use of selectors, properties, and values to style different HTML elements. The document includes examples of specific selectors and the use of the !important rule to override styles.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All CSS Styles Together</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Internal Stylesheet */
h2 { /* Selector: h2 */
color: green; /* Property: color; Value: green */
text-align: center; /* Property: text-align; Value: center */
}

.internal-text { /* Selector: .internal-text */


font-style: italic; /* Property: font-style; Value: italic */
}

/*Example of more specific selector*/


body > div > p{
font-size: 18px;
}
</style>
</head>
<body>

<h1>All CSS Styles Together</h1>

<p style="color: blue; font-size: 16px;">This text is styled with inline


CSS.</p>

<h2>This heading is styled with internal CSS.</h2>


<p class="internal-text">This paragraph is styled with internal CSS (class
selector).</p>

<div id="external-div">
<p>This paragraph is styled with external CSS.</p>
<p class="external-class">This paragraph is styled with external CSS (class
selector).</p>
<p style="color:orange !important;">This paragraph is styled with inline
css and !important rule. it will override all other styles</p>
</div>

<div>
<p>This paragraph is styled with internal css with more specific
selector.</p>
</div>

<p style="background-color: lightgray; padding: 10px;">This paragraph has


inline styles for background and padding.</p>

<p class="internal-text" style="text-decoration: underline;">This paragraph has


both internal (class) and inline styles. Inline will take precedence.</p>

</body>
</html>

You might also like