Scribd
Upload
20 views

3-Front End Development (CSS)

CSS frontend development

Uploaded by

rkeditors47
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views

3-Front End Development (CSS)

CSS frontend development

Uploaded by

rkeditors47
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 9

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;
}

You might also like