Posts

margins in css

CSS Margins The CSS  margin  properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left). margin-top margin-right margin-bottom margin-left All the margin properties can have the following values: auto - the browser calculates the margin length  - specifies a margin in px, pt, cm, etc. %  - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element Tip:  Negative values are allowed. <!DOCTYPE html> <html> <head> <style> div {   border: 1px solid black;   margin-top: 100px;   margin-bottom: 100px;   margin-right: 150px;   margin-left: 80px;   background-color: lightblue; } </style> </head...
Post a Comment
Read more

css3 Borders

The CSS  border  properties allow you to specify the style, width, and color of an element's border. Different Border Styles: The  border-style  property specifies what kind of border to display. The following values are allowed: dotted  - Defines a dotted border dashed  - Defines a dashed border solid  - Defines a solid border double  - Defines a double border groove  - Defines a 3D grooved border. The effect depends on the border-color value ridge  - Defines a 3D ridged border. The effect depends on the border-color value inset  - Defines a 3D inset border. The effect depends on the border-color value outset  - Defines a 3D outset border. The effect depends on the border-color value none  - Defines no border hidden  - Defines a hidden border The  border-style  property can have from one to four values (for the top border, right border, bottom border, and the left border). <!DO...
Post a Comment
Read more

background attachment in css

background attachment in css: To specify that the background image should be fixed (will not scroll with the rest of the page), use the  background-attachment  property: we can use: fixed static  absolute <!DOCTYPE html> <html> <head> <style> body {   background-image: url("img_tree.png");   background-repeat: no-repeat;   background-position: right top;   margin-right: 200px;   background-attachment: fixed; } </style> </head> <body> <h1>Hello World!</h1> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page....
Post a Comment
Read more

Background-position in css

We want to change the position of the image, so that it does not disturb the text too much. The position of the image is specified by the  background-position  property: <!DOCTYPE html> <html> <head> <style> body {   background-image: url("img_tree.png");   background-repeat: no-repeat;   background-position: right top;   margin-right: 200px; } </style> </head> <body> <h1>Hello World!</h1> <p>Technisia</p> <p>Technology</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> </body> </html>
Post a Comment
Read more

Background repeat and no-repeat in css

Background repeat in css: <!DOCTYPE html> <html> <head> <style> body {   background-image: url("gradient_bg.png");   background-repeat: repeat-x; // we can give repeat-y for aligning in y axis } </style> </head> <body> <h1>Hello World!</h1> <p>Here, a background image is repeated only horizontally!</p> </body> </html> No Repeat in css: <!DOCTYPE html> <html> <head> <style> body {   background-image: url("img_tree.png");   background-repeat: no-repeat; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background image example.</p> <p>The background image is only showing once, but it is disturbing the reader!</p> </body> </html>
Post a Comment
Read more

Setting background Image in css3

Setting background Image in css3: <!DOCTYPE html> <html> <head> <style> body {   background-image: url("bgdesert.jpg"); } </style> </head> <body> <h1>Hello World!</h1> <p>This text is not easy to read on this background image.</p> </body> </html>
Post a Comment
Read more

setting backgroung color in css

setting backgroung color in css: <!DOCTYPE html> <html> <head> <style> body {   background-color: white; } </style> </head> <body> <h1>Hello World!</h1> <p>This page has a light blue background color!</p> </body> </html> Output: Hello World! This page has a light blue background color!
Post a Comment
Read more