Category Archives: CSS3

How to apply CSS border-bottom-style | Examples

Example :

Set the style of the bottom border:

<!DOCTYPE html>
<html>
<head>
<style>
p {border-style: solid;}

p.none {border-bottom-style: none;}
p.dotted {border-bottom-style: dotted;}
p.dashed {border-bottom-style: dashed;}
p.solid {border-bottom-style: solid;}
p.double {border-bottom-style: double;}
p.groove {border-bottom-style: groove;}
p.ridge {border-bottom-style: ridge;}
p.inset {border-bottom-style: inset;}
p.outset {border-bottom-style: outset;}
</style>
</head>
<body>

<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>

</body>
</html>

Definition and Usage  :

The border-bottom-style property sets the style of an element’s bottom border.

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.borderBottomStyle=”dotted”

Property Values :

Value Description
none Specifies no border. This is default
hidden The same as “none”, except in border conflict resolution for table elements
dotted Specifies a dotted border
dashed Specifies a dashed border
solid Specifies a solid border
double Specifies a double border
groove Specifies a 3D grooved border. The effect depends on the border-color value
ridge Specifies a 3D ridged border. The effect depends on the border-color value
inset Specifies a 3D inset border. The effect depends on the border-color value
outset Specifies a 3D outset border. The effect depends on the border-color value
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages :

CSS tutorial: CSS Border

CSS reference: border-bottom property

HTML DOM reference: borderBottomStyle property

 

How to create CSS Box Models | Examples | Videos

The CSS Box Model :

  • All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.
  • The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
  • The box model allows us to add a border around elements, and to define space between elements.

The image below illustrates the box model:

Explanation of the different parts:

  • Content – The content of the box, where text and images appear
  • Padding – Clears an area around the content. The padding is transparent
  • Border – A border that goes around the padding and content
  • Margin – Clears an area outside the border. The margin is transparent

Example :

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

Width and Height of an Element :

  • In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Example :

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>

</body>
</html>

Let’s do the math:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

  • Total element width = width + left padding + right padding + left border + right border + left margin + right margin
  • The total height of an element should be calculated like this:
  • Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Browsers Compatibility Issue :

  • Internet Explorer 8 and earlier versions, include padding and border in the width property.
  • To fix this problem, add a <!DOCTYPE html> to the HTML page.

Example : 1

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

</body>
</html>

Example :2

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
width: 200px;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

</body>
</html>

Example : 3

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
width: 200px;
padding: 25px;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

</body>
</html>

Example : 4

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
width: 200px;
padding: 25px;
border: 25px solid navy;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

</body>
</html>

How to create simple CSS box in HTML. :

 

How to Create in CSS3 Multiple Colums & Propertys |count | column-fill |gap |column-rule | rule-color |rule-style

CSS3 Multi-column Layout :

  • The CSS3 multi-column layout allows easy definition of multiple columns of text – just like in newspapers:
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

CSS3 Multi-column Properties :

  • In this chapter you will learn about the following multi-column properties:
  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

CSS3 Create Multiple Columns :

  • The column-count property specifies the number of columns an element should be divided into.
  • The following example will divide the text in the <div> element into 3 columns:

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

 

CSS3 Specify the Gap Between Columns :

  • The column-gap property specifies the gap between the columns.
  • The following example specifies a 40 pixels gap between the columns:

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
 -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
 -moz-column-gap: 40px; /* Firefox */
 column-gap: 40px;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-gap property.</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

 

CSS3 Column Rules :

  • The column-rule-style property specifies the style of the rule between columns:

Example:

 <span class="highATT">-webkit-column-rule-style:</span><span class="highVAL"> solid;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
    <span class="highATT">-moz-column-rule-style:</span><span class="highVAL"> solid;</span> <span class="highCOM">/* Firefox */</span>
    <span class="highATT">column-rule-style:</span><span class="highVAL"> solid;</span>
}

Specify How Many Columns an Element Should Span :

  • The column-span property specifies how many columns an element should span across.
  • The following example specifies that the <h2> element should span across all columns:

Example :

</pre>
</div>
<div class="example_code notranslate cssHigh"><span class="highELE">h2 </span>{
<span class="highATT">-webkit-column-span:</span><span class="highVAL"> all;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">column-span:</span><span class="highVAL"> all;</span>
}

Specify The Column Width :

  • The column-width property specifies a suggested, optimal width for the columns.
  • The following example specifies that the suggested, optimal width for the columns should be 100px:

Example :

div </span>{
<span class="highATT">-webkit-column-width:</span><span class="highVAL"> 100px;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">column-width:</span><span class="highVAL"> 100px;</span>
}

