CSS

 CSS stands for Cascading Style Sheets
 CSS defines how HTML elements are to be
displayed
 Styles were added to HTML 5 to solve a
problem
 CSS saves a lot of work
 External Style Sheets are stored in CSS files
 CSS1 Version
◦ Provides margin, border, padding and positioning
of elements.
◦ Provides different text attributes such as spacing
between words, letters and lines of text.
◦ Provides font properties such as emphasis.
◦ Provides alignment of text, image and other
elements.
◦ Provides color to text.
◦ Provides background to elements.
 CSS2 Version
◦ Provides absolute, relative and fixed positioning of
elements and z-index.
◦ Provides styles for different media types such as
screen, TV and print.
◦ Supports aural style sheets that are used by visually
impaired persons to access the web.
◦ Provides font properties, such as shadows.
◦ Supports bidirectional text, which represents a text
that can be displayed in both right-to-left (RTL)
and left-to-right(LTR) directions.
 CSS3 Version
◦ Supports more colors such as Red, Green, Blue, Alpha
(RGBA) and Hue Saturation Lightness (HSL)
◦ Supports border image through border-image and
border-corner-image properties.
◦ Provides rounded corners for any box using border-
radius and background position.
◦ Provides the box-shadow property to add shadow
effect to the elements.
◦ Allows multiple backgrounds on a web page.
◦ Allows multi-column text without using a table.
◦ Displays shadow with the text.
◦ Provides opacity to set the transparency of box,
images or text.
◦ Provides CSS selectors
◦ Supports RGBA colors
◦ Provides custom fonts
◦ Provides attribute selectors.
 HSL takes three values:
 Hue is a degree on the color wheel; 0 (or 360)
is red, 120 is green, 240 is blue. Numbers in

between reflect different shades.
 Saturation is a percentage value; 100% is the
full colour.
 Lightness is also a percentage; 0% is dark
(black), 100% is light (white), and 50% is the

average.
 A CSS rule set consists of a selector and a
declaration block:
The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated
by semicolons.
Each declaration includes a property name and a value, separated
by a colon.
<html>
<head>
<style type="text/css">
h1 {
color:red;
text-align:center;
}
p{
color:black;
text-align:left;
font-size:18px;
font-weight:bold;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is sample paragraph.This is Styled paragraph using CSS.</p>
</body>
</html>
 Comments are used to explain your code, and
may help you when you edit the source code at a
later date. Comments are ignored by browsers.
 A CSS comment starts with /* and ends with */.
 Example
 p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
 Colors in CSS can be specified by the
following methods:
 Hexadecimal colors
 RGB colors
 RGBA colors
 HSL colors
 HSLA colors
 Hexadecimal color values are supported in all
major browsers.
 A hexadecimal color is specified with:
#RRGGBB, where the RR (red), GG (green) and

BB (blue) hexadecimal integers specify the
components of the color. All values must be
between 0 and FF.
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #p1 {background-color:#ff0000;}
 #p2 {background-color:#00ff00;}
 #p3 {background-color:#0000ff;}
 #p4 {background-color:#ffff00;}
 #p5 {background-color:#ff00ff;}
 </style>
 </head>
 <body>
 <p>HEX colors:</p>
 <p id="p1">Red</p>
 <p id="p2">Green</p>
 <p id="p3">Blue</p>
 <p id="p4">Yellow</p>
 <p id="p5">Cerise</p>
 </body>
 </html>
 An RGB color value is specified with: rgb(red,
green, blue). Each parameter (red, green, and
blue) defines the intensity of the color and
can be an integer between 0 and 255 or a
percentage value (from 0% to 100%).
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #p1 {background-color:rgb(255,0,0);}
 </style>
 </head>
 <body>
 <p>RGB colors:</p>
 <p id="p4">Grey</p>
 </body>
 </html>
 RGBA color values are an extension of RGB
color values with an alpha channel - which
specifies the opacity of the object.
 An RGBA color value is specified with:
rgba(red, green, blue, alpha). The alpha

parameter is a number between 0.0 (fully
transparent) and 1.0 (fully opaque).
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #p1 {background-color:rgba(255,0,0,0.3);}
 </style>
 </head>
 <body>
 <p>RGB colors with opacity:</p>
 <p id="p4">Grey</p>
 </body>
 </html>
 HSL stands for hue, saturation, and lightness -
and represents a cylindrical-coordinate
representation of colors.
 An HSL color value is specified with: hsl(hue,
saturation, lightness).
 Hue is a degree on the color wheel (from 0 to
360) - 0 (or 360) is red, 120 is green, 240 is

blue. Saturation is a percentage value; 0%
means a shade of gray and 100% is the full
color. Lightness is also a percentage; 0% is
black, 100% is white.
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #p1 {background-color:hsl(120,100%,50%);}
 </style>
 </head>
 <body>
 <p>HSL colors:</p>
 <p id="p2">Light green</p>
 <p id="p3">Dark green</p>
 <p id="p4">Pastel green</p>
 <p id="p5">Violet</p>
 <p id="p6">Pastel violet</p>
 </body>
 </html>
 HSLA color values are an extension of HSL
color values with an alpha channel - which
specifies the opacity of the object.
 An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha), where

