CSS tutorial 3

Posted on 14/09/2009 by

0



CSS font-family
In addition to text formatting, you can use CSS to control the format and positioning of block-level elements in a web page. A block-level element is a standalone piece of content, usually separated by a new line in the HTML, and visually formatted as a block. For example, h1 tags, p tags, and div tags all produce block-level elements on a web page.

You can set margins and borders for block-level elements, position them in a specific location, add background color to them, float text around them, and so on. Manipulating block-level elements is in essence the way you lay out pages with CSS.

Example 4

<html>
<head>
<style type=”text/css”>
p
{
background-color:pink;
}
p.margin
{
margin-top:75px;
margin-bottom:125px;
margin-right:75px;
margin-left:45px;
}
</style>
</head>
<body>
<p>To change the highlighting color for div tags, click the Mouse-Over color box, and then select a highlight color using the color picker (or enter the hexadecimal value for the highlight color in the text box).
</p>
<p>To enable or disable highlighting for div tags, select or deselect the Show checkbox for Mouse-Over.</p>
</body>
</html>

To change the highlighting color for div tags, click the Mouse-Over color box, and then select a highlight color using the color picker (or enter the hexadecimal value for the highlight color in the text box).

To enable or disable highlighting for div tags, select or deselect the Show checkbox for Mouse-Over.

Example 5

Padding of an Element

<html>
<head>
<style type=”text/css”>
p.padding {padding-left:2cm}
p.padding2 {padding-left:45%}
</style>
</head>
<body>
<p>CSS Layout Outlines.</p>
<p>CSS Layout Backgrounds </p>
<p>CSS Layout Box Model</p>
</body>
</html>

CSS Layout Outlines.

CSS Layout Backgrounds

CSS Layout Box Model

Example 6

CSS Pseudo Elements

<html>
<head>
<style type=”text/css”>
p:first-line
{
color:#ff01ff;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>Dynamic HTML, or DHTML, refers to the combination of HTML with a scripting language that allows you to change the style or positioning properties of HTML elements. Timelines in Dreamweaver use dynamic HTML to change the properties of AP elements and images over time. Use timelines to create animations that do not require any ActiveX controls, plug‑ins, or Java applets (but do require JavaScript).</p>
</body>
</html>

Dynamic HTML, or DHTML, refers to the combination of HTML with a scripting

language that allows you to change the style or positioning properties of HTML elements. Timelines in Dreamweaver use dynamic HTML to change the properties of AP elements and images over time. Use timelines to create animations that do not require any ActiveX controls, plug‑ins, or Java applets (but do require JavaScript).

Advertisements
Posted in: Coding, CSS