css

  • CSS was invented by Håkon Wium Lie on October 10, 1994 and maintained through a group of people within the W3C called the CSS Working Group.
  • cascading style sheets(css) is language which is used for formatting a document written in markup language.
  • it handles the look and feel of the webpage.
  • using cascading style sheet we can control the font color,font style,paragraph spacing,etc.
  • using cascading style sheet we can also control the variations of display size of web pages in various devices and screen sizes.

Advantages:

  • Platform independant:

    It is platform independant and supports all latest browsers.

  • Faster page load time:

Using CSS increases the speed of the page load time,thus by reducing the size of the code.

  • Time saving:

We can reuse the code anywhere in multiple html pages,so it saves the time.

  • Has more styles:

Has many styles when compared to the html tags.

Formating with CSS

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
color:yellow;
text-align: center;
font-family: “monotype corsiva”;
}
p
{
color: blue;
text-align: center;
}
body
{
background-color: orange;
}
</style>
</head>
<body>
<h1>This is KPRBLOG</h1>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

css

Explanation

  • Using this code we can give specific color to h1 tag.
  • Specific color to body background.
  • In this example,we have specified the font style for heading1 as “monotype corsiva”.
  • In this we have also gave specific color to the paragraph <p> tag.
  • From this example we have learnt how to modify the background color,font style and color in specific tags.

Lists in CSS

<!DOCTYPE html>
<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>CSE</li>
<li>ECE</li>
<li>EEE</li>
</ul>
<ul class=”b“>
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
</ul>
<p>Example of ordered lists:</p>
<ol class=”c“>
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
</ol>
<ol class=”d“>
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
</ol>
</body>
</html>
css
  • In this example we can learn about lists.
  • two types of lists are ordered list and unordered list.
  • unordered lists are represented by small dots,squares,etc.
  • ordered lists are represented by roman numerals,etc

Tables in CSS

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
table, td, th {
border: 1px solid green;
height: 50px;
}
th {
background-color: red;
color: white;
}
td {
padding: 10px;
}
td
{
background-color: orange;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>E-mail id</th>
</tr>
<tr>
<td>Dinesh</td>
<td>Kumar</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Gowdham</td>
<td>Subramaniam</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Aslam</td>
<td>Saah</td>
<td>[email protected]</td>
</tr>
</table>
</body>
</html>
tables-css    
  • In this example program we have used table attributes.
  • border collapse is used to display a single border table.
  • width and height of the table is given by Width,height properties.
  • Table padding is used to control the space between the table border and text in the table.
  • Table color specifies the color of the table border,background color and the font color.

Box Model in CSS

  • To set the width and height of the element in all the browsers correctly,we need  to know about box model.
  • All html elements can be considered as boxes.

css

  • It consists of margin,border,padding and content.
  • Content: In content the text and images will be present.
  • Padding: It clears the area around the content.It is transparent.
  • Border: It is an outline around the content and the padding.
  • Margin: It clears an area outside the border,which is also transparent.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
</style>
</head>
<body>
<pre>
<h1>ADMINS – KPRBLOG<h1>
<div>Gowdham Subramniam
Dinesh Kumar VM
Aslam saah</div>
</pre>
</body>
</html>

css

  • In this example program we have use content,padding,border and margin.
  • padding clears the area around the content.
  • margin clears the area outside the border which is transparent.
  • box model is used to display the contents properly aligned in all web browsers.

Hiding an element in CSS

  • Hiding can be done using the display property.
  • The element will be hidden.
  • The page will be displayed as if the element were not in that page.
  • Visibility:hidden also hides the element in the page. 
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>This is a visible heading: www.kprblog.in</h1>
<h1 class=”hidden“>This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>
</body>
</html>

 

css1

 

  •  In this program,visibility hidden is used to hide the element.
  • The hidden heading will occupy the space in the web page.
  • The hidden space will be displayed as the blank white space.
  • display:none can also be used to hide the content.

position in CSS

  • position property is used to specify the type of positioning property used for the elements.
  • the types of positioning are static,relative,fixed and absolute.
  • static: It is not affected by the top,bottom,right and left properties.
  • relative: It is positioned relative to its normal positioned,other content will not be adjusted to fit into the gap left by this element.
  • fixed: It is positioned relative to the viewport, that is if even the page is scrolled the image remains in the same place.
  • absolute: It is positioned relative to nearest position ancestor, that is the image is moved along when the page is scrolled.
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}
</style>
</head>
<pre>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to
the nearest positioned ancestor (instead of positioned relative to
the viewport, like fixed):</p>
<div class=”relative“>This div element has position: relative;
www.kprblog.in
<div class=”absolute“>This div element has
position: absolute;
www.kprblog.in</div>
</div>
</body>
</pre>
</html>

position

  • In this example relative and absolute is positioning is used.
  • relative:  It is positioned relative to its normal positioned,other content will not be adjusted to fit into the gap left by this element.
  • absolute: It is positioned relative to nearest position ancestor.

For more click here Tricksout..