the alpha parameter defines the opacity. The
alpha parameter is a number between 0.0
(fully transparent) and 1.0 (fully opaque).
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #p1 {background-color:hsla(120,100%,50%,0.3);}
 </style>
 </head>
 <body>
 <p>HSL colors with opacity:</p>
 <p id="p2">Light green</p>
 <p id="p3">Dark green</p>
 <p id="p4">Pastel green</p>
 <p id="p5">Violet</p>
 <p id="p6">Pastel violet</p>
 </body>
 </html>
 External style sheet
 Internal style sheet
 Inline style
 Each page must include a reference to the
external style sheet file inside the <link>
element
 myStyle.css
 body {
background-color: lightblue;

}
h1 {
color: navy;
margin-left: 20px;
}
 <!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet"
type="text/css"
href="mystyle.css">
 </head>
 <body>
 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>
 </body>
 </html>
 Internal styles are defined within the <style>
element, inside the <head> section of an
HTML page
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-color: linen;
 }
 h1 {
 color: maroon;
 margin-left: 40px;
 }
 </style>
 </head>
 <body>
 </body>
 </html>
 An inline style may be used to apply a unique
style for a single element.
 To use inline styles, add the style attribute to
the relevant element.

 The style attribute can contain any CSS
property.
 <!DOCTYPE html>
 <html>
 <body style="background-
color:yellow;">
 <h1 style="color:blue;margin-
left:30px;">This is a
heading.</h1>
 </body>
 </html>
 The CSS background properties are used to
define the background effects for elements.
 CSS background properties:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-color: lightblue;
 }
 </style>
 </head>
 <body>
 <h1>Hello World!</h1>
 <p>This page has a light blue

background color!</p>
 </body>
 </html>
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 h1 {
 background-color: green;
 }
 div {
 background-color: lightblue;
 }
 p{
 background-color: yellow;
 }
 </style>
 </head>
 <body>
 <h1>CSS background-color example!</h1>

 <div>
 This is a text inside a div element.
 <p>This paragraph has its own background color.</p>
 We are still in the div element.
 </div>
 </body>
 </html>
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-image: url("paper.gif");
 }
 </style>
 </head>
 <body>
 <p>This page has an image as the background!

</p>
 </body>
 </html>
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-image:
url("gradient_bg.png");
 background-repeat: repeat-x;
 }
 </style>
 </head>
 <body>
 <p>Here, a backgound image is
repeated only horizontally!</p>
 </body>
 </html>
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-image: url("img_tree.png");
 background-repeat: no-repeat;
 }
 </style>
 </head>
 <body>
 <p>W3Schools background image
example.</p>
 <p>The background image is only showing
