CSS BACKGROUND:
You can set the background-color, background-image, background-repeat, background-position, background-attachment etc background properties of an element.
SET BACKGROUND:
<html>
<head>
<title>Paragraph background</title>
</head>
<body>
<p style = "background-color:pink;"> This text has a pink background color.
</p>
</body>
</html>
Output of above example:
This text has a pink background color.
SET Page Background Color:
<html>
<head>
<title>Paragraph background</title>
<style>
body { background-color: #b0c4de; }
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Output of above example:
Set the Background Image:
<html>
<head>
<title>Background Image</title>
<style>
background-image: url("tree.jpg");
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Output of above example:
DIV and SPAN:
DIV is a block-level element always starts on a new line and takes up the full width available. <DIV> is usually used to designate styles for block elements that should stand apart from the body text…like callout quotes. Everything inside a <DIV> tag takes on the <DIV> attributes…and you can specify classes and ids for <DIV> too!
● DIV
Block elements (like P and H1)
No blank space, just line breakEx. div.heading1 { font-size: 24pt; }
● SPAN
SPAN is a inline element, does not start on a new line and only takes up as much width as necessary. The <span> tag is usually used to change the display attributes of a short run of text or objects within a block-level element (such as a paragraph or table cell.
● SPAN
Inline element (like A and IMG)Ex. span.bold { font-weight: bold; }
<span class=“example”>TR {font-face : sans-serif; font size : 12pt}</span>
Example for div
Repeat the Background Image:
To repeat the background image if an image is small, by default background-repeat property will have repeat value.. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once.<html>
<head>
<style>
body { background-image: url("assets/img/rkp.jpg"); background-repeat: no-repeat; }
</style>
</head>
<body> <p>RKTUTORIALS</p>
</body>
</html>
Background Position:
The background-position provides to specify the position of the background image.body { background-image: url("assets/img/rkp.jpg"); background-repeat: no-repeat; background-position: left top; }
Example
Background Attachment:
The background-attachment property allows us whether the background image should scroll or be fixed. If we scroll the page then image will not scroll with the rest of the page.body { background-image: url("assets/img/rkp.jpg"); background-repeat: no-repeat; background-position: left top; background-attachment: fixed; }
Example
The
border property allows us to specify the style, width, rounded and color of an element's border.<html> <head> <style> p.b1 { border:1px solid;}</style> </head> <body> <p class = "b1"> This is example of border. </p> </body> </html>
The border-color Property
The border-color property allows us to change the color of the border and also specific part of border such as left, top, bottom and right.
<html>
This is example of border with color.
The border-style Property
The border-style allows us to specify whether a border should be solid, dashed line, double line, or one of the other possible values.<html> <head> <style> p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} </style> </head> <body> <h2>The border-style Property</h2> <p>This property specifies what kind of border to display:</p> <p class="dotted">A dotted border.</p> <p class="dashed">A dashed border.</p> <p class="solid">A solid border.</p> <p class="double">A double border.</p> <p class="groove">A groove border.</p> <p class="ridge">A ridge border.</p> <p class="inset">An inset border.An outset border.</p> <p class="hidden">A hidden border.</p> <p class="mix">A mixed border.</p> </body> </html>
Output of above example
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
A mixed border.
CSS Units:
Used for specific heights and lengths. CSS supports several length units.
● px – Pixels – screen dots
● pt – Points – font sizes
● in, cm – Inches and centimeters
● % - percent of the current/parent font
● em – height of current font
Pixels vs. Em
For easiest/best design control – pixels
For best flexibility/accessibility – % or em
Rounded Borders:Border-radius: This property is used to add rounded borders around an element.
Syntaxp { border: 4px solid red; border-radius: 13px; }
Example
<html> <head> <style> p.round { border: 4px solid red; border-radius: 13px; }</style> </head> <body> <h2>The Rounded border example</h2> <p class="round">Rounded border.</p> </body> </html>Output of above example
The Rounded border example
0 Comments