Scribd
Upload
4 views

CSS-II (2)

nothing

Uploaded by

jnvnzsrcomputerlab
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

CSS-II (2)

nothing

Uploaded by

jnvnzsrcomputerlab
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

The CSS Box Model using div

• CSS, the term "box model" is used when talking about design
and layout. The CSS box model is essentially a box that wraps
around every HTML element. It consists of:
• 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
• It is implemented in CSS by defining properties of the <div> tag
within the style tag.
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0px;
}
The box model allows us to add a border around elements, and to
define space between elements.
Example
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<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>
CSS Syntax and Tags
• A CSS rule consists of a selector and a declaration block.
• The selector points to the HTML tag you want to style.
• The declaration block contains one or more declarations
separated by semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.
CSS Comments
• Comments are used to explain the code. Comments are
ignored by browsers. A CSS comment is placed inside the
<style> element, and starts with /* and ends with */.
Example:
<style>
p{
color: blue; /* Set paragraph color to blue */
}
Some commonly used CSS tags:
CSS Properties for text in Paragraphs, Body, Headings etc.
CSS property Description
text-align This property is implemented to specify a horizontal alignment in your
text and can be values left, right, center or justify.
color This property is implemented for assigning colours to your texts.
text-indent The text-indent property can be applied to indent the text of your
paragraph, heading etc.
text-transform This CSS property is implemented for specifying the uppercase as well
as the lowercase letters of your text.
CSS Properties for Lists
list-style-image This property specifies an image as the list item marker.
list-style-type This property specifies the type of list item marker.
CSS Properties for Tables
CSS property Description
Border This property specifies the border in pixels.

Width This property specifies the span/width of the screen as %.


text-align This property specifies the horizontal alignment of the text in the
columns.
Height This property specifies the height of the cell in pixels.

vertical-align This property specifies the vertical alignment of the text in the columns.
Padding This property is used to control the space between the border and the
content in a table
Some examples of the CSS properties for
HTML elements
Example1: Example2:
p{ table {
text-align:left; border: 1px solid;
text-indent: 40px;} width: 100%;}
body { th, td { text-align: center;
text-align: center; height: 50px; vertical- align:
color: red;} bottom;
h2 { padding: 15px;}
text-align: right;
color: aqua;}
CSS Colors
With CSS, colors can be specified in different ways:
• As RGB values
• By color names
• As hexadecimal values
As RGB values

• An RGB color value is


specified with: rgb( RED ,
GREEN , BLUE)
• Each parameter defines the
intensity of the color as an
integer between 0 and 255.
As Hexadecimal
Values
• A hexadecimal color is specified
with: #RRGGBB)
• RR (red) , GG (green) and BB
(blue) are hexadecimal integers
between 00 and FF specifying
the intensity of the color.
• For example, #0000FF is
displayed as blue
As Color Names

• Modern browsers support 140


color names, some of these
are
Some examples of CSS :
Creating a List using an image instead of bullets:
<html> <ul>
<head> <h3>
<style> <li>Coffee</li>
ul { list-style: url("flower.jpeg". ;} <li>Tea</li>
li:hover{background-color: grey;} <li>Coca Cola</li>
</style> <h3>
</head> </ul>
<body> </body>
<h2>The list-style Property</h2> </html>
Creating a table that will resize the display in different devices and the
row gets highlight when the mouse hovers over it.
<html> <th>City</th>

<head> <th>Points</th></tr>

<style> <tr>

table { <td>Shashank T</td>

border-collapse: collapse; <td>Trichur</td>

width: 100%;} <td>5637</td></tr>

th, td { <tr>

padding: 8px; <td>Chhavi Ghavri</td>

text-align: left; <td>Ratnam</td>

border-bottom: 1px solid #ddd;} <td>8943</td></tr>

tr:hover {background-color: coral;} <tr>

</style> <td>AdiboChawang</td>

</head> <td>Andro</td>

<body> <td>6754</td></tr>

<h2>Stylized Table</h2> <tr>

<p>Change the display size to see the table size change.</p> <td>Ira Deshpande</td>

<p>Move the mouse over the table rows to see the effect.</p> <td>Tura</td>

<table> <td>5643</td></tr>

<tr> </table>

<th>Name</th> </body></html>

You might also like