Scribd
Upload
22 views

3-Front End Development (CSS)

CSS frontend development

Uploaded by

rkeditors47
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views

3-Front End Development (CSS)

CSS frontend development

Uploaded by

rkeditors47
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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