Posts

CSS BACKGROUND IMAGE

-
A background image in CSS is added using the background-image property. Basic Syntax selector { background-image: url ( "image.jpg" ); } Example 1: Background Image <!DOCTYPE html> <html> <head> <style> body { background-image: url ( "background.jpg" ); } </style> </head> <body> <h1> Welcome </h1> </body> </html> Example 2: No Repeat body { background-image: url ( "background.jpg" ); background-repeat: no-repeat ; } Example 3: Full-Screen Background body { background-image: url ( "background.jpg" ); background-repeat: no-repeat ; background-size: cover ; background-position: center ; background-attachment: fixed ; } Example 4: Image Covering a <div> . box { width: 400 px ; height: 300 px ; background-image: url ( "nature.jpg" ); background-size: cover ; background-position: center ; } Common Background Image P...
Post a Comment
Read more

CSS BACKGROUNDS

-
The CSS background property is a shorthand property used to set one or more background styles on an element. Syntax selector { background: value ; } Common Examples 1. Background color div { background: lightblue ; } 2. Background image div { background: url ( "image.jpg" ); } 3. Background image with no repeat div { background: url ( "image.jpg" ) no-repeat ; } 4. Background image centered div { background: url ( "image.jpg" ) no-repeat center center ; } 5. Background image covering the entire element div { background: url ( "image.jpg" ) no-repeat center center / cover ; } 6. Background with color and image div { background: #f5f5f5 url ( "image.jpg" ) no-repeat center / contain ; } Individual Background Properties Instead of the shorthand, you can use: background-color : # 3498 db ; background-image : url ( "image.jpg" ); background-repeat : no-repeat ; background-position : ...
Post a Comment
Read more

CSS COLORS

-
CSS Colors CSS colors are used to set the color of text, backgrounds, borders, shadows, and many other elements on a web page. Why Use Colors? Colors help: Improve the appearance of a website. Highlight important content. Create visual hierarchy. Enhance user experience and branding. Ways to Specify Colors in CSS CSS supports several color formats. 1. Color Names CSS provides 140+ predefined color names . Syntax h1 { color: red ; } Example body { background-color: lightgray ; } h1 { color: blue ; } p { color: green ; } Common color names: Color CSS Name 🔴 red 🟢 green 🔵 blue ⚫ black ⚪ white 🟡 yellow 🟣 purple 🟠 orange 🌸 pink 🌫 gray 2. Hexadecimal (HEX) Colors HEX colors begin with # followed by 6 hexadecimal digits . Format #RRGGBB RR = Red GG = Green BB = Blue Each pair ranges from 00 to FF (0–255). Examples h1 { color: #FF0000; } body { background-color: #F5F5F5; } Common HEX Colors Color HEX Black #0...
Post a Comment
Read more

CSS COMMENTS

-
In CSS, comments are used to add notes or temporarily disable code. They are ignored by the browser. Syntax /* This is a CSS comment */ Single-line example h1 { color: blue ; /* Sets the text color to blue */ } Multi-line example /* This section styles the navigation menu */ nav { background-color: #333; color: white ; } Commenting out code You can temporarily disable CSS rules by commenting them out: /* p { color: red; } */ Notes CSS supports only the /* ... */ comment syntax. There is no // single-line comment in standard CSS (although some preprocessors like Sass support it). Example: /* Main page styling */ body { font-family: Arial , sans-serif ; background-color: #f4f4f4; } /* Button styles */ button { background-color: blue ; color: white ; padding: 10 px ; } more details CSS comments are an important part of writing clean, maintainable stylesheets. They help explain code, organize sections, and temporarily disable styles durin...
Post a Comment
Read more