once, but it is disturbing the reader!</p>
 </body>
 </html>
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-position: right top;
 margin-right: 200px;
 }
 </style>
 </head>
 <body>
 <p>W3Schools background no-repeat, set
position example.</p>
 <p>Now the background image is only
shown once, and positioned away from the
text.</p>
 <p>In this example we have also added a
margin on the right side, so the
background image will never disturb the
text.</p>
 </body>
 </html>
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-position: right top;
 margin-right: 200px;
 background-attachment: fixed;
 }
 </style>
 </head>
 <body>
 <p>The background-image is fixed. Try to scroll down the page.</p>
 <p>If you do not see any scrollbars, try to resize the browser window.</p>
 </body>
 </html>
 CSS selectors allow you to select an element
to apply CSS style rules and manipulate HTML
elements.
 CSS selectors are used to "find" (or select)
HTML elements based on their id, class, type,

attribute, and more.
 The universal selector is an represented by
asterisk (*).
 When used , the universal selector tells the
CSS interpreter to apply the CSS rule to all

elements in the document.
 *{}
 *{
 margin: 0;
 padding: 0;
 }
 <html>
 <head>
 <style type="text/css">
 *{
 font-family: Arial, Helvetica, sans-serif;
 }
 </style>
 </head>
 <body>
 <h1>This is H1 Type Heading !!</h1>
 </body>
 </html>
 A type selector matches the name of a
document language element type. A type
selector matches every instance of the
element type in the document tree.
 The following rule matches all H1 elements in
the document tree:

 h1 { font-family: sans-serif }
 It allows you to apply CSS rules to the
elements that carry a class attribute whose
value matches with the class attributes
specified in the class selector.
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 .intro {
 }
 </style>
 </head>
 <body>
 <h1>Welcome to My Homepage</h1>
 <div class="intro">
 <p>My name is Donald.</p>
 <p>I live in Duckburg.</p>
 </div>
 <p>My best friend is Mickey.</p>
 </body>
 </html>
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 p.hometown {
 background: yellow;
 }
 </style>
 </head>
 <body>
 <p>My name is Donald.</p>

 <p class="hometown">I live in Ducksburg.</p>
 <p>My name is Dolly.</p>

 <p class="hometown">I also live in Ducksburg.</p>
 </body>
 </html>
 The id selector uses the id attribute of an
HTML element to select a specific element.
 An id should be unique within a page, so the
id selector is used if you want to select a

single, unique element.
 To select an element with a specific id, write a
