For good representation of our html pages/web pages There are different types of css styling to the html pages/web pages 1. INLINECSS 2. INTERNAL CSS 3. EXTERNAL CSs Must be saved with .css extension CSS CONT…. The id Selector: It uses the id attribute of an HTML element to select a specific element id of an element should be unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element. Example: <style> #p1{ text-align: center; color: red; } </style> </head> <body>
<p id=“p1">THIS IS CSS!</p>
<p>THIS IS NORMAL PARAGRAPH WITHOUT ANY AFFECT.</p> CSS COLORS DIFFERENT COLORS
SYNTAX : <TAG STYLE
(KEYWORD)=“PROPERTIES=COLORNAME” COLOR VALUES: BY NAMES, HEXADECIMAL VALUES OR RGB(0,0,0) BORDER STYLES: BORDER: PX,SOLID,DASHED,DOTTED,COLOR HSL (HUE AND SATURATION LIGHTNESS <tag style=“properties (background color):hsl(0,100%,,0%);”>text</h1> COLORS CONT… HSLA Value HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha) Examples: <h1 style="background-color:hsla(9, 100%, 64%, 0);">some Text</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.2);">Some Text</h1> BACKGROUND COLORS AND IMAGES ETC BODY BACKGROUND COLORS TAGS BACKGROUND COLORS DIV BACKGROUND COLORS BACKGROUND IMAGES IMAGE AND PATH AND IMAGE PROPERTIES <style> body { background-image: url(“PATH"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; background-attachment: fixed; } OR body { background: #ffffff url("img_tree.png") no-repeat right top; } </style> BACKGROUND ORIGIN EXAMPLES: #example3 { <style> border: 10px double black; #example1 { padding: 25px; border: 10px double black; background: url(paper.gif); padding: 25px; background-repeat: no-repeat; background: url(paper.gif); background-origin: content-box; background-repeat: no-repeat; }</style> background-origin: padding-box; </head> } <body> #example2 { <h2>background-origin: padding-box border: 10px double black; (default):</h2> padding: 100px; <div id="example1"> background: url(paper.gif); <h2>Hello World</h2> background-repeat: no-repeat; <p>The background image starts from the upper left corner of the padding background-origin: border-box; edge.</p> }