Showing posts with label HTML&CSS. Show all posts

Sunday 15 April 2018

Show Display Inline function in CSS

Irawen April 15, 2018 HTML&CSS No comments

Example:-

<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/CSS”>
#div{border:1px solid;
wedth:30px;
background-color:blue;
color:white;
display-inline:block;
</head>
<body>
<div id=”div1> The Contents goes here
</div>
</body>
</html>

Negation in CSS with Display tag

Irawen April 15, 2018 HTML&CSS No comments

–> Here, we are see a navigation of menu.
Syntax:-
li{display:inline;
padding-left:20px;
padding-right:20px;
}

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/CSS”>
li{display:inline;
padding-left:20px;
padding-right:20px;
}
</head>
<body>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul>
</div>
</body>
</html>

Visibility and Display Text in CSS

Irawen April 15, 2018 HTML&CSS No comments

We are see a visibility of any div and display of div.

Syntax:-
#div2{
border:1px solid;
width:30px;
height:100px;
Visibility:visible; //This is a use a visibility.
}
#div3{
border:1px solid;
width:30px;
height:100px;
Display:none; // Here, This is use a display syntax.
}
Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css”>
#div1{
border:1px solid;
width:30px;
height:100px;
}
#div2{
border:1px solid;
width:30px;
height:100px;
Visibility:visible;
}
#div3{
border:1px solid;
width:30px;
height:100px;
Display:none;
}
</head>
<body>
<div1 id=”div1″></div>
<div1 id=”div2″></div>
<div1 id=”div3″>
</div>
</body>
</html>

How to use div in Center?

Irawen April 15, 2018 HTML&CSS No comments

Here we are use a any heading on center.

Syntax:-
#div1{border:1px solid;
width:400px;
height:70px;
background-color:blue;
margin:auto;
}
Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
#div1{border:1px solid;
width:400px;
height:70px;
background-color:blue;
margin:auto;
}
</style>
</head>
<body>
<div id=”div1″>
Hello Friends!!!!
</div>

</body>
</html>

Padding in CSS

Irawen April 15, 2018 HTML&CSS No comments

Padding is a space between edges of element and the element contents.

Syntax:-
#div1{border:1px solid;
width:400px;
height:70px;
background color:blue;
color:white;
padding-left:10px;
padding-top:10px; OR padding:20px;
}

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
#div1{border:1px solid;
width:400px;
height:70px;
background color:blue;
color:white;
padding-left:10px;
padding-top:10px; OR padding:20px;
}
</style>
</head>
<body>
<div id=”div1″>
Hello Friends!!!!
</div>

</body>
</html>

Margin Property in CSS

Irawen April 15, 2018 HTML&CSS No comments

In this slide we are see a how to arrange two box in CSS.

Syntax:-
#div1{border:1px solid;
width:400px;
height:70px;
margin-top:100px;
margin-left:100px;
}

Example:-

<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
#div1{border:1px solid;
width:400px;
height:70px;
margin-top:100px;
margin-left:100px;
}
#div{border:1px solid;
width:400px;
height:70px;
margin-bottom:100px;
margin-right:100px;
}
</style>
</head>
<body>
<div id=”div1″>
Hello Friends!!!!
</div>
<div id=”div2″>
Hello Friends!!!!
</div>
</body>
</html>

Overflow Property in CSS

Irawen April 15, 2018 HTML&CSS No comments

In this slide we are see a overflow property in CSS.

Syntax:-
#test{border:1px solid;
width:400px;
height:70px;
overflow:auto/scroll;
}

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
#test{border:1px solid;
width:400px;
height:70px;
overflow:auto/scroll;
}
</style>
</head>
<body>
<div id=”test”>
Hello Friends!!!!
</div>
</body>
</html>

Width and Height in CSS

Irawen April 15, 2018 HTML&CSS No comments

Here, we are set a width and height of paragraph in CSS.

Syntax:-
#test{
border:1px solid;
width:400px;
height:70px; OR
Max-height:70px
}

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
#test{
border:1px solid;
width:400px;
height:70px; OR
Max-height:70px
}
</style>
</head>
<body>
<p>
Hii My name is Castor Class.I am provide a online Classes.
</p>
</body>
</html

Border Style in CSS

Irawen April 15, 2018 HTML&CSS No comments

