HTML CSS Notes Tronix
HTML CSS Notes Tronix
<body>
-----
-----
-----
</body>
</html>
2. Body part:
==> The Body part contains actual content of the web page.
<body>
<h1> Welcome to Django frmaework </h1>
<h1> Welcome to My First HTML web page </h1>
<h1> Welcome to Tronix technologies </h1>
</body>
</html>
</body>
</html>
HTML:
1. HTML stands for Hyper Text Markup Language.
2. It is used to design a website or web application or web page
3. HTML is the combination of Hypertext and Markup Language.
4. Hypertext defines the link between the web pages.
5. Markup language is used to define the text document
within tag which defines the structure of web pages.
6. HTML 5 is the fifth and current version of HTML.
7. It has improved the markup available for documents and
has introduced Application Programming Interfaces(API)
and Document Object Model(DOM).
Html Features::
2. HTML along with CSS and JavaScript are the core parts
of web technologies.
3. HTML is used to create & display content of a website.
This content can be text, headings, media, list ,
tables etc on a web browser.
It is impossible to build a website without html.
W3C:
W3C is the organisation who build standards for the
development of World Wide Web.
==> W3C was founded by
Tim Berners-Lee in Oct 1994. Tim Berners-Lee is also
the current CEO of W3C.
HTML Versions
HTML was first formed in 1991. Till now, HTML receive many updates.
==> since the early days of the web , there have been many version of HTML.
HTML Version Date
HTML 1 1991
HTML 2 1995
HTML 3 1997
HTML 4 1997
HTML 4.01 1999
XHTML 1.0 2000
XHTML 1.1 2001
HTML5 2014
How to create a website using html:
To build a webpage using html, use following steps.
These steps are based on HTML5 web standards.
Just follow these simple steps, and your first html page
is ready, with W3C Standards.
<meta>
==> This is where information about the document is stored:
character encoding, name (page context), description.
HTML Tags:
HTML Tags are used to build components in a webpage.
Everything in a webpage is create by HTML Tags.
Here are some popular HTML Tags and their use.
Heading Tags:
==> These tags are used to display headings on the web page.
==> Normally the headings are 6:
i.e. <h1> , <h2> ,<h3>,<h4>, <h5>, <h6>.
ex:
<html>
<body>
<h1> Welcome to Django course </h1>
<h2> Welcome to Django course </h2>
<h3> Welcome to Django course </h3>
<h4> Welcome to Django course </h4>
<h5> Welcome to Django course </h5>
<h6> Welcome to Django course </h6>
</body>
</html>
Note:
!DOCTYPE html: Defines this document to be HTML5
html: The root element of an HTML page.
head: The element contains meta information about the document.
title: The element specifies a title for the document.
body: The element contains the visible page content.
h1: The element defines a large heading
p: The element defines a paragraph.
ex-1:
<html>
<head>
<title> Basic HTML for Django classes </title>
<head>
<body>
<h1>Welcome to Django course</h1>
<p> This is first paragraph </p>
</body>
</html>
ex-2:
<html>
<head>
<title> Basic HTML for Django classes </title>
<head>
<body>
<h1>Welcome to Django course</h1>
<p> This is first line
This is second line
This is third line
This is forth line
</p>
</body>
</html>
note:
The total data will come in a single line.
because we are using only one paragraph tag.
ex-3:
<html>
<head>
<title> Basic HTML for Django classes </title>
<head>
<body>
<h1>Welcome to Django course</h1>
<p> This is first line </p>
<p> This is second line </p>
<p> This is third line </p>
<p> This is forth line </p>
</body>
</html>
Note:Total data will come in 4 lines.
ex-4:
<html>
<head>
<title> Basic HTML for Django classes </title>
<head>
<body>
<h1>Welcome to Django course</h1>
<p> This is first line</p><p> This is second line </p><p> This is third line </p>
</body>
</html>
Note:
In HTML document indentation is not importatn
but tags are important.
ex-5:
<body>
<h1> Django : </h1>
<p> Django is a Framework . It is used to display the content in
web pages. Using Djngo we can create different types of forms
and we can create database .
</p>
<h1> python : </h1>
<p> python is a high level programming lanauges
python is a dynamically typed programming lanauges
</p>
</body>
HTML Lists:
==> These lists are used to display
the content in the proper order.
==> There are 3 types of HTML Lists.
1. ordered lists.
2. unordered lists
3. Description List
1. ordered lists:
==> All list items will be displayed with numbers.
==> <ol> tag represents ordered list.
==> <li> tag rerpresents list of items.
ex-1:
<html>
<head>
<h1> Demo for Ordered Lists </h1>
</head>
<body>
<ol>
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
<ol type="1">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
<ol type="A">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
<ol type="a">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
<ol type="I">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
<ol type="i">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
</body>
</html>
2. Unodered Lists:
==> Instead of numbers, bullet symbol will come.
==> Here order is not important.
==> <ul> tag represents unordered list.
==> <li> tag represents list of items.
ex:
<html>
<head>
<h1> Demo for UnOrdered Lists </h1>
</head>
<body>
<ul>
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ul>
<ul style="list-style-type:disc">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ul>
<ul style="list-style-type:circle">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ul>
<ul style="list-style-type:square">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ul>
<ul style="list-style-type:none">
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ul>
</body>
</html>
dl --> descr
dt --> term
dd --> data
ex-1:
<dl>
<dt> Python </dt>
<dd> - It is a high level programming langauge </dd>
<dd> - It is a oop programming langauge </dd>
<dd> - It is a pop programming langauge </dd>
<dd> - It is a Dynamic programming langauge </dd>
<dd> - It is a interper programming langauge </dd>
</dl>
ex-2:
<dl>
<dt>Biryani's</dt>
<dd>- Chicken </dd>
<dd>- Mutton </dd>
<dd>- Egg </dd>
<dd>- Vegetables </dd>
<dt>Beer's</dt>
<dd>- Budweiser </dd>
<dd>- KF </dd>
<dd>- elepheant </dd>
<dd>- Tin beers </dd>
</dl>
ex-3:
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
<dt>python</dt>
<dd>-It is a popular programming langauge.</dd>
<dt>Django</dt>
<dd>-It is a Web Frame Work .</dd>
</dl>
3. Nested Lists:
==> We can take list inside another list,
which are nothing but nested lists.
ex:
<body>
<ol>
<li> Chicken </li>
<ul>
<li> chicken 65 </li>
<li> chicken Fry </li>
<li> chicken drumstrik </li>
</ul>
<li> Mutton </li>
<li> Fish </li>
<li> Beer </li>
<ul>
<li> KF </li>
<li> KO </li>
<li> RC </li>
</ul>
</ol>
</body>
</html>
anchor tag<a>:
==> This tag is used to display the hyper links.
==> whenever u are clicked this anchor, then
the control goes to the corresponding web page.
==> It is used to mainly, to move from
one web page into another web page.
syntax:
<a href="path/filename"> message </a>
Here,
a is called anchor tag
href means hyperlink reference.
ex-1:
<html>
<a href ="https://facebook.com">FaceBook</a> <br><br>
<a href ="https://google.com"> Google</a> <br><br>
<a href ="https://tronixtechs.com"> Tronix Technologies </a> <br><br>
</html>
Note:
The anchor tag <a> works as a link in a webpage.
we can also set the color of the link by specifying the
hexadecimal value or color name.
there are 4 link states names:
a:link;
a:visited;
a:hover;
a:active
which can be used as per the requirement.
if we want to 'change the color of the link' only
when it hovers, we can use a:hover state and
define the color.
Also, the link should be provided right after the
keywords for better understanding.
<br> tag:
==> This tag is used to break the current line
and the control move the next line.
==> syntax:
<br>
ex: <br>
write a html program to transfer the web pages
from one page to another page using anchor tag:
step-1: first.html:
<html>
<h1> WELCOME TO FIRST WEB PAGE </h1>
<a href="second.html"> Click Here to go Second page</a> <br><br>
<a href="third.html"> Click Here to go Third page</a> <br><br>
<a href ="https://facebook.com">FaceBook</a> <br><br>
<a href ="https://google.com"> Google</a> <br><br>
<a href ="https://youtube.com"> Youtube </a>
</html>
step-2: second.html:
<html>
<h1> WELCOME TO SECOND WEB PAGE </h1>
<a href="first.html"> Click Here to go First page</a> <br><br>
<a href="third.html"> Click Here to go Third page</a> <br><br>
</html>
step-3: third.html:
<html>
<h1> WELCOME TO THIRD WEB PAGE </h1>
<a href="first.html"> Click Here to go First page</a> <br><br>
<a href="second.html"> Click Here to go Second page</a> <br><br>
</html>
Note:
In the anchor tag ,
if file the available in the another folder, then
we will provide the entire path.
ex:
<a href="d:/srinivas/hello.html"> Click Here to go Second page</a> <br><br>
step-4: display.html:
<h1> welcome to Home Page </h1>
<a href = "first.html"> First Page </a> <br> <br>
<a href = "second.html"> Second Page </a> <br> <br>
<a href = "third.html"> Third Page </a> <br><br>
ex:
<a href ="https://facebook.com"> Facebook </a> <br><br>
<a href ="https://youtube.com"> Youtube</a> <br><br>
<a href ="https://tronixtechs.com"> Tronix technologies </a> <br><br>
<a href ="https://amazon.in"> Amazon </a> <br><br>
<a href ="https://google.com"> Google</a> <br><br>
<img> tag:
==> This <img> tag is used to insert the images
in the html page.
==> syntax:
<img src="filename" alt="message">
Here,
==> img means it is a image attrubite
==> src means source where we have to specify the
image source(complete location).
==> we can take image address from the google also.
==> alt means alternative.
if the image is not available then,
to display the alternative message.
ex-1:
<html>
<img src="ab.jpg" alt="OOPS Image is missing"
</html>
Note:
we have to open the tag and we are not responsible to close
the tab, such type of tags are called self closing tags.
ex: <img> tag.
ex-2:
<p>This is some text. <img src="ab.jpg" alt="Smiley face" width="42"
height="42" style="float:right">This is some text.
This is some text. This is some text. </p>
ex-3:
<!DOCTYPE html>
<html>
<body>
<h2>vertical-align: bottom</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="vertical-align:bottom"> This is some text. This is some text. This is some text.</p>
<h2>vertical-align: middle</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="vertical-align:middle"> This is some text. This is some text. This is some text.</p>
<h2>vertical-align: top</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="vertical-align:top"> This is some text. This is some text. This is some text.</p>
<h2>float: right</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="float:right">This is some text. This is some text. This is some text.</p>
<h2>float: left</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="float:left">This is some text. This is some text. This is some text.</p>
</body>
</html>
<sub> tag:
The <sub> tag defines subscript text.
The sub script appears half a character below the
normal line and is sometimes reendered in a smaller font.
subscript text can be used for
chemical formulas
ex: H2SO4, h2O
write a html program demo for sub script tag.
<html>
<h1> sub script demo </h1> <br><br>
<h2> The chemical formula is :</h2>
H<sub>2 </sub>SO<sub>4</sub> <br><br>
H<sub>2</sub>O <br><br>
H<sub>4</sub>p<sub>13</sub>
</html>
<sup> tag:
The sup> tag defines the superscripted text.
the supscript appears half a charactrer above the normal line
ex : x2 , y2 , z2
write a html program demo for super script
<html>
<h1> super script Demo: </h1> <br>
<h2> The Mathematical formula is :</h2> <br>
(a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> +2ab
</html>
Table creation:
==> HTML tables allow web developers to arrange data
into rows and columns.
i.e. table means collections of rows and columns
==> The <table> tag defines an HTML table.
==> Each table row is defined with <tr> tag.
==> Each table header is defined withh a <th> tag.
==> Each table data/cell is defined with a tag </td> tag
==> The <caption> tag is used to display the title
of the table.
==> by default, the text in <th> elements are in bold and centered.
==> by default, the table data elements are appear regular font
and left-alignment.
ex: EMPNO ENAME SAL
101 ram 56000
102 laxman 99000
103 sita 88000
104 venakt 55000
write a html program to create a table name and age of the person:
<table border="1">
<thead>
<th> NAME </th>
<th> AGE </th>
<th> CITY </th>
</thead>
<tr>
<td> yawanth</td>
<td> 23 </td>
<td> vijayawada </td>
</tr>
<tr>
<td> Babu</td>
<td> 22 </td>
<td> Guntur </td>
</tr>
<tr>
<td> pavan</td>
<td> 20 </td>
<td> kodad </td>
</tr>
<tr>
<td> kusu srinvias</td>
<td>45</td>
<td> HYDERABAD </td>
</tr>
</table>
<html>
<body bgcolor="red">
<table border="1" bgcolor="blue">
<caption> Tronix Technologies Employees Information </capiton>
<thead>
<th>EMPLOYEE NUMBER</th>
<th>EMPLOYEE NAME</th>
<th>SALARY</th>
</thead>
<tr>
<td>101</td>
<td>ram</td>
<td>56000</td>
</tr>
<tr>
<td>102</td>
<td>Laxman</td>
<td>99000</td>
</tr>
<tr>
<td>103</td>
<td>sita</td>
<td>56000</td>
</tr>
<tr>
<td>104</td>
<td>bharat</td>
<td>99000</td>
</tr>
<tr>
<td>105</td>
<td>venakt</td>
<td>56000</td>
</tr>
<tr>
<td>106</td>
<td>Siva</td>
<td>99000</td>
</tr>
</table>
</body>
</html>
pracitse programs(Mini project):
ex: write a html program to enter first name and last name
<html>
<h1> Employee Infomation </h1>
<form>
Enter First Name: <input type="text"> <br> <br>
Enter Second Name: <input type="text">
</form>
</html>
2. textarea:
==> This is used to when the user is required to give
details that may be longer than a single sentence.
==> Multi-line input controls are created by using the
HTML <textarea> tag.
3. password:
==> This also single line text input but is masks the
character as soon as a user enters it.
==> They are also created using HTML <input> tag
but type attribute is set to password.
write a html program to create a login page.
<html>
<h1> LOGIN PAGE </h1>
<form>
Enter User Name: <input type="text"> <br> <br>
Enter Password: <input type="password">
</form>
</html>
4. number type:
==> This input type is used to enter digits only.
we cannot enter alphabets and special specials.
==> syntax:
<input type="number">
</form>
</html>
</form>
</html>
5. email:
==> This input type is used to enter emails only.
==> syntax:
<input type="email>
ex: write a html program demo for email type.
<html>
<h1> PERSON DETAILS: </h1>
<form>
Enter Person Name: <input type="text"> <br> <br>
Enter Age: <input type="number"> <br> <br>
Enter email: <input type="email">
<input type="submit">
</form>
</html>
6. submit button:
==> There are various ways in HMTL to create clickable
buttons. you can also create by clickble by using
<input> tag.
==> The submit button is used to automatically submits a form.
ex:
<html>
<h1> PERSON DETAILS: </h1>
<form>
Enter Person Name: <input type="text"> <br> <br>
Enter Age: <input type="number"> <br> <br>
Enter email: <input type="email"> <br><br>
<input type="submit" value="submit person data">
</form>
</html>
7. reset button:
==> This creates a button that automatically
resets form controls to their initial values.
ex:
<html>
<h1> EMPLOYEE DETAILS </h1>
<form>
Enter Employee Name : <input type="text" value="kusu srinvias" > <br> <br>
Enter Company Name : <input type="text" value="Infosys"> <br> <br>
Enter Country Name : <input type="text" value="India"> <br> <br>
<input type="submit" value="submit employee data"> <br>
<input type="reset" value="Reset"> <br>
</form>
</html>
8. checkbox:
==> checkboxes are used when morethan one option is required to be selected.
==> They are also created by using HTML <input> tag
but type attribute is set to checkbox.
==> syntax:
<input type ="checkbox">
ex-1:
<html>
<h1> EMPLOYEE DETAILS </h1>
<form>
Enter Employee Name : <input type="text"> <br> <br>
Enter employee Gender :
<input type="checkbox"> Male
<input type="checkbox"> Female <br><br>
<input type="submit" value="submit employee data"> <br>
</form>
</html>
ex-2:
<html>
<h1> Enter Student DETAILS </h1>
<form>
Enter Hall ticket Number: <input type="number"> <br> <br>
Enter Student Name : <input type="text"> <br> <br>
</form>
</html>
write a html program demo for check box:
<html>
<h2> Choose Your Known Languages: </h2>
<input type="checkbox"> Telugu <br>
<input type="checkbox"> English <br>
<input type="checkbox"> Hindi <br>
<input type="checkbox"> Tamil <br>
<input type="checkbox"> Japanees <br>
</form>
</html>
ex-4:
I know the following programming Languages <br><br>
<input type="checkbox"> python <br><br>
<input type="checkbox"> C <br><br>
<input type="checkbox"> C++ <br><br>
<input type="checkbox"> java <br><br>
<input type="checkbox"> go <br><br>
<input type="checkbox"> perl <br><br>
Radio buttons:
==> The radio buttons are mainly used to, when out of many
options, just one option is required to be selected.
==> They are also created by using HTML <input> tag
but the type attribute is set to radio.
ex-1:
<html>
<h2> Choose Your Martial status: </h2>
<form>
<input type="radio" name="gender" > Male <br>
<input type="radio" name="gender" > Female <br>
<input type="radio" name="gender" > Transgender <br>
</form>
</html>
ex-2:
<html>
<h1> Enter Employee Details </h1>
<form>
Enter Employee Id: <input type="number"> <br><br>
Employee Nane: <input type="text"> <br><br>
Employee Gender: <br>
<input type="radio" name="gender" > Male <br>
<input type="radio" name="gender" > Female <br>
<input type="radio" name="gender" > Transgender <br>
ex-2:
<html>
<h2> Please select your Course: </h2>
<select name="pmode">
<option value="course"> CSE </option>
<option value="course"> IT </option>
<option value="course"> EEE </option>
<option value="course"> Mechanical </option>
<option value="course"> ML </option>
<option value="course"> DataScience </option>
</select>
</form>
</html>
ex-4:
<html>
<h2> Please select your state: </h2>
<select name="pmode">
<option value="st"> Andhra pradesh </option>
<option value="st"> Telangana </option>
<option value="st"> MP </option>
<option value="st"> UP </option>
<option value="st"> Delhi </option>
<option value="st"> Panjab </option>
<option value="st"> Maharastra </option>
<option value="st"> Bihar </option>
<option value="st"> Orissa </option>
</select>
</form>
</html>
file type:
ex-1:
<html>
<input type="file" >
</html>
date type:
ex-1:
<html>
<input type="date" >
</html>
time type:
ex-1:
<html>
<input type="time" >
</html>
1. write a html program using action attribute
demo.html:
<form action="first.html">
Enter hall ticket Number <input type="number"><br><br>
Enter student Name <input type="text"><br><br>
Enter first subject marks <input type="number"><br><br>
Enter second subject marks <input type="number"><br><br>
Enter third subject marks <input type="number"><br><br>
<input type="submit" value="Submit">
</form>
first.html:
<h1> Data saved Successfully </h1>
<h2> Thank u </h2>
<form action="first.html">
Enter User Name <input type="text"><br><br>
Enter password <input type="password"><br><br>
<tr>
<td>Enter Employee name </td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Enter Employee salary </td>
<td> <input type="number"> </td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
4. write a html program to create a html registration form
<!DOCTYPE html>
<html>
<head></head>
<body bgcolor="gold" font-color="red">
</table>
</body>
</html>
HTML <address> Tag
Syntax:
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Ex:
<!DOCTYPE html>
<html>
<body>
<h1>Tronix Technologies/h1>
Downloading progress for a song:
<!--HTML progress tag starts here-->
<progress value="57" max="100">
</progress>
<!--HTML progress tag ends here-->
</body>
</html>
HTML <mark> Tag
1
The <mark> tag in HTML is used to define the marked text.
It is used to highlight the part of the text in a paragraph.
The <mark> tag is new in HTML 5.
Syntax:
<mark> Contents... </mark>
Example 1: This example uses <mark> tag to highlight the text. By default, <mark> tag
highlight the text content in yellow color.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;"> Tronix Technologies </h1>
<p>
<mark> Tronix Technologies :</mark> It is a
<mark> python Full stack </mark> Developer
</p>
</body>
</html>
Output:
<body>
<h1>Tronix Technologies</h1>
</body>
</html>
1. executable statements:
These statements are executed while program running.
<body>
<h1> Django : </h1>
<hr>
<p> Django is a Framework . It is used to display the content in
web pages. Using Djngo we can create different types of forms
and we can create database .
</p>
<hr>
<p> <b> Django is a Framework . It is used to display the content in
web pages. Using Djngo we can create different types of forms
and we can create database . </b>
</p>
<hr>
<p> <b> <i> Django is a Framework . It is used to display the content in
web pages. Using Djngo we can create different types of forms
and we can create database . </i> </b>
</p>
Mini project-2:
To create a web site using matrimonial application:
First page:
Welcome to Tronix Matrimonial
Matrimonial pics(image)
second page:
Registration Form
All fields are Mandatory:
Name :
Email:
Age :
Third page:
CSS:
==> To make them beautiful.
==> CSS stands for cascading style sheets.
==> It is not a programming languages.
==> It is used only stlying purpose.
==> The main objective of CSS is to add styles to HTML.
==> CSS describes how HTML elements are
display on a web page.
==> styles includes colors, fonts sizes and font styles,
and border, .....etc.
==> We can define CSS styling inside Html.
==> But it is highly recommened to define styling inside a
separate CSS file i.e.( .css extension) and link that file to HTML.
<body>
<h1> TRONIX TECHNOLOGIES </h1>
<h1> Good evening </h1>
</body>
1. inline css:
==> The css style is applied within the tag.
i.e. by using the style attribute inside HTML elements.
ex:
<html>
<head>
</head>
<body>
<h1 style="color:red"> TRONIX TECHNOLOGIES </h1>
<h1 style="color:blue"> Good evening </h1>
<p style="color:red">
python is a high level programming langauge
python is a interpreter
python is a dynamically language
</p>
</body>
<html>
Internal css:
==> The css style is applied in head part.
and enclosed by <style> tag.
i.e. By using <style> element in the <head> section.
ex:
<html>
<head>
<style>
h1{
color:red;
}
h2{
color:orange;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1> Tronix TECHNOLOGIES </h1>
<h2> Good evening </h2>
<p>
python is a high level programming langauge
python is a interpreter
python is a dynamically language
</p>
</body>
<html>
3. external css:
==> We can use separate .css file. and link that file.
==> By using a <link> element to link to an external css file
<body>
<h1> TRONIX TECHNOLOGIES </h1>
<h1> Good evening </h1>
<p>
python is a high level programming langauge
python is a interpreter
python is a dynamically language
</p>
</body>
<html>
ex-2: r --> 0
g --> 0
b --> 0
color: rgb(0,0,0) ---> black
method-4: color:rgba(244,66,220,0.4)
r--red
g--green
b--blue
a--alpha
The alpha allowed values for a attribute are : 0.0 to 1.0
</style>
</head>
<body bgcolor='red'>
<h1> Good Morning to all </h1>
</body>
</html>
<head>
<style>
h1{
color:rgba(255,255,255,0.3);
</style>
</head>
<body bgcolor='red'>
<h1> Good Morning to all </h1>
</body>
</html>
write a html program to display all list items in red color
<style>
li{
color:red;
}
</style>
<ol>
<li> pytyon </li>
<li> django </li>
<li> sql </li>
<li> HTML </li>
<li> CSS </li>
<li> JAVASCRIPT </li>
<li> GO </li>
<li> JAVA </li>
</ol>
<style>
#x{
color:red;
}
#y{
color:yellow;
}
#z{
color:blue;
}
</style>
<ol>
<li id="x"> pytyon </li>
<li id="y"> django </li>
<li id="z"> sql </li>
<li> HTML </li>
<li> CSS </li>
<li> JAVASCRIPT </li>
<li id="x"> GO </li>
<li> JAVA </li>
</ol>
using tagname:
tagname{
property-1:value-1;
property-2:value-2;
--
--
property-n:value-n;
}
using id name:
#idname{
property-1:value-1;
property-2:value-2;
--
--
property-n:value-n;
}
write a css program to apply inline css
<body bgcolor="yellow">
<h1 style="color:orange"> Tronix technologies </h1>
<h2 style="color:blue"> Good afternoon to all</h2>
</body>
write a css program to apply internal css
<style>
body{
background-color:yellow;
}
h1{
color:orange; }
h2{
color:blue; }
</style>
<body >
<h1> Tronix technologies </h1>
<h2> Good afternoon to all</h2>
</body>
<html>
<head>
<style>
body{
background-color:yellow;
}
h1{
color:red;
background:blue;
border-color:green;
border-width:medium;
border-style:double;
}
</style>
</head>
<body>
<h1> Welcome to tronix technologies </h1>
</body>
</html>
Note:
The above html program select all instances of given element.
i.e. style is applicable for every h1 tag of the html page..
Different selectors in CSS:
1. ID selector:
==> selects an element with the given id.
==> But with in the html page ID is always unique.
<html>
<head>
<style>
#good{
border :solid blue 10px;
}
#hello{
border: groove 10px red;
}
#verygood{
border:solid yellow 20px;
}
</style>
</head>
<body>
<h1 id="hello"> Welcome to TRONIX technologies </h1>
<h1 id="good"> welcome to Web technologies </h1>
<h1 id= "verygood"> Python is a high level programming Language</h1>
</body>
</html>
2. class selector:
==> select all elements with the given class.
ex:
<html>
<head>
<style>
.hello{
color:red;
background:blue;
}
</style>
</head>
<body>
<h1 class="hello"> Welcome to TRONIX technologies </h1>
<h1> Welcome to Web technologies </h1>
<h1 class="hello"> Python is a high level programming Language</h1>
</body>
</html>
Final syntax:
tagname{
property:value;
property:value
}
#idname{
property:value;
property:value
}
.classname{
property:value;
property:value
}
CSS Inheritance:
===> All the properties of the parent are by default
available to the child and we are not required to redefine.
This property is called a inheritance.
==> Inheritance concept applicable for css styles also.
==> i.e what every styles are defined for the parent tag
automatically are available to the child tags also.
ex-1:
body{
color:red;
}
write a html to apply css inheritance:
<html>
<head>
<style>
body{
color:red;
}
</style>
</head>
<body>
<h1> CSS Inheritance </h1>
<h2> Welcome CSS </h2>
<p> python is a high level programming language <br>
python is a scripting programming language <br>
python is a Dynamically typed programming language <br>
python is a Interprere basedprogramming language <br>
</p>
<ol>
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
</body>
</html>
note:
This css style is applicable for all elements
present inside body tag.
ex-2:
<html>
<head>
<style>
body{
color:red;
}
h1{
color:green;
}
ol{
color: blue;
}
p{
color:yellow;
}
</style>
</head>
<body>
<h1> CSS Inheritance </h1>
<h2> Welcome CSS </h2>
<p> python is a high level programming language <br>
python is a scripting programming language <br>
python is a Dynamically typed programming language <br>
python is a Interprere basedprogramming language <br>
</p>
<ol>
<li> Tea </li>
<li> Coffee </li>
<li> Milk </li>
</ol>
</body>
</html>
example programs:1.
<body style="text-align: center;">
<h2 style="color: red;">Welcome to Tronix Technologies</h2>
<p style="color: blue; font-size: 25px; font-style: italic ;">This is a great organization to
learn technologies in very simple way. </p>
</body>
2.<!DOCTYPE html>
<html>
<head>
<style>
/Internal CSS using element name/
body{background-color:lavender;
text-align: center;}
h2{font-style: italic;
font-size: 30px;
color: #f08080;}
p{font-size: 20px;}
/Internal CSS using class name/
.blue{color: blue;}
.red{color: red;}
.green{color: green;}
</style>
</head>
<body>
<h2>Learning CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
Fonts & Text in CSS:
The following are very important properties related
to fonts and text in css.
1). font-family
2). font-size
3). font-weight
4). font-height or line-height
5). text-align
6). text-decoration.
1). font-family:
==> we can select desired font style from default
css system fonts in the following line:
http://www.cssfontstack.com/
ex-1: h1{
font-family: Arial Black;
}
ex-2:
<html>
<head>
<style>
h1{
font-family: Calibri;
}
</style>
</head>
<body>
<h1> CSS Inheritance </h1>
</body>
</html>
2). font-size:
==> we have to change the size of the font also.
ex-1:
h1{
font-size:20px;
}
ex-2:
<html>
<head>
<style>
h1{
font-family: Arial Black;
font-size:60px;
}
</style>
</head>
<body>
<h1> CSS Inheritance </h1>
</body>
</html>
3). font-weight:
==> The font-weight specified the thickness of the font.
sometimes like bold font,light font,...etc.
bold ,bolder, lighter , normal.
The allowed values are 100 to 900 .
100 means light . 900 means too much bold.
ex-1:
p{
font-weight:500;
}
ex-2:
<html>
<head>
<style>
h1{
font-family: Arial Black;
font-size:60px;
}
p{
font-weight:900;
}
</style>
</head>
<body>
<h1> CSS Inheritance </h1>
<p> python is a high level programming language <br>
python is a scripting programming language <br>
python is a Dynamically typed programming language <br>
python is a Interprere basedprogramming language <br>
</p>
</body>
</html>
4). line-height:
==> The space between 2 lines is called a line -height.
ex-1: p{
line-height: 1.5;
}
ex-2:
<html>
<head>
<style>
h1{
font-family: Arial Black;
font-size:60px;
}
p{
font-weight:900;
line-height:2
}
</style>
</head>
<body>
<h1> CSS Inheritance </h1>
<p> python is a high level programming language <br>
python is a scripting programming language <br>
python is a Dynamically typed programming language <br>
python is a Interprere basedprogramming language <br>
</p>
</body>
</html>
5. text-align:
==> This property is used to align text either
left,center,right.
==> By default, text is automatically aligned leftside.
==> The allowed values are left,right,center,justify.
ex-1:
<html>
<head>
<style>
h1{
font-family: Arial Black;
font-size:30px;
text-align:right;
}
</style>
</head>
<body>
<h1> CSS Inheritance </h1>
</body>
</html>
6. text-decoration:
==> This property is used to decorate the given text.
==> The allowed values are underline,overline,line-through
ex:
<html>
<head>
<style>
h1{
font-family: Arial Black;
color:red;
font-size:60px;
text-decoration:underline;
}
</style>
</head>
<body>
<h1> Fonts and Text in CSS </h1>
</body>
</html>
CSS BORDER style PROPERTIES
==> The CSS border properties allow you to specify the style,
width, and color of an element's border.
==> The border-style property specifies what kind of border
to display.
ex-1:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
border-style:dotted;
}
</style>
<body>
<h1><center> Tronix Technologies </center> </h1>
</body>
</html>
ex-2
write a html program to set css border properties
in only one program:
<!DOCTYPE html>
<html>
<head>
<style>
p.p1 {border-style: dotted;}
p.p2 {border-style: dashed;}
p.p3 {border-style: solid;}
p.p4 {border-style: double;}
p.p5 {border-style: groove;}
p.p6 {border-style: ridge;}
p.p7 {border-style: inset;}
p.p8 {border-style: outset;}
p.p9 {border-style: none;}
p.p10 {border-style: hidden;}
p.p11 {border-style: dotted dashed solid double;}
</style>
</head>
<body>
BORDER WIDTH:
==> The border-width property specifies
the width of the four borders.
==> The width can be set as a specific size (in px, pt, cm, em, etc)
or by using one of the three pre-defined values: thin, medium, or thick.
==> The border-width property can have from one to four values
(for the top border, right border, bottom border, and the left border).
ex-1:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-style: double;
border-width: 25px;
}
</style>
</head>
<body>
</body>
</html>
ex-2:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
p.five {
border-style: double;
border-width: 15px;
}
p.six {
border-style: double;
border-width: thick;
}
p.seven {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
</body>
</html>
BORDER COLOR
==> The border-color property is used to set the color
of the four borders.
ex-1:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-style: double;
border-width: 25px;
border-color: red;
}
</style>
</head>
<body>
</body>
</html>
ex:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
}
</style>
</head>
<body>
</body>
</html>
ex-1:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: double;
border-left-style: none;
}
</style>
</head>
<body>
</body>
</html>
</body>
</html>
border-style: dotted;
all four borders are dotted
ex-1:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: double;
border-left-style: none;
}
</style>
</head>
<body>
</body>
</html>
</body>
</html>
border-style: dotted;
all four borders are dotted
The border property is a shorthand property for the following individual border properties:
border-width
border-style (required)
border-color
ex:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color:blue;
border: 5px solid red;
}
</style>
</head>
<body>
</body>
</html>
You can also specify all the individual border properties for just one side:
Left Border
p{
border-left: 6px solid red;
background-color: lightgrey;
}
Bottom Border
p{
border-bottom: 6px solid red;
background-color: lightgrey;
}
<div> tag:
==> div tag means division tag.
==> The <div> tag defines a division or section in an HTML element.
==> The <div> is used as a container for HTML elements.
which is then styled with css or manipulates with javascript.
==> The <div> tag is easily styled by using the
class or id attribute
==> A <div> section in a document that is styled with css.
ex-1:
<!DOCTYPE html>
<html>
<head>
<style>
.x{
border: 5px outset red;
background-color:lightblue;
text-align:center;
}
</style>
<body>
<div class="x">
<h2> Tronix Technologies <h2>
<p> This is a IT Training Institute <br>
spcially designed for python <br>
It is located near JNTU . <br>
HYDERABAD-500085.
</p>
</div>
</body>
</html>
ex-2:
<!DOCTYPE html>
<html>
<head>
<style>
.x{
border: 5px outset red;
background-color:lightblue;
text-align:center;
}
.y{
border:10px dashed yellow;
background-color:green;
text-align:right;
}
</style>
<body>
<div class="x">
<h2> Tronix Technologies <h2>
<p> This is a IT Training Institute <br>
spcially designed for python <br>
It is located near JNTU . <br>
HYDERABAD-500085.
</p>
</div>
<div class="y">
<h3> Tronix Technologies <h3>
<p> This is a IT Training Institute <br>
specially desinged for web development <br>
It is located In kukatpally. <br>
HYDERABAD-500010.
</p>
</div>
</body>
</html>
ex-3:
<head>
<style>
.x{
border: 5px outset red;
background-color:lightblue;
text-align:center;
}
</style>
<body>
<div class="x">
<a href="batch5.html"><img src ="ab.jpg"></a>
</div>
</body>
</html>
ex-3:
<!DOCTYPE html>
<html>
<head>
<style>
.x{
border: 5px outset red;
background-color:lightblue;
text-align:left;
}
.y{
border: 5px dotted green;
background-color:yellow;
text-align:left;
}
</style>
<body>
<div class="x">
<a href="#">Home</a>
<a href="#">Contact</a>
<a href="#">search</a>
<a href="#">Help</a>
</div>
<div class="y">
<a href="#">PYTHON</a>
<a href="#">JAVA</a>
<a href="#">CPP</a>
<a href="#">DJANGO</a>
</div>
</body>
</html>
ex-4:
<!DOCTYPE html>
<html>
<head>
<style>
.x{
border: 5x outset red;
background-color:lightblue;
text-align:left;
font-size:25px;
}
</style>
<body>
<div class="x">
<a href="batch5.html">Home</a>              
                 
