Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - Cascading Style Sheets (CSS)

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Box Model and Text Flow - CSS

All block-level XHTML elements have a virtual box drawn around them based on what is known as the box model.

Box Model and Text Flow


All block-level XHTML elements have a virtual box drawn around them based on what is known as the box model. When the browser renders elements using the box model, the content of each element is surrounded by padding, a border and a margin (Fig. 5.10).


CSS controls the border using three properties: border-width, border-color and border-style. We illustrate these three properties in Fig. 5.11.

Property border-width may be set to any valid CSS length (e.g., em, ex, px, etc.) or to the predefined value of thin, medium or thick. The border-color property sets the color. [Note: This property has different meanings for different style borders.] The border-style options are none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset. Borders groove and ridge have opposite effects, as do inset and outset. When border-style is set to none, no border is rendered.


      <?xml version = "1.0" encoding = "utf-8"?>


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"




      <!-- Fig. 5.11: borders.html -->


      <!-- Borders of block-level elements. -->


      <html xmlns = "">






<style type = "text/css">

div       { text-align: center;

            width: 50%;

            position: relative;

            left: 25%;

            border-width: 4px }

.medium         { border-width: medium }


.thin    { border-width: thin }

        .solid  { border-style: solid }


        .double { border-style: double }


        .groove { border-style: groove }


        .inset  { border-style: inset }


        .outset { border-style: outset }


.dashed { border-style: dashed }

.red     {           border-color:  red }


.blue   {           border-color:  blue }







        <div class = "solid">Solid border</div><hr />


        <div class = "double">Double border</div><hr />


        <div class = "groove">Groove border</div><hr />


        <div class = "inset">Inset border</div><hr />


<div class = "dashed">Dashed border</div><hr />

      <div class = "thin red solid">Thin Red Solid border</div><hr />


      <div class = "medium blue outset">Medium Blue Outset border</div





Fig. 5.11 |  Borders of block-level elements.


Each border property may be set for an individual side of the box (e.g., border-top-style or border-left-color). Note that we assign more than one class to an XHTML element by separating multiple class names with spaces, as shown in lines 36–37.


As we have seen with absolute positioning, it is possible to remove elements from the normal flow of text. Floating allows you to move an element to one side of the screen; other content in the document then flows around the floated element. Figure 5.12 dem-onstrates how floats and the box model can be used to control the layout of an entire page.


Looking at the XHTML code, we can see that the general structure of this document consists of a header and two main sections. Each section contains a subheading and a para-graph of text.


Block-level elements (such as divs) render with a line break before and after their con-tent, so the header and two sections will render vertically one on top of another. In the absence of our styles, the subheading divs would also stack vertically on top of the text in the p tags. However, in line 24 we set the float property to right in the class floated, which is applied to the subheadings. This causes each subheading div to float to the right edge of its containing element, while the paragraph of text will flow around it.


Line 17 assigns a margin of .5em to all paragraph tags. The margin property sets the space between the outside of the border and all other content on the page. In line 21, we assign .2em of padding to the floated divs. The padding property determines the distance between the content inside an element and the inside of the element’s border. Margins for individual sides of an element can be specified (lines 22–23) by using the properties margin-top, margin-right, margin-left and margin-bottom. Padding can be specified in the same way, using padding-top, padding-right, padding-left and padding-bottom.


To see the effects of margins and padding, try putting the margin and padding properties inside comments and observing the difference.


      <?xml version = "1.0" encoding = "utf-8"?>


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"




      <!-- Fig. 5.12: floating.html -->


      <!-- Floating elements. -->


      <html xmlns = "">




      <title>Flowing Text Around Floating Elements</title>


        <style type = "text/css">


div.heading { background-color: #bbddff;


                        text-align: center;

                        font-family: arial, helvetica, sans-serif;

                        padding: .2em }

p          { text-align: justify;

                        font-family: verdana, geneva, sans-serif;

                        margin: .5em }                      

div.floated { background-color: #eeeeee;

                        font-size: 1.5em;

                        font-family: arial, helvetica, sans-serif;

                        padding: .2em;         

                        margin-left: .5em;    

                        margin-bottom: .5em;          

                        float: right;    

                        text-align: right;

                        width: 50% }

        div.section { border: 1px solid #bbddff }








        <div class = "heading"><img src = "deitel.png" alt = "Deitel" />




        <div class = "section">


        <div class = "floated">Corporate Training and Publishing</div>


        <p>Deitel &amp; Associates, Inc. is an internationally


        recognized corporate training and publishing organization


        specializing in programming languages, Internet/World


        Wide Web technology and object technology education.


        The company provides courses on Java, C++, Visual Basic, C#,


        C, Internet and web programming, Object


        Technology, and more.</p>




        <div class = "section">


        <div class = "floated">Leading-Edge Programming Textbooks</div>


        <p>Through its publishing


        partnership with Prentice Hall, Deitel &amp; Associates,


        Inc. publishes leading-edge programming textbooks,


        professional books, interactive CD-ROM-based multimedia


        Cyber Classrooms, satellite courses and DVD and web-based


        video courses.</p>








Fig. 5.12 |  Floating elements.


In line 27, we assign a border to the section boxes using a shorthand declaration of the border properties. CSS allows shorthand assignments of borders to allow you to define all three border properties in one line. The syntax for this shorthand is border: <width> <style> <color>. Our border is one pixel thick, solid, and the same color as the back-ground-color property of the heading div (line 11). This allows the border to blend with the header and makes the page appear as one box with a line dividing its sections.


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Copyright © 2018-2020; All Rights Reserved. Developed by Therithal info, Chennai.