hash (#) character, followed by the id of the

element.
 <!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>
 h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 h1, h2, p {
 color: red;
 }
 </style>
 </head>
 <body>
 <h2>Smaller heading!</h2>
 </body>
 </html>
 A child selector matches when an element is
the child of some element. A child selector is
made up of two or more selectors separated
by ">“
 he following rule sets the style of all P
elements that are children of BODY:

 body > P { font-family: Arial}
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div > p {
 }
 </style>
 </head>
 <body>
 <div>
 <p>Paragraph 1 in the div.</p>
 <span><p>Paragraph 3 in the div.</p></span> 
 </div>
 <p>Paragraph 4. Not in a div.</p>

 </body>
 </html>
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body > ol > li {color: silver;}
 </style>
 </head>
<body>
 <ol>
 <li>The text here is silver.</li>
 </ol>
 <div>
 <ul>
 <li>Look, a list (and this text is not silver, by the way):
 <ol>
 <li>The text here is
 <em>not</em> silver.</li>
 </ol>
 </li>
 </ul>
 </div>
 </body>
 </html>
 Descendant : Element having child ,
grandchild elements
 Descendant Selector : Style is applied to the
element based on the whether element have

sub element or not.
 <div class="wrapper" id="main"> <h2>Heading</h2>
 <p>Learning Programming is Fun !!!</p> <table>
 <caption>Programming and Creator</caption>
 <tbody>
 <tr>
 <th>C</th>
 <td>Dennis Ritchie</td>
 </tr>
 <tr>
 <th>Java</th>
 <td>James Gosling</td>
 </tr>
 </tbody>
 </table>
 <a href="http://www.c4learn.com">Home</a>
 </div>
 Suppose we have written following style –
 div.wrapper h2 {
 font-size: 18px;
 margin-top: 0;
 }
 then –
 Above style will be applied to element “H2”
type heading only if “H2” is child of “div”

element having class name “wrapper“.
 Suppose h2 is child of div element other than
“wrapper” then above style will not be applied

to that element.
 <div class="wrapper"> <h2>Sample Heading
H2</h2> </div>
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div p {
 }
 </style>
 </head>
 <body>
 <div>
 <span><p>Paragraph 3 in the div.</p></span>
 </div>

 </body>
 </html>
 The adjacent sibling selector selects all
elements that are the adjacent siblings of a
specified element.
 Sibling elements must have the same parent
element, and "adjacent" means "immediately

following".
 Example selects only those <p> elements
that are placed immediately after <div>

elements are closed.
 <head>
 <style>
 div + p {
 background-color: blue;
 }
 </style>
 </head>
 <body>
 <div>
 </div>

 <div>
 </div>
 </body>
 </html>
 The general sibling selector selects all
elements that are siblings of a specified
element.
 Example selects all <p> elements that are
siblings of <div> elements

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div ~ p {
 }
 </style>
 </head>
 <body>
 <div>
 </div>

 </body>
 </html>
 The [attribute] selector is used to select
elements with a specified attribute.
 Example selects all <a> elements with a
target attribute
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 a[target] {
 }
 </style>
 </head>
 <body>
 <p>The links with a target attribute gets a yellow background:</p>
 <a href="http://www.w3schools.com">w3schools.com</a>
 <a href="http://www.disney.com" target="_blank">disney.com</a>
 <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
 <p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must

be declared.</p>
 </body>
 </html>
 The [attribute=value] selector is used to
select elements with a specified attribute and
value.
 Example selects all <a> elements with a
target="_blank" attribute
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 a[target=_blank] {
 }
 </style>
 </head>
 <body>
 <p>The link with target="_blank" gets a yellow background:</p>
 <a href="http://www.w3schools.com">w3schools.com</a>
 <a href="http://www.disney.com" target="_blank">disney.com</a>
 <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
 <p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must

be declared.</p>
 </body>
 </html>
 The [attribute~=value] selector is used to
select elements with an attribute value
containing a specified word.
 Example selects all elements with a title
attribute that contains a space-separated list

of words, one of which is "flower"
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 [title~=flower] {
 border: 5px solid yellow;
 }
 </style>
 </head>
 <body>
 <p>All images with the title attribute containing the word "flower" get a yellow
border.</p>
 <img src="klematis.jpg" title="klematis flower" width="150" height="113">

 <img src="img_flwr.gif" title="flower" width="224" height="162">
 <img src="img_tree.gif" title="tree" width="200" height="358">
 <p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a

DOCTYPE must be declared.</p>
 </body>
 </html>
 The [attribute|=value] selector is used to
select elements with the specified attribute
starting with the specified value.
 The following example selects all elements
with a class attribute value that begins with

"top":
 Note: The value has to be a whole word,
either alone, like class="top", or followed by a

hyphen( - ), like class="top-text"!
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 [class|=top] {
 }
 </style>
 </head>
 <body>
 <h1 class="top-header">Welcome</h1>
 <p class="top-text">Hello world!</p>
 <p class="topcontent">Are you learning CSS?</p>
 <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier,

must be declared.</p>
 </body>
 </html>
 The [attribute^=value] selector is used to
select elements whose attribute value begins
with a specified value.
with a class attribute value that begins with

"top"
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 [class^="top"] {
 }
 </style>
 </head>
 <body>
 <h1 class="top-header">Welcome</h1>
 <p class="top-text">Hello world!</p>
 <p class="topcontent">Are you learning CSS?</p>
 <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a

DOCTYPE must be declared.</p>
 </body>
 </html>
 The [attribute$=value] selector is used to
select elements whose attribute value ends
with a specified value.
with a class attribute value that ends with

"test"
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 [class$="test"] {
 }
 </style>
 </head>
 <body>
 <div class="first_test">The first div element.</div>

 <div class="second">The second div element.</div>
 <div class="my-test">The third div element.</div>
 <p class="mytest">This is some text in a paragraph.</p>
 </body>
 </html>
 The [attribute*=value] selector is used to
select elements whose attribute value
contains a specified value.
with a class attribute value that contains "te"

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 [class*="te"] {
 }
 </style>
 </head>
 <body>
 <div class="first_test">The first div element.</div>

 <div class="second">The second div element.</div>
 <div class="my-test">The third div element.</div>
 <p class="mytest">This is some text in a paragraph.</p>
 </body>
 </html>
 <!DOCTYPE HTML>
 <head>
 <title> Transition </title>
 .item {
 color: #444;
 margin: 0 20px;
 height: 30px;
 line-height: 30px;
 position: absolute;
 width: 90px;
 height: 200px;
 opacity: 0.9;
 }
 .area .item {
 -webkit-transition: all 1s linear;
 }
 .area .item-1 {
 bottom: 20px;
 -webkit-transition-duration: 0.5s;
 }
 .area .item-2 {
 bottom: 140px;
 }
 .area .item-3 {
 bottom: 260px;
 }
 .area .item-4 {
 bottom: 380px;
 }
 .item:hover,
 .item:focus {
 color: white;

 width: 400px;

 opacity:0.6;
 }
 </style>
 </head>
 <body>
 <div class="area">
 <h1> Working with Transition</h1>
 <div class="item item-1">
 <img src="car1.jpg">
 <div>
 0.5 second
 </div>
 <br/>
 </div>
 <br/>

 <div>
 1.5 second
 </div>
 <br/>
 </div>
 <br/>

 <div>
 2.5 second
 </div>
 <br/>
 </div>
 <br/>
 <div>
 3.5 second
 </div>
 <br/>
 </div>
 <br/>
 </div>
 </body>
 </html>
 The transform property applies a 2D or 3D transformation to
an element. This property allows you to rotate, scale, move,
skew, etc., elements.
 transform property
 Default value: none
 Inherited: no
 Animatable: yes.
 Version: CSS3
 JavaScript syntax: object.style.transform="rotate(7deg)"
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div {
 width: 200px;
 height: 100px;
 /* Rotate div */
 -ms-transform: rotate(7deg); /* IE 9 */
 -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
 transform: rotate(7deg);
 }
 </style>
 </head>
 <body>
 <div>Hello</div>
 <br>
 <p><b>Note:</b> Internet Explorer 8 and earlier versions do not

support the transform property.</p>
 <p><b>Note:</b> Internet Explorer 9 supports an alternative, the

-ms-transform property. Newer versions of IE support the transform
property (do not need the ms prefix).</p>
 <p><b>Note:</b> Chrome, Safari and Opera supports an

alternative, the -webkit-transform property.</p>
 </body>
 </html>
 transform: none|transform-functions|initial|inherit;
 Property Values
Value Description
none Defines that there should be no
transformation
matrix(n,n,n,n,n,n) Defines a 2D transformation,
using a matrix of six values
matrix3d Defines a 3D transformation,
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) using a 4x4 matrix of 16 values
translate(x,y) Defines a 2D translation
translate3d(x,y,z) Defines a 3D translation
initial Sets this property to its default
value
inherit Inherits this property from its
parent element
Value Description
translateX(x) Defines a translation, using only
the value for the X-axis
translateY(y) Defines a translation, using only
the value for the Y-axis
scale(x,y) Defines a 2D scale transformation
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a scale transformation by
giving a value for the X-axis
scaleY(y) Defines a scale transformation by
giving a value for the Y-axis
rotate(angle) Defines a 2D rotation, the angle is
specified in the parameter
 Some CSS properties are animatable, meaning
that they can be used in animations and
transitions.
 Animatable properties can change gradually
from one value to another, like size,

numbers, percentage and color.
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #myDIV {
 width: 300px;
 height: 200px;
 background: red;
 -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
 animation: mymove 5s infinite;
 }
 /* Chrome, Safari, Opera */

 @-webkit-keyframes mymove {
 from {background-color: red;}
 to {background-color: blue;}
 }
 /* Standard syntax */
 @keyframes mymove {
 from {background-color: red;}
 to {background-color: blue;}
 }
 </style>
 </head>
 <body>
 <p>Gradually change the background-color from red, to blue:<p>

 <div id="myDIV"></div>
 <p>The background-position property is <em>animatable</em> in

CSS.</p>
 <p><strong>Note:</strong> CSS Animations do not work in Internet
Explorer 9 and earlier versions.</p>
 </body>
 </html>
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #myDIV {
 margin: auto;
 border: 1px solid black;
 width: 200px;
 height: 100px;
 background-color: coral;
 color: white;
 -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera
*/
 animation: mymove 5s infinite;
 }
 /* Chrome, Safari, Opera */
 @-webkit-keyframes mymove {
 50% {-webkit-transform: rotate(180deg);}
 }
 /* Standard syntax */
 @keyframes mymove {
 50% {transform: rotate(180deg);}
 }
 </style>
 </head>
 <body>
 <p>Gradually rotate the DIV element 180 degrees, and back:<p>

 <div id="myDIV">
 <h1>myDIV</h1>
 </div>
 <p>The transform property is <em>animatable</em> in CSS.</p>
 <p><strong>Note:</strong> CSS Animations do not work in
