The div CSS Functions
Cascading Style Sheets is a style sheet language that Web designers use to modify a Web page; CSS has replaced, and even expanded, some capabilities of HTML. "<div>" is a page element that is used to combine multiple, related objects into one section, or to divide a page into more than one section. CSS has a number of functions that can affect how <div> elements appear in a page.
Other People Are Reading
-
Class Functions
-
HTML and CSS are used in combination when creating and modifying "<div>" elements. CSS can modify "<div>" elements using the "class" attribute. For example:
<head>
<style> div.header { font-size: 9pt; color: #000000; } </style>
</head>
<body>
<div class="header">This is the header.</div>
</body>In the above example, CSS defines the "header" class. All HTML "<div>" elements that have
class="header"
included will use the attributes defined in the CSS tag. All of the text in the "<div>" element, therefore, will be black and be 9 points in size, assuming no other modified elements exist within the "<div>" -- for example, if a "<table>" element exists within the "<div>" element, the "<table>" element might have a different font size and color assigned, because it's a different object.
Global Functions
-
CSS "<div>" functions can also be global. A global CSS function applies to all of the associated elements in the page, excluding the elements that already have been assigned a class.
<style> div.header { font-size: 9pt; color: #000000; }
div { font-size: 15pt; color: red } </style>
</head>
<body>
<div class="header"> This is the header. </div>
<div> Here is the content. </div>
<div> This is the footer. </div>In the above example, all of the "<div>" elements, excluding "<div class="header">", use a 15-point font that is colored red; "div { font-size: 15pt; color: red }" doesn't specify a class, so any "<div>" element that doesn't have a class assigned is included.
-
General Classes
-
You can also apply CSS functions to a "<div>" element using general classes. General classes can apply to any applicable element. For example:
<style>
.header { font-size: 9pt; color: #000000; }
</style>
<body>
<div class="header">This is the header.</div>
<p class="header">This is the sub-header.</p>Both <div> and <p> can use the "header" class, because it's not defined to any specific element. Using general classes is useful if you want to apply a set of attributes to multiple elements, but don't want to create superfluous CSS code for each element in the page.
Individual Functions
-
You can apply individual <div> CSS functions to <div> tags in the code without inserting the CSS via the <style> and </style> tags. HTML can embed CSS into a <div> element using the following syntax:
<div style=" "></div>
You can insert any number of different attributes in between the quotes. For example, to change the height and width of the <div> element, do the following:<div style="height: 100px; width: 100px">
As you can see, "style" uses CSS syntax, with colons in place of equal signs. You can use "style" when you want to add or modify an element, but don't have access to the original page CSS (for example, when writing an HTML-enabled blog entry).
-
