Scribd
Upload
6 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
Available Formats
Download as PDF, TXT or read online on Scribd
6 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
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