Scribd
Upload
17 views10 pages

CSS Beginner Book

CSS, or Cascading Style Sheets, is used to style HTML web pages, controlling their appearance while HTML provides structure. It can be applied through inline, internal, or external methods, with external CSS being the best practice. Key concepts include selectors, the box model, font styling, flexbox for layout, responsive design, and best practices for maintaining organized and readable code.

Uploaded by

Faisal Mahbub
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
17 views10 pages

CSS Beginner Book

CSS, or Cascading Style Sheets, is used to style HTML web pages, controlling their appearance while HTML provides structure. It can be applied through inline, internal, or external methods, with external CSS being the best practice. Key concepts include selectors, the box model, font styling, flexbox for layout, responsive design, and best practices for maintaining organized and readable code.

Uploaded by

Faisal Mahbub
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

PAGE 1 – Introduction to CSS

CSS stands for Cascading Style Sheets.

It is used to style and design HTML web pages.

While HTML creates structure, CSS controls appearance.


PAGE 2 – How CSS Works

CSS selects HTML elements and applies styles to them.

p {
color: blue;
font-size: 18px;
}

This makes all paragraphs blue and 18px in size.


PAGE 3 – Ways to Add CSS

1. Inline CSS

<p style="color:red;">Hello</p>

2. Internal CSS

<style>
p { color: green; }
</style>

3. External CSS (Best Practice)

<link rel="stylesheet" href="[Link]">


PAGE 4 – Selectors

Selectors target HTML elements.

/* Element Selector */
p { color: blue; }

/* Class Selector */
.box { background: yellow; }

/* ID Selector */
#main { font-size: 20px; }
PAGE 5 – Colors and Backgrounds

body {
background-color: lightgray;
}

h1 {
color: darkblue;
}

Colors can be named, HEX, RGB, or HSL.


PAGE 6 – Box Model

Every HTML element is a box.

Box Model consists of:

Content → Padding → Border → Margin

div {
padding: 20px;
border: 2px solid black;
margin: 10px;
}
PAGE 7 – Fonts and Text Styling

p {
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-align: center;
}
PAGE 8 – Flexbox (Layout)

Flexbox helps align items easily.

container {
display: flex;
justify-content: center;
align-items: center;
}
PAGE 9 – Responsive Design

Responsive design makes websites work on all devices.

@media (max-width: 600px) {


body {
background-color: lightblue;
}
}
PAGE 10 – Best Practices

✔ Use external CSS files.

✔ Keep code organized.

✔ Avoid inline styling.

✔ Use meaningful class names.

✔ Write clean and readable code.

You might also like