WT CSS

CSS
What is CSS ?
CSS (Cascading Style Sheets) is used to style and layout web pages — for example,
to alter the font, color, size, and spacing of your content, split it into multiple
columns, or add animations and other decorative features.
CSS is the language we use to style an HTML document.CSS describes how HTML elements
should be displayed.

CSS SIMPLE 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>

CSS SELECTORS
The CSS element Selector
The element selector selects HTML elements based on the element name.
Example:
Here, all <p> elements on the page will be center-aligned, with a redtext color:
p {
text-align: center;color: red;
}
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.
The id of an element is unique within a page, so the id selector is used toselect
one unique element!
To select an element with a specific id, write a hash (#) character, followedby the
id of the element.

CSS SELECTORS
Example:
<!DOCTYPE html>
<html>
<head>
<style> #para1 {text-align:
center; color: red; }
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

CSS BOX MODEL
In CSS, the term "box model" is used when talking about design and layout.The CSS box
model is essentially a box that wraps around every HTML element. It consists of: margins,
borders, padding, and the actual content. The image below illustrates the box model
Explanation of the different parts:
• Content - The content of the box, where text and
images appear
• Padding - Clears an area around the
content. The padding istransparent
• Border - A border that goes around the padding and
content
• Margin - Clears an area outside the
border. The margin istransparent.

CSS BACKGROUND PROPERTIES
Background Properties:
The CSS background properties are used to add background effects forelements.
CSS background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

CSS BACKGROUND PROPERTIES
The background color of a page is set likethis: Example body {
background-color: lightblue;
}
Otherelementsh1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow; }

CSS ANIMATIONS
CSS allows animation of HTML elements without using JavaScript or Flash!The
properties are
• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

CSS ANIMATIONS
Example
/* The animation code */ @keyframes example { from
{background-color:red;} to {background-color: yellow;}
}
/* The element to apply the animationto */ div
{ width: 100px; height:100px;
background-color: red;animation-name: example;
animation-duration: 4s;
}

CSS ANIMATIONS
The animation-delay property specifies a delay for the start of ananimation.
The following example has a 2 seconds delay before startingthe animation:
Example
div {width: 100px;
height:100px;
position:relative;
background-color: red;
animation-name:example;
animation-duration:4s; animation-delay:2s;}

WT CSS

More Related Content

Similar to WT CSS (20)

Recently uploaded (20)

WT CSS