Scribd
Upload
30 views

CSS Stands For Cascading Style Sheets

This document provides an overview of CSS (Cascading Style Sheets) and demonstrates how to style HTML elements using various CSS properties. It covers topics like styling text, backgrounds, borders, positioning, transitions/animations, and print styles. Code examples are included to show how to apply CSS styles to HTML elements using selectors like id, class, element, and grouping selectors.

Uploaded by

manigandan
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
30 views

CSS Stands For Cascading Style Sheets

This document provides an overview of CSS (Cascading Style Sheets) and demonstrates how to style HTML elements using various CSS properties. It covers topics like styling text, backgrounds, borders, positioning, transitions/animations, and print styles. Code examples are included to show how to apply CSS styles to HTML elements using selectors like id, class, element, and grouping selectors.

Uploaded by

manigandan
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 26

CSS stands for Cascading Style Sheets

<head>
<style>

body

background-color: lightblue;
color=>property
lightblue=>value
}
h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}

</style>
</head>
id sector
------------

#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>
class sector
--------------------
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>


<p class="center">Red and center-aligned paragraph.</p>
p.center {
text-align: center;
color: red;
}

p.large {
font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>


<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large
font-size.</p>

grouping
-------------
h1, h2, p {
text-align: center;
color: red;
}
</style>

* {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
<h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>

<p>This paragraph is not affected.</p>

h2,p
{
background-color: #b0d4de;
}

text-shadow: 3px 2px red;


body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
background-position: center;
}

background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;

background: blue url("img_tree.png") no-repeat right top;

border

border-style: none;

border-style: dotted;

border-style: dashed;

border-style: solid;

border-style: double;

border-style: groove;
border-style: ridge;

border-style: inset;

border-style: outset;

border-style: hidden;

border-style: solid;
border-width: 5px;

border-color: red;

width: 200px;

/* This is a single-line comment */


img
{
float: right;
}

font-size: 100%;
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }

h2 { font-family: serif; }
xx-small used to display the extremely small text size.
x-small used to display the extra small text size.
small used to display small text size.
medium used to display medium text size.
large used to display large text size.
x-large used to display extra large text size.
xx-large used to display extremely large text size.
smaller used to display comparatively smaller text size.
larger used to display comparatively larger text size.
size in pixels or % used to set value in percentage or in pixels.

font-style: italic;

h3 { font-style: oblique; }
h4 { font-style: normal; }
font-variant: small-caps; }
h3 { font-variant: normal; }

"font-weight:bold;
<p style="font-weight:bolder;"
<p style="font-weight:lighter;"
<p style="font-weight:100;"
h3.big {
line-height: 200%;
}

margin-top: 50px;
margin-right: 100px;
margin-bottom: 50px;
margin-left: 100px;

margin: 50px 100px 150px 200px;


opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
0.1 to 1.0.
0 to 100

p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>

<p class="padding">This is a paragraph with specified paddings.</p>


position
------------
fixed,

<style>
p.pos_fixed {
position: sticky;
top: 50px;
right: 5px;
color: blue;
}

<p class="pos_fixed">This is the fix positioned text.</p>

position: relative;
left: 30px;
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
<p><img src="good-morning.jpg" class="top" /> This is an image </p>
<p><img src="good-morning.jpg" class="bottom"/> This is an image</p>

outline: 3px solid red;

border: 10px solid transparent;


padding: 15px;
border-image: url(border.png) 30 round;
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;

background-image: url(img_flwr.gif), url(paper.gif);


background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;

backgroud-clip:padding-box;

transform: translate(50px, 100px);

transform: rotate(20deg);

transform: rotate (-20deg);

transform: skewX(20deg); /* Standard syntax */

transform: skew(20deg, 10deg);

transform: rotateX(150deg);
transform: rotateY(130deg);
transform: rotateZ(90deg);
-webkit-transition:width 2s

-webkit-transition:width 2s height 2s

div {
width: 100px;
height: 100px;
background-color: red;
position:relative;

-webkit-animation-name: example;
-webkit-animation-duration: 4s;
}
@-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

@-webkit-keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}

animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
animation-fill-mode: backwards;
animation-duration: 4s;
animation-iteration-count: infinite;

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

animation-iteration-count: 3;
animation-direction: reverse;
-webkit-animation-direction: alternate;
-webkit-animation-direction: alternate-reverse;

img style

img {
border-radius: 8px;
}

img {
border-radius: 50%;
}
two image fit
style="float:left;width:50%;height:100%;

hover tag
-------------

.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,255),0 17px 50px 0 rgba(0,0,0,0.19);
}

<button class="button button1">Shadow Button</button>


<button class="button button2">Shadow on Hover</button>
column print
-----------------

-webkit-column-count: 3; /* Chrome, Safari, Opera */


-moz-column-count: 3; /* Firefox */

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */


-moz-column-gap: 40px; /*

-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */


-moz-column-rule-width: 1px;

-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */


-moz-column-rule-style: solid;

column-rule-color: lightblue;

-webkit-column-span: all;
Navigation Bars

A navigation bar is basically a list of links, so using the <ul> and <li> elements
makes perfect sense:

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>

</ul>

you can style the <a> elements inside the list

li a
{
display: block;
width: 60px;
background-color: #dddddd;
}

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
</ul>

display: block; - Displaying the links as block elements makes the whole link area
clickable

display: inline; - By default, <li> elements are block elements. Here, we remove
the line breaks before and after each list item, to display them on one line

border-right:1px solid green;

You might also like