CSS3 Multi-columns Properties :

  • The following table lists all the multi-columns properties: 
Property Description
column-count Specifies the number of columns an element should be divided into
column-fill Specifies how to fill columns
column-gap Specifies the gap between the columns
column-rule A shorthand property for setting all the column-rule-* properties
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-span Specifies how many columns an element should span across
column-width Specifies a suggested, optimal width for the columns
columns A shorthand property for setting column-width and column-count

More Examples :

Column-gap :

Divide the text in a <div> element into three columns, and specify a 40 pixels gap between the columns.


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>

<span class="highATT">-webkit-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-gap:</span><span class="highVAL"> 40px;</span>
}

Column-rule :

Specify the width, style and color of the rule between columns.


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>

<span class="highATT">-webkit-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-gap:</span><span class="highVAL"> 40px;</span>

<span class="highATT">-webkit-column-rule:</span><span class="highVAL"> 4px outset #ff00ff;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-rule:</span><span class="highVAL"> 4px outset #ff00ff;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-rule:</span><span class="highVAL"> 4px outset #ff00ff;</span>
}

CSS3 column-fill Property :

More Examples :

Column-count :

Divide the text in a <div> element into three columns:


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>
}

Column-gap :

Divide the text in a <div> element into three columns, and specify a 40 pixels gap between the columns.


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>

<span class="highATT">-webkit-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-gap:</span><span class="highVAL"> 40px;</span>
}

Column-rule :

Specify the width, style and color of the rule between columns.


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>

<span class="highATT">-webkit-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-gap:</span><span class="highVAL"> 40px;</span>

<span class="highATT">-webkit-column-rule:</span><span class="highVAL"> 4px outset #ff00ff;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-rule:</span><span class="highVAL"> 4px outset #ff00ff;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-rule:</span><span class="highVAL"> 4px outset #ff00ff;</span>
}

CSS3 column-gap Property :

More Examples :

Column-count :

Divide the text in a <div> element into three columns:


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>
}

Column-rule :

Specify the width, style and color of the rule between columns.


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>

<span class="highATT">-webkit-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-gap:</span><span class="highVAL"> 40px;</span>

<span class="highATT">-webkit-column-rule:</span><span class="highVAL"> 4px outset #ff00ff;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-rule:</span><span class="highVAL"> 4px outset #ff00ff;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-rule:</span><span class="highVAL"> 4px outset #ff00ff;</span>
}

CSS3 column-rule Property :

Property Values L

Value Description
column-rule-width Sets the width of the rule between columns. Default value is medium
column-rule-style Sets the style of the rule between columns. Default value is none
column-rule-color Sets the color of the rule between columns. Default value is the color of the element
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples :

Column-count :

Divide the text in a <div> element into three columns:=


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>
}

Column-gap :

Divide the text in a <div> element into three columns, and specify a 40 pixels gap between the columns.


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>

<span class="highATT">-webkit-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-gap:</span><span class="highVAL"> 40px;</span>
}

CSS3 column-rule-color Property :

Definition and Usage

The column-rule-color property specifies the color of the rule between columns.

Default value: The current color of the element
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.columnRuleColor=”#0000ff”

More Examples  :

Column-count :

Divide the text in a <div> element into three columns:


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>
}

Column-gap :

Divide the text in a <div> element into three columns, and specify a 40 pixels gap between the columns.


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>

<span class="highATT">-webkit-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-gap:</span><span class="highVAL"> 40px;</span>
}

CSS3 column-rule-style Property :

More Examples :

Column-count :

Divide the text in a <div> element into three columns:


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>
}

Column-gap :

Divide the text in a <div> element into three columns, and specify a 40 pixels gap between the columns.


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>

<span class="highATT">-webkit-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-gap:</span><span class="highVAL"> 40px;</span>
}

Column-rule :

Specify the width, style and color of the rule between columns.


div </span>{
<span class="highATT">-webkit-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-count:</span><span class="highVAL"> 3;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-count:</span><span class="highVAL"> 3;</span>

<span class="highATT">-webkit-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-gap:</span><span class="highVAL"> 40px;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-gap:</span><span class="highVAL"> 40px;</span>

<span class="highATT">-webkit-column-rule:</span><span class="highVAL"> 4px outset #ff00ff;</span> <span class="highCOM">/* Chrome, Safari, Opera */</span>
<span class="highATT">-moz-column-rule:</span><span class="highVAL"> 4px outset #ff00ff;</span> <span class="highCOM">/* Firefox */</span>
<span class="highATT">column-rule:</span><span class="highVAL"> 4px outset #ff00ff;</span>
}
1 2 3 11