Styling with CSS

When learning CSS for the first time, one of the most exciting parts is making your website look visually appealing. From changing colors to adding background images and styling quotes, CSS gives you the tools to bring your pages to life.

In this guide, we’ll walk through how to use colors, images, and quotes in CSS—explained in simple terms, with examples, just for beginners.

1. CSS Colors: Making Your Website Look Alive

CSS allows you to change the color of text, backgrounds, borders, and more.

🧱 Basic Properties:

• color: Changes the text color

• background-color: Changes the background of an element

• border-color: Sets the border color

🧠 Examples:

h1 { color: blue; }

body { background-color: #f0f0f0; }

p { border: 1px solid red; }

Ways to Write Colors:

1. Color names – like red, blue, green

2. Hex codes – like #FF5733, #000000, #FFFFFF

3. RGB values – like rgb(255, 0, 0)

4. HSL values – like hsl(0, 100%, 50%)

CSS Images: Adding Visuals to Your Page

Images can make your site more engaging. In CSS, you usually use images as backgrounds or for decorative purposes.

🔧 Main Property:

• background-image: Adds an image to an element's background

🧠 Example:

body { background-image: url('background.jpg');

background-size: cover;

background-position: center; }

Other Useful Image Properties:

• background-size: Controls image sizing (cover, contain, or specific size like 100px)

• background-repeat: Repeats the image (repeat, no-repeat)

• background-position: Positions the image (center, top right, etc.)

CSS Quotes: Styling Quoted Text

Sometimes you’ll need to style quotes or block quotes on your page, especially if you're building a blog or article site.

🔧 The quotes Property:

This controls what symbols appear when using <q> tags (inline quotes).

🧠 Example:

This makes:

q { quotes: "“" "”" "‘" "’"; }

<p><q>Learning never exhausts the mind.</p></q>

Show up as:

“Learning never exhausts the mind.”

Block Quotes:

You can also style <blockquote> for larger quoted text:

blockquote {

font-style: italic; color: #666;

border-left: 4px solid #ccc;

padding-left: 10px;

margin: 20px 0; }

Note: Quotes are mostly about visual styling. The actual quote content comes from your HTML.

ummary Table