HTML CSS Structure



CSS - Cascading Style Sheet.

CSS Can control the web layouts of many web pages.

Here Three Ways of implementing style sheets HTML

The Designer can control the font size and color of the text and headings.

  • Inline Style :The style attribute is used inside the HTML start tag.
  • Internal Style :The style element is used inside the <head > element of the document.
  • External Style Sheet :on this method the <link > element is used to point to an external CSS file.

Inline Style

<h1 style="color:red;fontsize:15px;">CSS Inline Style</h1>

Example

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1 style="color:red;font-size:15px;">
CSS Inline Style
</h1>


<p style="color:yellow;font-size:60px;">
paragraph
</p>

<p style="color:blue;"> Content</p>



</body>

</html>


Click on the "Run This Code" button to see how it works.


Internal Style

<style type="text/css">....................</style>


Example

<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	  background-color: lightblue;
	}
	
	h1 {
	  color: red;
	  margin-left: 50px;
	} 
	</style>
	</head>
	<body>
	
	<h1>This is a heading</h1>
	<p>This is a paragraph.</p>
	
	</body>
	</html>
	


Click on the "Run This Code" button to see how it works.


External Style

<link rel="stylesheet" type="text/css" href="/html/css/externalstyle.css">

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="/html/css/externalstyle.css">
</head>
<body>
<h3>Example of Linking External Style Sheet</h3>
<p> Content.</p>
</body>
</html>


Click on the "Run This Code" button to see how it works.





HTML

Welcome HTML Getting Started HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Links HTML Styles HTML Text Formatting HTML Tables HTML Images HTML Forms HTML Lists HTML Iframes HTML Comments HTML CSS HTML Colors HTML Classes HTML Id HTML javascript HTML Filepaths

HTML Advanced

HTML Doctypes HTML Validation HTML Validation HTML URL HTML URL Encode HTML URL Entities HTML Layout HTML Head HTML Meta HTML Scripts HTML Tags

HTML Media

HTML Media HTML Audio HTML Video HTML Plug-ins HTML Youtube

HTML Graphics

HTML Canvas HTML SVG