beginnersbook.com

  • Home
  • All Tutorials
    • Learn Servlet
    • Learn JSP
    • Learn JSTL
    • Learn C
    • Learn C++
    • Learn MongoDB
    • Learn XML
    • Learn Python
    • Learn Perl
    • Learn Kotlin
    • Learn jQuery
  • Core Java
  • OOPs
  • Collections
  • Java I/O
  • JSON
  • DBMS

How to insert CSS into HTML

By Chaitanya Singh | Filed Under: CSS Tutorials

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML. There are three ways to insert CSS style sheet into HTML.

1) Using External style sheet: Best method of adding CSS

This is one of the best method of adding the css styling to a HTML page. This is how it is done.

Lets say this is the css file:

style.css

h1 {color:#008000;}
p {margin-left:10px;}
body {text-align:center;}

To add a style sheet to HTML, we use the <link> tag in the header section of HTML page, like this:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

2) Internal Style sheet

If you do not want to have a separate style sheet then you can simply write your CSS in the head section of HTML page like this: Remember to enclose the code within <style> and </style> tags.

<head>
 <style>
   h1 {color:#008000;}
   p {margin-left:10px;}
   body {text-align:center;}
 </style>
 </head>

2) Inline Styles

You can code the CSS along with the HTML tags itself. Consider the below example:

<p style="color:blue; font-size: 16px; margin:20px;">This is the content of my paragraph</p>

Here we have specified the style in the </p> tag itself. Same way we can style other HTML elements using this inline styling method. Even though it is easier to code the things using this method, still it is not recommended when we build a website or an online application. The reason is that if any change is required you need to make that change in the HTML code itself. It is much easier to maintain a separate style sheet.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

SEO

  • Write SEO Articles
  • Open Graph Meta Tags
  • SEO Friendly Images
  • SEOPressor Review
  • Auto Interlink Posts

WordPress

  • Free plugins to add Open Graph Tags
  • Free plugins to add Captcha
  • Set thumbnails automatically
  • Display related Posts WP
  • Change Post excerpt length WP

Website

  • Add Facebook like button
  • Add Google plus button
  • Add Twitter button
  • Create Free Website on blogspot

Recently Added..

  • JSON Tutorial
  • Java Regular Expressions Tutorial
  • Java Enum Tutorial
  • Java Annotations Tutorial

Copyright © 2012 – 2022 BeginnersBook . Privacy Policy . Sitemap