Scribd
Upload
7 views

CSS in Depth Notes With Project

The document is a comprehensive guide to CSS, covering its syntax, selectors, the box model, and flexbox layout with examples. It includes a mini project for creating a responsive webpage featuring a navigation bar, hero section, and footer. Each section provides HTML and CSS code snippets to illustrate the concepts discussed.

Uploaded by

mdsamadabdul28
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
7 views

CSS in Depth Notes With Project

The document is a comprehensive guide to CSS, covering its syntax, selectors, the box model, and flexbox layout with examples. It includes a mini project for creating a responsive webpage featuring a navigation bar, hero section, and footer. Each section provides HTML and CSS code snippets to illustrate the concepts discussed.

Uploaded by

mdsamadabdul28
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/ 6

CSS Complete Guide: In-depth with Examples and Project

1. Introduction to CSS

CSS is a style sheet language used to describe the presentation of a web page.

Example:

HTML:

<!DOCTYPE html>

<html>

<head>

<title>My Webpage</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<h1>Welcome!</h1>

<p>This is styled using CSS.</p>

</body>

</html>

CSS (style.css):

h1 {

color: blue;

text-align: center;

p {

font-size: 16px;

color: gray;
}

2. CSS Syntax and Selectors

CSS rules are written as 'selector { property: value; }'.

Example:

HTML:

<p class="text">Hello, World!</p>

CSS:

.text {

color: green;

font-weight: bold;

Selectors:

- Universal Selector (*): Applies to all elements.

- Class Selector (.classname): Targets elements with a class.

- ID Selector (#idname): Targets elements with a unique ID.

Advanced Example:

HTML:

<ul>

<li>Home</li>

<li>About</li>

</ul>

CSS:
ul li:nth-child(2) {

color: red;

3. CSS Box Model with Example

The box model defines the layout and space of an element.

Example:

HTML:

<div class="box">Box Content</div>

CSS:

.box {

width: 100px;

height: 100px;

padding: 10px;

border: 5px solid black;

margin: 20px;

background-color: lightblue;

4. Flexbox Layout

Flexbox is used to arrange items along a single axis.

Example:

HTML:

<div class="container">
<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

</div>

CSS:

.container {

display: flex;

justify-content: space-around;

align-items: center;

height: 100px;

.item {

background-color: coral;

padding: 20px;

color: white;

5. Mini Project: Responsive Webpage

We will create a responsive webpage with a navigation bar, hero section, and footer.

HTML:

<!DOCTYPE html>

<html>

<head>
<title>My Website</title>

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

</head>

<body>

<nav>

<ul>

<li>Home</li>

<li>About</li>

<li>Contact</li>

</ul>

</nav>

<section class="hero">

<h1>Welcome to My Website</h1>

</section>

<footer>

<p>© 2024 My Website</p>

</footer>

</body>

</html>

CSS:

nav {

background-color: #333;

padding: 10px;

nav ul {

display: flex;
justify-content: center;

list-style: none;

nav ul li {

margin: 0 15px;

color: white;

.hero {

text-align: center;

background-color: lightgray;

padding: 50px 0;

footer {

text-align: center;

padding: 10px;

background-color: #333;

color: white;

You might also like