Scribd
Upload
6 views

CSS Basics Guide

Uploaded by

Agounnon Matthew
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

CSS Basics Guide

Uploaded by

Agounnon Matthew
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS Basics Guide

1. What is CSS?

CSS (Cascading Style Sheets) is used to style HTML documents by controlling layout, color, font,

and spacing.

2. CSS Syntax

CSS uses selectors and declarations to style HTML elements.

Example:

selector {

property: value;

3. Adding CSS to HTML

Three methods: Inline CSS, Internal CSS, External CSS.

4. CSS Selectors

- Element Selector: Targets HTML elements by name (e.g., h1 { color: green; })

- Class Selector: Targets elements with a specific class attribute (e.g., .classname { color: blue; })

- ID Selector: Targets elements with a specific id attribute (e.g., #uniqueID { color: red; })

5. CSS Properties

Common properties include color, font-size, margin, padding, and more.


6. Responsive Design

Make your site look good on all devices. Use media queries and viewport settings.

Example of a media query:

@media (max-width: 600px) {

body {

font-size: 14px;

7. Basic Example

Example of a basic CSS file applied to an HTML document.

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>Welcome to My Page</h1>

<p>This is a paragraph.</p>

</body>

</html>

CSS (style.css):
body {

background-color: #f3f4f6;

font-family: Arial, sans-serif;

color: #333;

h1 {

color: #1a73e8;

text-align: center;

p{

font-size: 16px;

line-height: 1.5;

You might also like