CodesJava

Easy learning with example program codes

HTML with CSS

CSS or Cascading Style Sheets apply style to HTML elements to make it more attractive when displayed on a web page.

There are 3 ways to apply CSS to html elements. These are:

  • Inline CSS: Uses the style attribute in HTML elements.
  • Internal CSS: Uses a <style> element in the <head> section.
  • External CSS: Uses an external CSS file.

Inline CSS:

Uses the style attribute to apply CSS to a single HTML element.

Example:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:crimson;font-style: italic;">Hello World!!</h1>
</body>
</html>

Output:




Hello World!!

Explanation:

In the above example, we used the style attribute to add CSS to a single HTML element.

 

Internal CSS:

Uses a <style> element in the <head> section to apply CSS to a single HTML page.
Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1   {background-color: crimson; color: white;}
p    {color: crimson;font-size: 25px;font-style: italic;}
</style>
</head>
<body>
<h1>Hello World!!</h1>
<p>How are you?</p>
</body>
</html>

Explanation:

In the above example, we used a <style> element in the <head> section to apply CSS to a single HTML page.

 

External CSS:

Uses an external CSS file to apply CSS to multiple HTML pages. The link tag is used to include external file in a html page.

Note: As most of the websites contains multiple pages and look and feel should be same for entire website. So, instead of applying CSS to individual pages, we can create external CSS file which can be included on all or any page where ever needed. By this approach we can change the look and feel of entire website by just changing one file. This is the most common approach to apply CSS.
Example:
Hello1.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<p>How are you?</p>
</body>
</html>

Hello2.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello w3spoint</h1>
<p>How are you?</p>
</body>
</html>

style.css:

h1   {
background-color: crimson; 
color: white;
}
p    {
color: crimson;
font-size: 25px;
font-style: italic;
}

Explanation:
In the above example, we used an external CSS file to apply CSS to multiple HTML pages.

 

CSS Properties:

Some of the commonly used CSS properties are:

PropertySyntaxUses
background-colorbackground-color:yellow;To specify the background color of an HTML element.
colorcolor: crimson;To specify the color of the text of an HTML element.
paddingpadding: 10px;To specify the space gap between content and the border.
marginmargin: 20px;To create space gap around an HTML element.
font-familyfont-family: arial;To specify the font-family for an HTML element.
Font-sizefont-size: 20px;To specify the font size for an HTML element.
text-aligntext-align: center;To align a particular text in a selected position.

HTML Style Tags

style tag: It is used to apply and define details for an HTML Page.
link tag: It is used to include an external CSS into an HTML page.

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status