CSS Customization Basics

What Is CSS?

CSS controls appearance:
- Colors
- Fonts
- Spacing
- Layouts
- Sizes
- Effects

Where CSS Lives

In css/style.css file. Contains rules like:
h1 {
color: blue;
font-size: 32px;
margin-bottom: 20px;
}

CSS Basics

selector {
property: value;
}

• Selector - What to style (h1, p, .button, #header)
• Property - What to change (color, size, etc.)
• Value - New value for property

Editing Styles

1. Open css/style.css in your editor
2. Find the style you want to change
3. Modify the value
4. Save file
5. Refresh browser to see changes

Common CSS Properties

Colors
color: blue; / Text color /
background-color: white; / Background color /
border-color: gray; / Border color /

Fonts
font-family: Arial, sans-serif; / Font type /
font-size: 16px; / Font size /
font-weight: bold; / Font weight /

Spacing
margin: 20px; / Space outside element /
padding: 15px; / Space inside element /

Sizing
width: 100%; / Element width /
height: 200px; / Element height /

Example: Changing Colors

Original style:
h1 {
color: black;
background-color: white;
}

Changed to your brand colors:
h1 {
color: white;
background-color: #2563eb; / Your brand color /
}

Color Formats

color: red; / Color name /
color: #FF0000; / Hex code /
color: rgb(255, 0, 0); / RGB /
color: rgba(255, 0, 0, 0.5); / RGB with transparency /

Finding Your Style Rules

Use browser DevTools:
1. Right-click element
2. Select Inspect Element
3. See HTML on left
4. See CSS on right
5. Find the rule you want to change
6. Note the selector (h1, .button, etc.)
7. Find and edit in style.css

CSS Selectors

Element selector - All of that element:
p { color: black; } / All paragraphs /

Class selector - Elements with that class:
.button { color: white; } / /

ID selector - Specific element:

header { background: blue; } /

/

Sizing Units

• px - Fixed pixels (most common)
• % - Percentage of parent
• em - Relative to font size
• rem - Relative to root font size

Making Your Site Responsive

Media queries change styles for different screen sizes:
/ Desktop styles /
.container {
width: 1000px;
}

/ Mobile styles /
@media (max-width: 768px) {
.container {
width: 100%;
}
}

Common CSS Changes

Change button color:
.button {
background-color: #your-color;
color: white;
}

Change heading size:
h1 {
font-size: 48px; / Larger or smaller /
}

Change link color:
a {
color: #2563eb; / Your color /
}

a:hover {
color: #1e40af; / Darker on hover /
}

Add spacing:
.section {
padding: 40px; / More or less spacing /
margin-bottom: 60px;
}

Best Practices

• Make small changes at a time
• Test in browser after each change
• Keep backups of working CSS
• Use meaningful class names
• Document custom styles
• Avoid !important when possible