Front-End Development
(CSS)
By:Muhammad Adeel Afzal
HTML Div Element
The <div> element is used as a container for other HTML
elements.
Example Code
<div>
<h1>Desired Technologies</h1>
</div>
What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages
all at once
External style sheets are stored in CSS files
Example:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
CSS Borders
The CSS border properties allow you to specify the style, width, and color of
an element's border.
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the
border-color value
ridge - Defines a 3D ridged border. The effect depends on the
border-color value
inset - Defines a 3D inset border. The effect depends on the
border-color value
outset - Defines a 3D outset border. The effect depends on the
border-color value
none - Defines no border
CSS Rounded Borders
The border-radius property is used to add rounded borders to
an element:
Example:
p{
border: 2px solid red;
border-radius: 5px;
}
CSS
Css have 3 types are as follow:
Inline
Outline (Internal)
External
Css have 3 Categories are as follow:
Classes
Id
Selectors
CSS Classes
The class attribute is often used to point to a class name in a style sheet. It can also
be used by a JavaScript to access and manipulate elements with the specific class
name.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
</body>
CSS Id
The id attribute is used to point to a specific style declaration in a style sheet.
It is also used by JavaScript to access and manipulate the element with the
specific id.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
CSS Selectors
The id selector uses the id attribute of an HTML element to select a
specific element.
The id of an element is unique within a page, so the id selector is used to
select one unique element!
To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
Example:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