<a href="second.html">Contact</a>              
             
<a href="third.html">search</a>              
             
<a href="#">Help</a>                  
       
</div>        
<br><br><br>
</body>
</html>
<style>
h1{
color:red;
border-color:blue;
border-style:double solid double solid;
border-width:10px;
}
</style>
<h1> UI DEVELOPERS </h1>
ex: div tag demo
<style>
.warning{
border:10px ridge #f00;
background-color:#ff0;
padding: .5rem;
display : flex;
flex-direction:column;
}
.warning img{
width:100%
}
.warning p{
font:small-caps bold 1.2rem sans-serif;
text-align:center;
}
</style>
<div class="warning">
<img src="" alt="Image not found">
<p> Beware of the Dogs </p>
</div>
ROUNDED BORDERS
Rounder border
Roundest border
ex:
<html>
<head>
<style>
p.normal {
border: 2px solid red;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
}
</style>
</head>
<body>
</body>
</html>
CSS MARGINS
==> The margin properties set the size of the white space
outside the border.
==> With CSS, you have full control over the margins
==> There are CSS properties for setting the margin
for each side of an element (top, right, bottom, and left).
MARGIN - INDIVIDUAL SIDES:
CSS has properties for specifying the margin for
each side of an element:
margin-top
margin-right
margin-bottom
margin-left
All the margin properties can have the following values:
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin
of 100px, and a left margin of 80px.</div>
</body>
</html>
margin-top
margin-right
margin-bottom
margin-left
ex:
p{
margin : 100px 150px 100px 80px ;
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 100px 150px 100px 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin
of 100px, and a left margin of 80px.</div>
</body>
</html>
margin: 25px;
all four margins are 25px
Example
div {
width : 300px;
margin : auto;
border : 1px solid red ;
}
ex:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 20px;
padding: 40px;
}
}
</style>
The top margin, combined with right, bottom, and left margins,
can also be specified with the margin shorthand property.
Possible Values
Value Note Example
[length] 10px
[percentage] Calculated as a percentage of the
containing box’s width. 25%
auto
inherit
initial
unset
Example
The top padding, combined with right, bottom, and left padding, can also be specified with
the padding shorthand property.
Possible Values
Value Note Example
[length] Should not be a negative value. 10px
[percentage] Calculated as a percentage of the containing box’s width.
Should not be a negative value. 25%
inherit
initial
unset
Ex:
#puffin { padding-top: 36px; }
With one value, the padding property can be used to specify uniform padding around a box.
With two, three, or four values, sides can be specified independently.
Possible Values
Value Note Example
[length] Should not be a negative value. 10px
[percentage] Calculated as a percentage of the containing box’s width.
Should not be a negative value. 25%
inherit
initial
unset
Multiple Values
One, two, three, or four space-separated values:
Examples
New Examples Section!
See all of this code stuff in action, and play around with it.
Example