CSS Cascading Style Sheets
css-cascading-style-sheets

CSS Cascading Style Sheets

What is CSS (Cascading Style Sheets)

Cascading Stylesheets — or CSS (Cascading Style Sheets) is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

CSS (Cascading Style Sheets)

  • CSS is a language that describes the style of an HTML document.
  • CSS describes how HTML elements should be displayed.
  • This tutorial will teach you CSS from basic to advanced.

CSS (Cascading Style Sheets) Code 

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

    preview

My First CSS Example

This is a paragraph.

 

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

“mystyle.css”

body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;

CSS Animations

CSS allows animation of HTML elements without using JavaScript or Flash!

CSS

In this chapter you will learn about the following properties:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>

</body>
</html>

 

Leave a Reply