HTML CSS

HTML CSS



HTML Style with CSS

CSS stands for Cascading Style Sheets, and this is its full name.
CSS in HTML describes how HTML elements are displayed on screen, in paper or other media. since the establishment of Consortium in 1994, W3C used the use of style sheets on the Web, more Have promoted.

In the HTML document, Cascading Style Sheets (CSS) provides easy and effective options for various tags for HTML tags. Using Cascading Style Sheets (CSS), you can specify many style properties for a given HTML element. Even before this we have said that each property has its name and value, which is separated with the help of colon (:). Every property declaration is different from half-colon (;)
CSS can be linked to HTML elements in 3 ways in the HTML document:



  1. Inline - By using style attributes in HTML elements
  2. Internal - using the <style> element in the <head> section of HTML
  3. External - Using external file.


The most common and easiest way to add HTML documents CSS is to put styles in different CSS files. However, the reason we will use inline and internal style here is because it is easy to display.

Inline css
An inline CSS in HTML is used to implement a unique style in an HTML style.

An inline CSS always uses the style attribute of an HTML element.
Example


<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>


Internal CSS

In an HTML document, an HTML uses an internal CSS to define a style for CSS.
An internal CSS is always defined in the <head> section within the <style> element, in the HTML document:
Example


<!DOCTYPE html>
<html>
<head>
<style>
 body {background-color: powderblue;}
 h1   {color: blue;}
 p    {color: red;}
</style>
</head>
<body>
 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>
</body>
</html>



External CSS

The HTML document uses external style sheets to define style for many HTML pages.
With the external style sheet, you can change the look of your entire website, by changing a file!
To use external style sheets, add a link to the <head> section of the HTML document:
Example


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>


You can write an external style sheet in any text editor in HTML. The file should not contain any HTML code, and must be saved with a .css extension.
Example


body {  
background-color: powderblue; }
h1 {  
color: blue; }
 p {     color: red; }



CSS Fonts
 In HTML, CSS uses color property to define text color. In HTML, CSS fonts-family property defines the font used. In HTML, CSS defines the text size to use the font-size property.
Example

<!DOCTYPE html> 
<html> 
<head> 
<style> 
h1 {   color: blue;     font-family: verdana;     font-size: 300%; }
 p  {     color: red;     font-family: courier;     font-size: 160%; }
 </style>
 </head> 
<body> 
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body> 
</html>



CSS Limit
The CSS border property in HTML displays a border around an HTML element:
Example

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p {     border: 1px solid powderblue; }
</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>
 </html>




Css padding
The CSS padding property in HTML displays a padding between the text and the border:
Example

<!DOCTYPE html> 
<html> 
<head> 
<style>
p {     border: 1px solid powderblue;     padding: 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> 
</html>




CSS margins
CSS margin defines a margin (space) outside the property range in HTML:
Example

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p {     border: 1px solid powderblue;     margin: 50px; }
 </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> 
</html>

  •  style attribute for inline styling
  • <style>element to define internal CSS
  • <link> element to refer to an external CSS file
  •  <head> element to store <style> and <link> elements
  •  color property for text colors
  • font-family property for text fonts
  •  font-size property for text sizes
  • border property for borders
  •  padding property for space inside the border
  •  margin property for space outside the border

HTML Style with CSS CSS stands for Cascading Style Sheets, and this is its full name. CSS in HTML describes how HTML elements are displayed on screen, in paper or other media. since the establishment of Consortium in 1994, W3C used the use of style sheets on the Web, more Have promoted.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget