Scribd
Upload
12 views64 pages

Cascading Style Sheet-1

Uploaded by

ankitkumarprabhakar611
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
12 views64 pages

Cascading Style Sheet-1

Uploaded by

ankitkumarprabhakar611
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/ 64

CSS

CSS
• CSS stands for CASCADING STYLE SHEET.
• CSS is used to style HTML element.
• CSS is used to layout HTML elements, (where the HTML elements shown).
Basic Website Layout
<header> </header>

<nav> </nav>

<main> </main>

<aside> </aside>

<section> </section> <section> </section> <section> </section>

<footer> </footer>
There are three ways to write CSS
code.
• Inline CSS <h1 style=“color : red;”> Hello World </h1>

• Internal CSS <style> </style>

• External CSS <link rel=“stylesheet” src=“style.css” />


Syntax:
SELECTOR {
PROPERTY : VALUE ;
PROPERTY : VALUE ;
}

// There can be multiple pairs of properties and values in


one block of code.
Types of Selectors in CSS
• Element Selector
• ID Selector
• Class Selector
• Universal Selector
• Grouping Selector
1. Element Selector
• Element selector selects HTML elements by their tag name.

<style>
p{
color: red;
}
</style>

<body>
<p> Hello HTML </p>
<p> Hello CSS </p>
</body>
2. ID Selector
• ID selector selects HTML element by their given ID.

<style>
#para {
color: red;
}
</style>

<body>
<p id=“para”> Hello HTML </p>
<p> Hello CSS </p>
</body>
3. Class Selector
• Class selector selects HTML elements by their given classes.

<style>
.para {
color: red;
}
</style>

<body>
<p class=“para”> Hello HTML </p>
<p> Hello CSS </p>
<p class=“para”> Hello JS </p>
</body>
4. Universal Selector
• Universal selector selects all HTML elements.

<style>
*{
color: red;
}
</style>

<body>
<p id=“para”> Hello HTML </p>
<p> Hello CSS </p>
</body>
5. Grouping Selector
• Grouping selector selects multiple targeted HTML elements.

<style>
h1, #para, .text {
color: red;
}
</style>

<body>
<p id=“para”> Hello HTML </p>
<h1> Hello CSS </h1>
<div> Hello JS </div>
<div class=“text”> Hello World </div>
</body>
Text Color and Background Color
Property
• Color property changes the text color of the targeted element.
• Background-color property changes the background color of the targeted element.
<style>
h1 {
color: green;
background-color: yellow;
}
</style>

<body>
<h1> Hello HTML </h1>
</body>
Height and Width Property
• Height and Width property sets the height and width of the targeted HTML
element respectively.
<style>
h1 {
color: red;
background-color: yellow;
height: 300px;
width: 550px;
}
</style>

<body>
<h1> Hello World </h1>
</body>
Assignment 1
Logo

• Home
• Gallery
• Services
• About us
• Contact us
• FAQ’s
Code 1
<!DOCTYPE html>
<html> <body> <li>
<head> <div class="container"> <h3>About us </h3>
<title>Basic Layout | HTML, CSS</title> <h1>Logo</h1> </li>
<style> <ul> <li>
.container { <li> <h3>Contact us</h3>
height: 700px;
<h3>Home</h3> </li>
width: 300px;
</li> <li>
color: red;
<li> <h3>FAQ's</h3>
background-color: yellow;
<h3>Gallery</h3> </li>
}
h1 {
</li> </ul>

height: 100px; <li> </div>


color: black; <h3>Services</h3> </body>
background-color: green; </li> </html>
}
</style>
</head>
Border Properties
• Border-width : Specifies the width of elements
border.

<style>
.container {
height: 500px;
width: 800px;
border-width: 6px;
}
</style>

<body>
<div class=“container”></div>
</body>
• Border-style : Specifies the style of elements
border.

<style>
.container {
height: 500px;
width: 800px;
border-style: solid;
/* solid dashed dotted double groove ridge inset outset none */
}
</style>

