Example 1 – Nav Bar
<!doctype html> <head> <style> h1{ color: #2f4f4f; margin-bottom: 10px; } .nav{ margin-top: 10px; list-style: none; padding-left: 0; } .nav li{ display: inline-block; } .nav a{ color: white; background-color: #13a4a4; padding: 5px; border-radius: 2px; text-decoration: none; } a.featured{ background-colour: orange; } </style> </head> <body> <header> <h1> CSC Computer Education</h1> <nav> <ul class="nav"> <li><a href="">Home</a></li> <li><a href=" ">Gallery</a></li> <li><a href=" ">Services</a></li> <li><a href=" " class="featured">Specials</a></li> </ul> </nav> </header> </body>
Example 1 – Output
Example 2 – Panel
<!doctype html> <head> <style> :root{ font-size: calc(0.5em + 1vw); } body{ font-family: Arial; } .panel{ font-size: 1em; padding: 1em; border: 1px solid red; border-radius: 0.5em; } .panel h2{ margin-top: 0; font-size:0.8em; font-weight: bold; text-transform: uppercase; } .panel.large{ font-size: 1.2em; } </style> </head> <body> <div class="panel"> <h2>CSC Computer Education</h2> <div class="body"> A full stack developer requires skills such as Front-end Languages and Frameworks(HTML,CSS, JavaScript, React), Backend Technologies and Frameworks (NodeJS, ExpressJS, Django, Flask), Database Management System (MySQL, MongoDB), Version Control, and Web Hosting Platforms. </div> </div> </body>
Example 2- Output
Example 3 – CSS Flex Property
<style> body { margin:0px; } #outer { display: flex; justify-content: center; align-items: center; height: 100vh; } #inner { background-color:gold; width:40vw; height:20vh; } h1{ text-align:center; } </style> <div id="outer"> <div id="inner"> <h1>CSC Computer Education</h1> </div> </div>
Example 3- Output
Example 4 – Form Tags
<!DOCTYPE html> <html> <head> <title>My Example</title> <style> .loginform form { max-width: 400px; margin: auto; background-color:tan: box-shadow: 0 10px 10px; { loginform form fieldset { border:0 none; margin: 0; padding: 20px;u } .loginform form legend, loginform form fieldset input, button { font-family: Arial; font-size:15px; margin-top:2px; margin-bottom:2px; } .loginform form legend { background-color: coral; border-top: 0 none; color: white; display: table-cell; padding: 10px 20px; width: auto; } </style> </head> <body> <div class="loginform"> <form> <legend>User Login</legend> <fieldset> <input placeholder="Username" type="text"> <input placeholder="Password" type="password"> <button type="submit">Log in</button> </fieldset> </form> </div> </body> </html>
Example 4 – Output
Example 5 – CSS Font Property
<!DOCTYPE html> <html> <head> <title>My Example</title> <style>. .gfont{ <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet"> font-family: 'Fredericka the Great', cursive; font-size: 3em; color:blue; } p { text-align:center; font-size: 2em; } body { background-color:gold; } </style> </head> <body> <p class="gfont">CSC Computer Education</p> <p>No.1 Computer Training Institute</p> <p>Affordable computer training, since 1986</p> </body> </html>
Example 5 – Output
Example 6 – Student Registration Form using Form Tags
<!doctype html> <title>Example</title> <style> body { margin:0px; } .myform { display: flex; flex-direction: column; background-color: beige; border-radius: 3px; padding: 1em; height:100vh; } .row { display: flex; justify-content: center; } .column { display: flex; flex-direction: column; padding: 1em; } .input-group { display: flex; } .input-group> label{ margin-right: 1em; padding: .5em 0; } .myform input, .myform select { flex: 6: padding: .5em; margin-bottom: 1em; } .myform button { padding: 1em; background: green; color: white; border: 0; } .myform fieldset { border: 0; } .gender > label, .skills > label { display: block; } </style> <form class="myform"> <div class="row"> <h1>Student Registration Form</h1> </div> <div class="row"> <div class="column"> <div class="input-group"> <label for="student_name">Name</label> <input id="student_name"> </div> <div class="input-group"> <label for="phone_number">Phone</label> <input type="tel" id="phone_number"> </div> <div class="input-group"> <label for="email_address">Email</label> <input type="email" id="email_address"> </div> <div class="input-group"> <label for="join_date">Date of Registration</label> <input type="datetime-local" id="join_date"> </div> <div class="input-group"> <label for="course">Course </label> <select id="Course" <option value="" selected="selected">Select One</option> <option value="DCA">Diploma in Computer Application</option> <option value="HDCA">Honours Diploma in Computer Application</option> <option value="HDFD">Honours Diploma in Full Stack Developer</option> </select> </div> <div class="input-group"> <label for="batch_timings">Batch Timings</label> <input type="text" id="batch_timings" list="timings"> <datalist id="timing"> <option value="9-11AM"> <option value="4-6PM"> <option value="6-8PM"> </datalist> </div> </div> <div class="column"> <fieldset class="gender"> <legend>Gender</legend> <label><input type="radio" name="gender" value="female"> Female</label> <label><input type="radio" name="gender" value="male"> Male </label> <label><input type="radio" name="gender" value="others"> Others </label> </fieldset> <fieldset class="skills"> <legend>Skills Known</legend> <label><input type="checkbox" value="basic"> MS-Office </label> <label><input type="checkbox" value="language"> Programming Languages </label> <label><input type="checkbox" value="accouting"> Tally</label> </fieldset> </div> </div> <div class="row"> <button>Register Now</button> </div>
Example 6 – Output
Example 7 – CSS Grid Properties
<!doctype html> <style> body { grid-template-rows: 80px 1fr 70px; grid-template-columns: 1fr 20% 15%; grid-row-gap: 10px; grid-column-gap: 10px; height: 100vh; margin: 0; } header, footer, article, nav, div { padding: 1.2em; background: gold; } #myhead { grid-area: header; } #myfoot { grid-area: footer; } #mainArticle { grid-area: article; } #mainNav { grid-area: nav; } #siteAds { grid-area: ads; } </style> <body> <header id="myhead">Header</header> <article id="mainArticle">Article</article> <nav id="mainNav">Nav</nav> <div id="siteAds">Ads</div> <footer id="myfoot">Footer</footer> </body>
Example 7 – Output
Example 8
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titile>Document</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit"> <link rek="stylesheet" href="https://fonts.googleapis.com/css?family=Belanosima"> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ font-family: Georgia, "Times New Roman", Times, serif; color: white; background-color: gold; } .logo img{ width: 70px; height: 70px; border-radius: 41px; outline: 4px solid blue; } nav{ diaplay: flex; justify-content: space-between; padding: 1em 3em; align-items: center; } .items{ display: flex; align-items: center; gap: 30px; } .items a:link{ text-decoration: none; color: white: bold; } .items a:hover{ color:red; } .active{ color: red; } .shortinfo{ color: red; font-size: 1em; font-style: italic; } .heading{ font-size: 3em; margin-bottom: 0.3em; } .subheading{ font-size: 1.2em; text-align: justify; color:darkblue; font-family: Kanit; } .users{ display: flex; align-items: center; margin: 1em 0px; } .aluminis{ padding:2vw; background: #ffffff; margin:1vh; } .aluminis p { font-family: belanosima; color: deepskyblue; line-height: 2em; } buton{ padding: 1vh; width: 10vw; background-color:deepskyblue; } .other{ padding:2vh; } .container{ width: 90vw; margin: 2em auto; padding:0px 2em; } .row{ justify-content: center; align-items: center; } </style> </head> <body> <header> <nav> <div class="items"> <a href="#" class="active">Home</a> <a href="#">Services</a> <a href="#">Gallery</a> <a href="#">Support</a> <a href="#">Contact</a> </div> <div class="other"> <button>Log in</button> </div> </nav> </header> <section> <div class="container"> <div class="row"> <p class="shotinfo">#India's MOST Premium Training Institute</p> <h2 class="heading">CSC Computer Education</h2> <p class="subheading">CSC, a 37 year old Training Institute with over 500 Centers in South India and 13 centers in Sri Lanka. CSC known for its quality computer education and recognised as a legend in providing IT training From small infrastructure, we have grown to cater updated technologies continuously with unmatched quality Computer Education at affordable cost. Our Services to endure all categories of people with any background. The curriculum have been designed by the ISO 9001:2015 committee with meticulous care, taking valuable inputs from Industries and Academia, which helps the students to deliver the best.</p> <div class="aluminis"> <p>Trained over 40 Lakhs Students</p> <p>ISO Certified Institution</p> <p>Well Structured Course Materials</p> <p>Project based Training</p> </div> <button class="readmore">Read More</button> </div> </section> </body> </html>
Example 8 – Output