HTML div style class
HTML Tutorial » HTML div style class
Inserting style for div, there are three ways:
External style sheet, - In this case we make file as style.css where we add CSS style
Internal style sheet, - We add CSS style betweenthem: <style> content style </style>
Inline style,
For any <div> on your page, you can specify any CSS property as: color, font-style, font-family, font-size, background, etc.
Example: On this window you can edit online this script,
div class and internal style.
<!DOCTYPE html>
<html>
<head>
<title>div class and style</title>
<style>
.text {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
color: #09C;
background-color: #CCC;
margin: 12px;
padding: 15px;
}
</style>
</head>
<body>
<div class="text">HTML div style - div style class</div>
<div style="height:300px; width:450px; color:#000000; background:#CCC"> Add your text here</div>
</body>
</html>
Syntax:
Inline html div style
Here, in the next example we show you how to use inline css style what can be applied to div box as: height, width, background and color.
Example: Edit online this window, then Execute to see how you script change page.
<!DOCTYPE html>
<html>
<head>
<title>div class and style</title>
</head>
<body>
<div class="text">HTML div style - div style class</div>
<div style="height:200px; width:300px; color:#000000; background:#CCC"> Add your text here</div>
</body>
</html>
Related subjects:
div style
HTML div style class
Tags:
div style class, border, center, color, background color, width, align center, background image
margin top 24px margin-bottom 20px span style= font size 24px color
How to use div style in HTML
Internal and external style applied for div
You can archieve same style using Internal and External CSS
1. Internal style for html div.
Example: Edit online this window, then Execute to see how you script change page.
<html >
<head>
<style>
div {
height:70px;
width:200px;
background-color:yellow;
}
</style>
</head>
<body>
<div> Here your text:<br />
This is a box useing internal style
</div>
</body>
</html >
2. External style for html div.
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div> Your text here</div>
</body>
{
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:
<html>
<head>
<style>
.town {
height: 70px;
width: 200px;
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>
div class and style together, div class style css, div class style inline, div class style background image, color, size, full screen, inline, center, combine, background image, html div style width, background color, width percentage, example, attributes, center, display, border, styles
HTML div style - div style class - html tutorial
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.