<body>
<div class=“container”></div>
</body>
• Border-color : Specifies the color of elements
border.

<style>
.container {
height: 500px;
width: 800px;
border-color: orange; /* Default: black*/
}
</style>

<body>
<div class=“container”></div>
</body>
• Border Shorthand Property
<style>
.container {
border: width style color;

border-top: width style color;


border-right: width style color;
border-bottom: width style color;
border-left: width style color;
}
</style>

<body>
<div class=“container”>Hello World</div>
</body>
• Border Radius Property

<style>
.container {
border: 6px solid green;
border-radius: 20px;
}
</style>

<body>
<h1 class=“container”>Hello World</h1>
</body>
Background Properties
• Background-color : Specifies the background
color of an element.

<style>

h1 {
background-color: green;
}

</style>

<body>

<h1> Hello World </h1>

</body>
• Background-image : Specifies the background
image of an element.

<style>
h1 {
height: 600px;
width: 1200px;
background-image: url(bg.jpg);
}
</style>

<body>
<h1> Hello World </h1>
</body>
• Background-repeat : Specifies the background
repetition of an element.
<style>
h1 {
height: 600px;
width: 1200px;
background-image: url(bg.jpg);
background-repeat: no-repeat; /* repeat-x | repeat-y */
}
</style>

<body>
<h1> Hello World </h1>
</body>
• Background-position : Specifies the background
position of an element.
<style>
h1 {
height: 600px;
width: 1200px;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center; /* top/bottom left/right */
}
</style>
<body>
<h1> Hello World </h1>
</body>
• Background-attachment : Specifies the scroll
behavior of background.
<style>
h1 {
height: 1600px;
width: 1200px;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed; /* Default: Scroll */
}
</style>
<body>
<h1> Hello World </h1>
</body>
• Background-size : Specifies the size of background
of an element.
<style>
h1 {
height: 600px;
width: 1200px;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover; /* 500px 300px | Default: auto */
}
</style>
<body>
<h1> Hello World </h1>
</body>
• Background Shorthand property.
<style>
.container {
height: 500px;
width: 800px;
background: url(bg.jpg) no-repeat center center/cover;
/* color/location repeat position-x position-y / size */
}
</style>
<body>
<div class=“container”> Hello World </div>
</body>
Assignment 2
Inline Element / Block Element
• Inline-level Element : only takes up as much width
as necessary.

e.g.

<body>
<a href=https://www.google.com></a>
<button>Click Here</button>
<label>This a label</label>
<input>
<img src=“demo.jpg”>
<br>
</body>
• Block-level Element : always takes up the full
width available.
e.g.

<body>
<h1>This is Heading.</h1>
<div>This is a Container</div>
<header></header>
<main></main>
<section></section>
<article></article>
<footer></footer>
</body>
Margin / Padding
• Margin
Space around element’s border ( outside of its border )

• Padding

Space around element’s content ( outside of its content )


Box Model
Diagram:
Font Properties
• Font-size: sets the font size of the text.

<style>
div {
font-size: 50px;
}
</style>

<body>
<div>This is a Div Box.</div>
</body>
• Font-weight: sets the font size of the text.

<style>
div {
font-weight: 900;

// bold, 100, 200, 300, 400, 500, 600, 700, 800, 900
}
</style>

<body>
<div>This is a Div Box.</div>
</body>
• Font-style: sets the font style of the text.

<style>
div {
font-style: italic;

// italic, 100, 200, 300, 400, 500, 600, 700, 800, 900
}
</style>

<body>
<div>This is a Div Box.</div>
</body>
• Font-family: sets the font family of the text.

<style>
div {
font-family: Roboto, Poppins;

// italic, 100, 200, 300, 400, 500, 600, 700, 800, 900
}
</style>

<body>
<div>This is a Div Box.</div>
</body>
Text Properties
• text-align: sets the alignment of the text.

