Web Development
Table of Contents
1 Web developement overview........................................................................................................1
2 HTML........................................................................................................................................... 2
3 CSS................................................................................................................................................3
3.1 CSS selectors.........................................................................................................................4
3.2 CSS Properties....................................................................................................................... 4
3.2.1 Text & Font Properties................................................................................................... 5
3.2.2 Box model properties..................................................................................................... 5
3.2.3 Image Object Properties.................................................................................................5
3.2.4 Positionning Properties...................................................................................................6
3.2.5 Layout & Display...........................................................................................................6
[Link] block........................................................................................................................ 6
[Link] Flexbox....................................................................................................................6
[Link] Grid......................................................................................................................... 7
3.3 Linking CSS to HTML..........................................................................................................8
Lesson objectives :
Learn HTML and CSS
Link HTML to CSS
Pr. Yahia Benmoussa / [Link]@[Link]
1/8
1 Web developement overview
2 HTML
HTML defines the structure of a webpage. It tells the browser:
what is a title
what is a paragraph
what is a button, image, etc.
Tag Meaning
<h1> → <h6> Headings
<p> Paragraph
Pr. Yahia Benmoussa / [Link]@[Link]
2/8
Tag Meaning
<a> Link
<img> Image
<div> Container (like a block)
<span> Inline container
3 CSS
CSS controls:
colors
layout
spacing
responsiveness → make HTML page adapts to:
phones
tablets
desktops
.title {
color: red;
text-align: center;
}
p {
color:blue;
}
#id1
{
color:green;
}
Pr. Yahia Benmoussa / [Link]@[Link]
3/8
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1 class="title">Hello World !</h1>
<p>This is styled text</p>
<a href="[Link] id="id1">
Google
</a>
</body>
</html>
3.1 CSS selectors
Selector Example Meaning
Element p all paragraphs
Class .box elements with class="box"
ID #main unique element
3.2 CSS Properties
3.2.1 Text & Font Properties
p{
color: red;
font-size: 16px;
font-family: Arial;
font-weight: bold;
text-align: center;
text-decoration: underline;
line-height: 1.5;
}
Pr. Yahia Benmoussa / [Link]@[Link]
4/8
3.2.2 Box model properties
div {
width: 200px;
height: 100px;
padding: 10px;
margin: 20px;
border: 2px solid black;
}
3.2.3 Image Object Properties
img {
width: 100%;
object-fit: cover;
}
3.2.4 Positionning Properties
.box {
position: absolute;
top: 10px;
left: 20px;
}
Pr. Yahia Benmoussa / [Link]@[Link]
5/8
3.2.5 Layout & Display
Controlling how elements are arranged on the page
[Link] block
Behavior :
◦ Elements stack vertically
◦ Each takes full width
◦ Default browser behavior
div {
display: block;
visibility: visible;
}
[Link] Flexbox
Behavior
◦ Layout in one direction (row OR column)
◦ Easy alignment and spacing
Pr. Yahia Benmoussa / [Link]@[Link]
6/8
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-around; /* spacing between items */
align-items: center; /* vertical alignment */
height: 150px;
border: 2px solid black;
}
.box {
width: 60px;
height: 60px;
background: lightblue;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
[Link] Grid
Build comlex layout
.container {
display: grid;
grid-template-columns: 1fr 1fr;
} ²
Pr. Yahia Benmoussa / [Link]@[Link]
7/8
3.3 Linking CSS to HTML
Pr. Yahia Benmoussa / [Link]@[Link]
8/8