AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

HTML div style - div style class


<< Previous Page
HTML Text and Paragrafs
Next Page >>
HTML Colors



HTML Tutorial » HTML Style

Inserting a style for div style there are three ways:
External style sheet,
Internal style sheet,
Inline style,
For any <div> on your page, you can specify any CSS property as: color, font-style, font-family, font-size, background, etc.

Inline html div style


Here in example 1 we give css to div of height, width, background and color.

Example 1:
<div style="height:300px; width:450px; color:#000000; background:#CCC"> Add your text here</div>
Note: try to avoid inline-css, you have to make external HTML div style.

Internal and external style of html div


You can archieve same using Internal or External CSS
1. Internal style for html div.
Example2:
<html >
<head>
<style>
div {
height:50px;
width:50px;
background-color:red;
}
</style>
</head>
<body>
<div> Here your text</div>
</body>
</html >

2. External style for html div.
Example 3: named index.html and we add external file named style.css in Example 4.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div></div>
</body>
Example 4 named style.css
div
{
height:350px;
width:450px;
background-color:red;
color: #000000;
}


HTML div style class


The HTML div style class attribute is used to define equal styles for item with the same class name.
So, all HTML div style class item with the same attribute will have the same format and style.
Here we have three HTML <div> class elements that point to the same class name:
Example 5:
<!DOCTYPE html>
<html>
<head>
<style>
.town {
  background-color: #CCC;
  color: #000000;
  margin: 12px;
  padding: 15px;

</style>
</head>
<body>

<div class="town">
  <h2>ROMA</h2>
  <p>ROMA is the capital of Italy.</p>
</div>

<div class="town">
  <h2>MADRID</h2>
  <p>Madrid is the capital of Spain.</p>
</div>

<div class="town">
  <h2>SEOUL</h2>
  <p>Seoul is not the capital of Japan.</p>
</div>

</body>
</html>
Note. Use External style sheet


<< Previous Page
HTML Text and Paragrafs
Next Page >>
HTML Colors



HTML div style, div style class
HTML div style - div style class - html tutorial

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


HTML Img Background
HTML Image Link
HTML Image Size
HTML Text Style
HTML Text Align
HTML Text Size
HTML Text Color Style
HTML Text Color
HTML Table Color
HTML Table Row Colspan
HTML Table Width
HTML Table Style
HTML Table Border
HTML Table
HTML Font Face
HTML Font Size
HTML Font Color
HTML Headings
HTML div border color
HTML div class
HTML class container
HTML form action
HTML comment
HTML link new tab
HTML link underline
HTML link tag
HTML button action
HTML button onclick
HTML button link
HTML table style
HTML image
HTML colors
HTML div style
Text, paragraf in HTML
HTML Tags Attributes
HTML - Elements
HTML Introduction
Home HTML Tutorial
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.