Posts

Showing posts from December, 2018

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

RGB vs HSL

Color Values In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values: Same as color name "Tomato": <!DOCTYPE html> <html> <body> <p>Same as color name "Tomato":</p> <h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1> <h1 style="background-color:#ff6347;">#ff6347</h1> <h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1> <p>Same as color name "Tomato", but 50% transparent:</p> <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1> <p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color v...
Post a Comment
Read more

CSS Setting border color

CSS Setting border color: <!DOCTYPE html> <html> <body> <h1 style="border: 2px solid Tomato;">Hello World</h1> <h1 style="border: 2px solid DodgerBlue;">Hello World</h1> <h1 style="border: 2px solid Violet;">Hello World</h1> </body> </html> Output: Hello World Hello World Hello World
Post a Comment
Read more

CSS Text color setting

Setting text-color in css3: <!DOCTYPE html> <html> <body> <h3 style="color:Tomato;">Hello World</h3> <p style="color:DodgerBlue;">HELLO.</p> <p style="color:MediumSeaGreen;"> Technisis</p> </body> </html> Output: Hello World HELLO Technisia
Post a Comment
Read more

Inline background color setting

Background colors setting: <!DOCTYPE html> <html> <body> <h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;"> technisia </p> </body> </html> Output: Hello World technisia
Post a Comment
Read more

colors in css

colors available in css: <!DOCTYPE html> <html> <body> <h1 style="background-color:Tomato;">Tomato</h1> <h1 style="background-color:Orange;">Orange</h1> <h1 style="background-color:DodgerBlue;">DodgerBlue</h1> <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1> <h1 style="background-color:Gray;">Gray</h1> <h1 style="background-color:SlateBlue;">SlateBlue</h1> <h1 style="background-color:Violet;">Violet</h1> <h1 style="background-color:LightGray;">LightGray</h1> </body> </html> Output: Tomato Orange DodgerBlue MediumSeaGreen Gray SlateBlue Violet LightGray
Post a Comment
Read more

Inline css

Inline Styles An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. The example below shows how to change the color and the left margin of a <h1> element: <!DOCTYPE html> <html> <body> <h1 style="color:blue;margin-left:30px;">This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Output: This is a heading This is a paragraph.
Post a Comment
Read more

internal css

Internal Style Sheet An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the <head> section of an HTML page: <!DOCTYPE html> <html> <head> <style> body {   background-color: white; } h1 {   color: maroon;   margin-left: 40px; }  </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Output: This is a heading This is a paragraph.
Post a Comment
Read more

external css

Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style External Style Sheet With an external style sheet, you can change the look of an entire website by changing just one file! Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> OUTPUT: This is a heading This is a paragraph. An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. Here is how the "mystyle.css"...
Post a Comment
Read more