<style>
div {
text-align: center;

// left, center, right, justify


}
</style>

<body>
<div>This is a Div Box.</div>
</body>
• text-decoration: sets the decoration of the text.

<style>
div {
text-decoration: underline;

// underline, overline, line-through, overline underline


}
</style>

<body>
<div>This is a Div Box.</div>
</body>
• text-transform: sets the case of the text.

<style>
div {
text-transform: uppercase;

// uppercase, lowercase, capitalize


}
</style>

<body>
<div>This is a Div Box.</div>
</body>
• text-indent: adds a indent before paragraph.

<style>
div {
text-indent: 50px;
}
</style>

<body>
<div>This is a Div Box.</div>
</body>
• letter-spacing: adds space between alphabets.

<style>
div {
letter-spacing: 10px;
}
</style>

<body>
<div>This is a Div Box.</div>
</body>
• word-spacing: adds space between words.

<style>
div {
word-spacing: 10px;
}
</style>

<body>
<div>This is a Div Box.</div>
</body>
• line-height: adds white space between lines.

<style>
div {
line-height: 20px;
}
</style>

<body>
<div>This is a Div Box.</div>
</body>
Float Property
• Float: defines how an element should float
<style>
p{
float: right;
}
</style>

<body>
<div>
This is a Div Box.
<p>Lorem ipsum dolor sit.</p>
</div>
</body>
Display Property
• Inline: displays an element as an inline element.
Height and width not applicable.
<style>
p{
display: inline;
}
</style>

<body>
<p>Lorem ipsum dolor sit.</p>
</body>
• Block: displays an element as a block element.
Starts on a new line,
takes up complete width of window.
<style>
p{
display: block;
}
</style>

<body>
<p>Lorem ipsum dolor sit.</p>
</body>
• Inline-block: displays an element as a inline
element.
Height and width applicable.
<style>
p{
display: inline-block;
}
</style>

<body>
<p>Lorem ipsum dolor sit.</p>
</body>
• None: The element is completely removed.
<style>
p{
display: none;
}
</style>

<body>
<p>Lorem ipsum dolor sit.</p>
</body>
Position Property
• Static: elements render as they appear in the flow
of document.
Default value.
<style>
p{
position: static;
}
</style>

<body>
<p>Lorem ipsum dolor sit.</p>
</body>
• Absolute: The element is positioned relative to its
first positioned element
<style>
p{ Top, Right, Bottom,
Left Properties are
position: absolute;
applicable when
top: 150px; element is
left: 80px; positioned.
}
</style>

<body>
<p>Lorem ipsum dolor sit.</p>
</body>
• Relative: The element is positioned relative to its
normal position.
<style>
p{ Top, Right, Bottom,
position: relative; Left Properties are
top: 150px; applicable when
element is positioned.
right: 80px;
}
</style>

<body>
<p>Lorem ipsum dolor sit.</p>
</body>
• Fixed: The element is positioned relative to the
browser window.
<style>
p{ Top, Right, Bottom,
position: fixed; Left Properties are
bottom: 150px; applicable when
element is positioned.
right: 80px;
}
</style>

<body>
<p>Lorem ipsum dolor sit.</p>
</body>
• Fixed: The element is positioned relative to the
browser window.
<style>
p{ Top, Right, Bottom,
position: fixed; Left Properties are
bottom: 150px; applicable when
element is positioned.
right: 80px;
}
</style>

<body>
<p>Lorem ipsum dolor sit.</p>
</body>
• z-index: The z-index property specifies the stack
order of an element.
<style>
.container {
position: relative;
bottom: 150px;
right: 80px; Top, Right, Bottom,
background: cyan; Left Properties are
} applicable when
.box { element is positioned.
position: absolute;
bottom: 10px;
right: 20px;
background: green;
}
</style>
<body>
<div class=“container” height=“200” width=“200”>
<div class=“box” height=“200” width=“200”>Lorem ipsum dolor sit.</div>
</div>
</body>

You might also like