Internet Explorer 9 and earlier versions.</p>
 </body>
 </html>
 <!DOCTYPE HTML>
 <head>
 <title> Rotating Image </title>
 img {
 width: 300px;
 height: 200px;
 }
 #transform {
 position: relative;
 margin: 10px auto;
 width: 300px;
 height: 200px;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: all 1.0s linear;
 }
 #transform:hover {
 -webkit-transform: rotateZ(60deg);
 -webkit-box-shadow: -5px 5px 5px #aaa;
 }
 </style>
 </head>
 <body>
 <h1> Working with Transformation</h1>

 <div id="transform">
 </div>
 <div id="transform">
 </div>
 </body>
 </html>
 The attribute selectors can be useful for
styling forms without class or ID
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 input[type=text] {
 width: 150px;
 display: block;
 margin-bottom: 10px;
 }
 input[type=button] {
 width: 120px;
 display: block;
 }
 </style>
 </head>
 <body>
 <form name="input" action="" method="get">
 Firstname:<input type="text" name="Name" value="Peter" size="20">
 Lastname:<input type="text" name="Name" value="Griffin" size="20">
 <input type="button" value="Example Button">
 </form>
 </body>
 </html>
 External style sheet
 Internal style sheet
 Inline style
 An external style sheet is ideal when the style
is applied to many pages. With an external
style sheet, you can change the look of an
entire Web site by changing just one file.
 Each page must include a link to the style
sheet with the <link> tag. The <link> tag
goes inside the head section:
 <head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
 body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
 An internal style sheet should be used when a
single document has a unique style. You
define internal styles in the head section of
an HTML page, inside the <style> tag.
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-color: linen;
 }
 h1 {
 color: maroon;
 }
 </style>
 </head>
 <body>
 </body>
 </html>
 To use inline styles, add the style attribute to
the relevant tag. The style attribute can
contain any CSS property. The example shows
how to change the color and the left margin
of a h1 element:
left:30px;">This is a heading.</h1>
 <!DOCTYPE html>
 <html>
 <body>
left:30px;">This is a heading.</h1>
 </body>
 </html>
 If some properties have been set for the same
selector in different style sheets, the values will
be inherited from the more specific style sheet.
 Example assume that an external style sheet
 h1 {
color: navy;
margin-left: 20px;
}
 internal style sheet
 h1 {
color: orange;
}
 <!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
 <style>
 h1 {
 color: orange;
 }
 </style>
 </head>
 <body>
 <p>The style of this document is a combination of an external stylesheet, and