Here, we are set a font style.

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
p{font-family:monospace;
font-size:40px;
font weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<p>CASTORCLASSES</p>
</body>
</html>

CSS Border Property

Irawen April 15, 2018 HTML&CSS No comments

In this slide we are set a property of border in Heading.

Syntax:-
h2{border:1px dash/double/dotted/inset/outset green;
}

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
h2{border:1px dash/double/dotted/inset/outset green;
}
</style>
</head>
<body>
<h1>CASTORCLASSES</h1>
</body>
</html>

Class Selector

Irawen April 15, 2018 HTML&CSS No comments

Class Selector is use one or more element.
Here, we are see a multiple text in different form.

Syntax:-
.para{
color:white;
background color:blue;
}
.services{
color:white;
background:black;
width:140px;
height:30px;
margin:10px;
}

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
.para{
color:white;
background color:blue;
}
</style>
</head>
<body>
<p class=”para”>This is paragraph1</p>
<p class=”para”>This is paragraph2</p>
<p>This is paragraph3</p>
</body>
</html>

Example2:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
.services{
color:white;
background color:black;
width:140;
height:30px;
margin:10px;
</style>
</head>
<body>
<div class=”services”>
Hardware
</div>
<div class=”services”>
Software
</div>
<div class=”services”>
Networking
</div>
</body>
</html>

Id Selector / Use a Header and Footer

Irawen April 14, 2018 HTML&CSS No comments

Id selector is a single element specified.
Here, we are see a div command.

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
# p1{color:red;}
#header{
border:1px solid;
}
</style>
</head>
<body>
<div id=”header”>
This is a header
</div>
<p id=”p1″>this is paragraph</div>
</body>
</html>

How to Link Style in CSS?

Irawen April 14, 2018 HTML&CSS No comments

Here, we are see a all Link decoration.

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
a{color:blue;text-transform:uppercase;}
a:visited{color:green;}
a:active{color:white;background-color:black;}
</style>
</head>
<body>
<a href=”#”>This is link 1.</a>
</body>
</html>

Text Decoration / Align / Text indent

Irawen April 14, 2018 HTML&CSS No comments

Here, we are decorate a plain text.

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
a{
color:red;   //Set Color
text-align:left;     //Set Align
text-decoration:uppercase/lowercase/blink;   //Set text decoration
text-transform:uppercase/lowercase/capitalize;   //Set text transform
text-indent:100px;       //Set text indent
}
</style>
</head>
<body>
<a href=”#”>This is My first Paragraph </a>
</body>
</html>

Background image

Irawen April 14, 2018 HTML&CSS No comments

Set background image.

Example:-
<html>
<head>
<title>CastorClass.com</title>
<style type=”text/css”>
body{background-image:url (‘image/image.jpg’); ///This is set a image link.
background-repeat:no repeat; //This is use a not repeat image.
background-position:top center; OR background-position:top right; //This is set a image position
}
</style>
</head>
<html>

Use background color

Irawen April 14, 2018 HTML&CSS No comments

This is use for background color.

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
body{background-color:red;}
h1{bacground-color:red;
color:white;
}
p<background-color:yello;color:pink;}
</style>
</head>
<body>
<h1>hello everyone</h1>
<p>This is very good</p>
</body>
</html>

How to use CSS in HTML?

Irawen April 14, 2018 HTML&CSS No comments

we are already study in starting CSS.In this slide we will use a CSS is coding is another file.Because we are write same file that is very complicated.

Example:-
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
h1{color:red; bacground:red;} //This is write a another File.
</style>
</head>
<body>
<h1>hello everyone</h1>
</body>
</html>

Introduction of CSS

Irawen April 14, 2018 HTML&CSS No comments

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces.

It can also be used with any kind of XML documents including plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.

Syntax:-
<style type=”text/css”>
h1{color:red;}
</style>

Example:-
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
h1{color:red;}
</style>
</head>
<body>
<h1>hello everyone</h1>
</body>
</html>

Use a Text box / Button / Radio box / Check box.

Irawen April 14, 2018 HTML&CSS No comments

In text box we are use a only plain text.
We know everyone how to use a button.
Radio button is use for choose a one option.
Check box is use for select multiple option.

Syntax:-
<form>
<input type=”text”/>
<input type=”button” “value=show”/>
<input type=”radio” name=”gender”/>Male<input type=”radio” name=”gender”/>Female
<input type=”Check box”/>English<input type=”Check box”/>hindi
</form>

Example:-
<html>
<head>
<title>Welcome</title
</head>
<body>
<form>
<input type=”text”/>
<input type=”button” “value=show”/>
<input type=”radio” name=”gender”/>Male<input type=”radio” name=”gender”/>Female
<input type=”Check box”/>English<input type=”Check box”/>hindi
</form>
</body>
</html>

List

Irawen April 14, 2018 HTML&CSS No comments

Type of List

Unorder list
order list
Definition list

Syntax:-
<form>

<ul type=”circle”> //Unorder list
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

<ol type=”i”> //order list
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>

<dl> ///Definition list
<df>CastorClasses</df>
<dd>MatLab</dd>
<dd>Java</dd>
</dl>
</form>

Example:-
<html>
<head>
<title>Welcome everyone </title>
</head>
<body>
<form>
<ul type=”circle”>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ol type=”i”>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
<dl>
<df>CastorClasses</df>
<dd>MatLab</dd>
<dd>Java</dd>
</dl>
</form>
</body>
</html>

Sunday 15 April 2018

Saturday 14 April 2018

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces.

Type of List

Popular Posts

Categories

Followers

Free Courses

Translate

Data Processing Using Python (Free Course)

Courses

Popular Posts

LAND YOUR FIRST JOB IN TECH

Deep Learning

Free Python Books

365 Days Python Coding Challenge

Registration Form for Classes

Cybersecurity for Everyone (Free Course)

Top 10 Python Data Science book

Free Courses

Blog Archive

Popular Posts

Join Us

Free Web Development using Python

Subscribe To

My Blog List

Join Us