CSS

on







CSS-CascadingStyle Sheet
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. 

CSS Syntax


 

Three Ways to Insert CSS
  1. External style sheet
  2. Internal style sheet
  3. Inline style


-External style sheet
         Create the Style Sheet and Link to the Style Sheet from the HTML   Documents.

-Internal style sheet
          Internal styles are defined within the <style> element, inside  the <head> section of an HTML page.

 -Inline style
          CSS styles that are applied directly in the page's HTML  and every tags.

Example:-01

<html>
<head>
<style>
input[type=text],select {border-radius:10px; padding:12px;
width:100%;
margin:1px solid red;background-color: dodgerblue}
input[type=submit]:hover
{background-color: red;}
input[type=submit]{width:100%;padding:10px;}
div {border-radius: 5px;
background-color: yellow;
padding: 20px;}
</style>
</head>
<body>
<div>
<form>
<lable for="fname"> First Name </lable>
<input type="text" id="fname"placeholoder="First Name...."> <br>
<lable for="lname">Last Name</lable>
<input type="text" id ="lname" placeholoder="Last Name..">
<lable for ="country">country</label>
<select id="country" name="country">
<option value="srilanka">srilanka</option>
<option value="as">as</option>
<option value="us">us</option>
<option value="in">in</option>
</select>
<br><br>
<input type="submit" value="submit">
</form>
</div>
</body>
</html>


Example:-02
 <html>
<head>
<style>
ul.a {
    list-style-type: circle;
}
ul.b {
    list-style-type: square;
}
ol.c {
    list-style-type: upper-roman;
}
ol.d {
    list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
  <li>Mango</li>
  <li>Banana</li>
  <li>Pineapple</li>
</ul>
<ul class="b">
  <li>kala</li>
  <li>Mala</li>
  <li>Ravi</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
  <li>Mango</li>
  <li>Banana</li>
  <li>Pineapple</li>
</ol>
<ol class="d">
  <li>kala</li>
  <li>Mala</li>
  <li>Ravi</li>
</ol>
</body>
</html>


 Example:-03
 <html>
<head></head>
<style>
table, th, td {
    border: 1px solid black;
    width:50%;
    padding:20px;
  }
h1{border:15px dashed black;padding: 75px}
p{background-color:red;
  margin: 100px}
</style>
<body>
<h1> hey uki</h1>
<p align="center"> whats up</p>
<table>
  <tr>
    <th>Name</th>
    <th>Age </th>
    <th>Index.No</th>
  </tr>
<tr>
  <td align="center">Shanu</td>
  <td align="center">21</td>
  <td align="center">Ukistu05</td>
</tr>
</body>
</html>



If you want any CSS details, use this website:  
 https://www.w3schools.com/css/default.asp

Comments

Post a Comment