internal style</p>
 </body>
 </html>
 CSS background properties are used to define the
background effects of an element.
 CSS properties used for background effects:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 Background Color
 The background-color property specifies the
background color of an element.
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-color: #b0c4de;
 }
 </style>
 </head>
 <body>
 <h1>My CSS web page!</h1>

 <p>Hello world! This is a W3Schools.com example.</p>
 </body>
 </html>
 With CSS, a color is most often specified by:
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
 a color name - like "red"
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 h1 {
 background-color: #6495ed;
 }
 p{
 background-color: #e0ffff;
 }
 div {
 background-color: #b0c4de;
 }
 </style>
 </head>
 <body>
 <h1>CSS background-color example!</h1>
 <div>
 This is a text inside a div element.
 <p>This paragraph has its own background color.</p>
 We are still in the div element.
 </div>
 </body>
 </html>
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-image: url("paper.gif");
 }
 </style>
 </head>
 <body>
 </body>
 </html>
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-image: url("gradient_bg.png");
 }
 </style>
 </head>
 <body>
 </body>
 </html>
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-image: url("gradient_bg.png");
 background-repeat: repeat-x;
 }
 </style>
 </head>
 <body>
 </body>
 </html>

CSS

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS

Uploaded by

Copyright:

Available Formats

 CSS stands for Cascading Style Sheets

 CSS defines how HTML elements are to be

is red, 120 is green, 240 is blue. Numbers in

(black), 100% is light (white), and 50% is the

The selector points to the HTML element you want to style.

#RRGGBB, where the RR (red), GG (green) and

rgba(red, green, blue, alpha). The alpha

360) - 0 (or 360) is red, 120 is green, 240 is

hsla(hue, saturation, lightness, alpha), where

background-color: lightblue;

the relevant element.

 <p>This page has a light blue

 <h1>CSS background-color example!</h1>

 <p>This page has an image as the background!

HTML elements based on their id, class, type,

CSS interpreter to apply the CSS rule to all

the document tree:

 <p>My best friend is Mickey.</p>

 <p>My name is Donald.</p>

 <p>My name is Dolly.</p>

id selector is used if you want to select a

hash (#) character, followed by the id of the

 <p id="para1">Hello World!</p>

elements that are children of BODY:

 <p>Paragraph 4. Not in a div.</p>

element based on the whether element have

type heading only if “H2” is child of “div”

“wrapper” then above style will not be applied

 <p>Paragraph 4. Not in a div.</p>

element, and "adjacent" means "immediately

that are placed immediately after <div>

 <p>Paragraph 3. Not in a div.</p>

siblings of <div> elements

 <p>Paragraph 3. Not in a div.</p>

 <p>The links with a target attribute gets a yellow background:</p>

 <p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must

 <p>The link with target="_blank" gets a yellow background:</p>

 <p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must

attribute that contains a space-separated list

 <img src="klematis.jpg" title="klematis flower" width="150" height="113">

 <p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a

with a class attribute value that begins with

either alone, like class="top", or followed by a

 <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier,

with a class attribute value that begins with

 <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a

with a class attribute value that ends with

 <div class="first_test">The first div element.</div>

with a class attribute value that contains "te"

 <div class="first_test">The first div element.</div>

 <div class="item item-2">

 <div class="item item-3">

 <p><b>Note:</b> Internet Explorer 8 and earlier versions do not

 <p><b>Note:</b> Internet Explorer 9 supports an alternative, the

 <p><b>Note:</b> Chrome, Safari and Opera supports an

from one value to another, like size,

 /* Chrome, Safari, Opera */

 <p>Gradually change the background-color from red, to blue:<p>

 <p>The background-position property is <em>animatable</em> in

 <p>Gradually rotate the DIV element 180 degrees, and back:<p>

 <h1> Working with Transformation</h1>

 <h1>My CSS web page!</h1>

You might also like