Posts

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...

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

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

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

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

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.

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.