Skip to main content

CSS BASIC

CASCADING STYLE SHEETS(CSS)

Cascading Style Sheets is a simple design language intended to
simplify the process of making web pages presentable.

Using CSS, you can control the color of the text, the style of fonts,
the spacing between paragraphs, how columns are sized and laid
out, what background images or colors are used, layout designs,
variations in display for different devices and screen sizes as well as
a variety of other effects.

TYPES OF CSS
  1. • Inline CSS
  2. •Internal CSS
  3. •External CSS

Example: Inline CSS

<!DOCTYPE html>
<html>
<head>
<title> Inline CSS </title>
</head>
<body>
<h1> Introduction to CSS</h1>
<p style=“color:red”> Hello LPU</p>
<p style= “color:red”> Welcome to CSS</p>
<body>
</html>

Example: Internal CSS

<!DOCTYPE html>
<html>
<head>
<title> CSS Internal </title>
<style>
p
{
color:red;
}
h1
{
background-color:blue;
}
</style>
</head>
<body>
<h1> Introduction to CSS</h1>
<p > Hello COLLEGETAK</p>
<p > Welcome to CSS</p>
</body>
</html>

Example: External CSS

<!DOCTYPE html>
<html>
<head>
<title> CSS External </title>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<h1> Introduction to CSS</h1>
<p > Hello COLLEGETAK</p>
<p > Welcome to CSS</p>
</body>
</html>
b.css
p
{
color:red;
}
h1
{
background-color:blue;
}
.

Example: Font Properties

<!DOCTYPE html>
<html>
<head>
<title> CSS Font Properties </title>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<p > Welcome to CSS</p>
</body>
</html>
b.css
p
{
font-family:arial;
font-weight:bold;
font-style: italic;
font-size: 24px;
}

Example: Font Properties in One Line

<!DOCTYPE html>
<html>
<head>
<title> CSS Font Properties </title>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<p > Welcome to CSS</p>
</body>
</html>
b.Css
p
{
font: bold italic 24px arial;
}
CSS Comments
p
{
font: bold italic 24px arial; /* weight style size family */

}


Example: Box Model-Padding

<!DOCTYPE html>
<html>
<head>
<title> CSS -Padding </title>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<p > Welcome to CSS</p>
</body>
</html>
b.css
p
{
background-color:blue;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 50px;
padding-right: 50px;
}
/* top right bottom left*/
Example: Box Model-Borders

 <!DOCTYPE html>
<html>
<head>
<title> CSS -Borders </title>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<p > Welcome to CSS</p>
</body>
</html>
b.css
p
{
background-color:blue;
padding: 30px;
border-style:solid;
border-width:10px;
border-color: green;
}
border: 5px ridge red;

 Example: Box Model-Margin

 <!DOCTYPE html>
<html>
<head>
<title> CSS -Margin </title>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<p > Welcome to CSS</p>
</body>
</html>
b.css
p
{
background-color:blue;
margin-top: 30px;
margin-bottom: 30px;
margin-left: 50px;
margin-right: 50px;
}

Example: Background Images

<!DOCTYPE html>
<html>
<head>
<title> CSS –Background Images</title>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<div>
Hello COLLEGETAK
</div>
</body>
</html>
b.css
div
{
height:200px;
width: 100%;
background-image:url(a.jpg);
background-repeat: repeat-x;
background-position:center top;
}

Example: Child Selectors

<!DOCTYPE html>
<html>
<head>
<title> CSS –Child Selectors</title>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<div>
<p> Hello COLLEGETAK</p>
</div>
<p> WELCOME TO WEB DEVELOPMENT NOTES</p>
</body>
</html>
div p
{
color:red;
}
P
{
color:yellow;
}

Example: Child Selectors

<!DOCTYPE html>
<html>
<head>
<title> CSS –Child Selectors</title>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<div class=“abc”>
<p> Hello COLLEGETAK</p>
</div>
<div class=“def”>
<p> Welcome to COLLEGETAK</p>
</div>
</body>
</html>
.abc p
{
color:red;
}
.def p
{
color:yellow;
}

CSS Grid Layout


The CSS Grid Layout Module offers a grid-based layout system, with rows and
columns, making it easier to design web pages without having to use floats and
positioning.

Grid Elements

A grid layout consists of a parent element, with one or more child elements.

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

Display Property

An HTML element becomes a grid container by setting the display property to
grid or inline-grid.

.grid-container {
display: grid;
}
.grid-container {
display: inline-grid;
}
All direct children of the grid container automatically become grid items.

Comments

Post a Comment

Popular posts from this blog

Industry Ethics and Legal Issues MCQ Questions With Answer

ETHICS ALL POSSIBLE QUESTION - SET 1 Q1. Before 16 Jan, How many states were already working in Startup India policies? a) 1 b) 3 c) 4 d) 7 Q2. Which of the following is not a part of Funding Innovation? a) Incubation Center b) Startup Yatra Funds c) Research Parks d) Manak Q3. For R& D, human resource started a new scheme for students a) Tinkering labs b) Manak c) Avishkar yojana d) Uchhatar Avishkar yojana Q4. Startup India Scheme? 1. Age should not be more than 3 years 2. Should develop innovative product. 3. Must be Private Limited Company/ Registered Partnership firm/ Limited Liability Partnership 4. Has patent granted in areas affiliated with the nature of business being promoted a) 1, 3 6) 1,2 and3 c) 2, 3 and 4 d) All of the above Q5. The period of business when an entrepreneur must position the venture in a market and make necessary adjustments to assure survival is called the: a) pre-Startup stage b) Startup singe ...
Post a Comment
Read more

DIGITAL MARKETING

DIGITAL MARKETING END TERM PRACTICAL PAPERS:
10 comments
Read more

WEB DEVELOPMENT COURSE

CLICK ON LINK AND ENJOY THE COURSE.  LINK : BUILDING YOUR FIRST WEBSITE IN HTML
9 comments
Read more