CSS Properties in Tamil

---

CSS and CSS3 Properties Reference Guide

Property	Valid Values	Example
Font Properties
font-family	font name or type	font-family: Arial;
font-variant	normal | small-caps	font-variant:small-caps;
font-style	normal | italic	font-style:italic;
font-weight	normal | bold	font-weight:bold;
font-size	xx-large | x-large | large | medium | small | x-small | xx-small] | larger | smaller | percentage | length	font-size:12pt;
font	font-style | font-variant | font- weight | font-size | line-height | font-family	font: bold 12pt Arial;
Text Properties
color	color	color: red;
direction	ltr | rtl	direction: ltr;
line-height	normal | number | length | percentage	line-height:15pt;
letter-spacing	normal | length	letter-spacing:5pt;
word-spacing	normal | length	word-spacing:5pt;
vertical-align	sub | super	vertical-align:sub;
white-space	normal | nowrap | pre | pre-line | pre-wrap	white-space: nowrap;
text-transform	capitalize | uppercase | lowercase | none	text-transform:lowercase;
text-align	left | right | center | justify	text-align:center;
text-indent	length | percentage	text-indent:25px;
text-decoration	none | underline | overline | line-through	text-decoration:underline overline;
text-decoration-style	none | dashed | dotted | double | wavy	text-decoration-style:wavy;
text-decoration-color	none | color	text-decoration-color:red;
Color and Background Properties
background-color	color | transparent	background-color: yellow;
background-image	url | none	background-image:url(house.jpg);
background-position	top         -- left | center | right center   -- left | center | right bottom -- left | center | right	background-position: top center;
background-repeat	no-repeat | repeat-x | repeat-y | space | round	background-repeat: no-repeat;
background-size	auto | contain | cover | 50% | length (70px)	background-size: cover;
background-blend-mode	normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity	background-blend-mode: overlay;
background-clip	border-box | padding-box | content-box	background-clip: padding-box;
background-origin	border-box | padding-box | content-box	background-origin: border-box;
background	transparent | color | url | repeat | scroll | position	background: silver url(house.jpg) repeat-y;
Gradient colors ( background property values )
linear-gradient	degree | color | percentage | top | left | bottom | right	background: linear-gradient(45deg , blue , red);
radial-gradient	degree | color | percentage | ellipse at top | closest-side | closest-corner | farthest-side | farthest-corner	background: radial-gradient(circle at center , blue 0 , purple , red 100%);
conic-gradient	degree | color | percentage | top | left | bottom | right | from | to	background: conic-gradient(red , orange , yellow , green , blue);
repeating-linear-gradient	degree | color | percentage | top | left | bottom | right	background: repeating-linear-gradient(to left top , purple , white 20px);
repeating-radial-gradient	degree | color | percentage | top | left | bottom | right | from | to	background: repeating-radial-gradient(farthest-corner at 25% 25% , yellow 0 , orange , red 45%);
repeating-conic-gradient	degree | color | percentage | top | left | bottom | right | from | to	background:repeating-conic-gradient(purple , #a6ffa6 , #2dbbff , #97ffff , #c4c4ff 50%);
List Properties
list-style-type	disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none	list-style-type:upper-alpha;
list-style-image	url | none	list-style-image:url(icFile.gif);
list-style-position	inside | outside	list-style-position:inside;
list-style	keyword | position | url	list-style: square outside url(icFolder.gif);
Table Properties
border-collapse	separate | collapse	border-collapse:collapse;
border-spacing	(left,right,top,bottom),length (10px),(20px 10px -- row wise left and right | top and bottom)	border-spacing: 20px;
table-layout	auto | fixed	table-layout: fixed;
caption-side	top | bottom	caption-side: bottom;
empty-cells	show | hide	empty-cells: hide;
Box Properties
height	length | auto	height:200px;
width	length | percentage | auto	width:80%;
max-height	length | auto	max-height:700px;
max-width	length | percentage | auto	width:70%;
min-height	length | auto	min-height:300px;
min-width	length | percentage | auto	min-width:50%;
margin-top	length | percentage | auto	margin-top:5px;
margin-right	length | percentage | auto	margin-right:5px;
margin-bottom	length | percentage | auto	margin-bottom:1em;
margin-left	length | percentage | auto	margin-left:5pt;
margin	length | percentage | auto{1,4}	margin: 10px 5px 10px 5px; (top, right, bottom, left) margin: 10px 5px 10px; (top, left and right, bottom) margin: 10px 5px; (top and bottom, left and right) margin: 10px; (All sides)
padding-top	length | percentage	padding-top:10%;
padding-right	length | percentage	padding-right:15px;
padding-bottom	length | percentage | auto	padding-bottom:1em;
padding-left	length | percentage | auto	padding-left:5pt;
padding	length | percentage | auto{1,4}	padding: 10px 5px 10px 5px; (top, right, bottom, left) padding: 10px 5px 10px; (top, left and right, bottom) padding: 10px 5px; (top and bottom, left and right) padding: 10px; (All sides)
overflow-x	visible | hidden | scroll | auto	overflow-x: hidden;
overflow-y	visible | hidden | scroll | auto.	overflow-y: scroll;
overflow	visible | hidden | scroll | auto.	overflow: auto;
box-sizing	border-box | content-box	box-sizing: content-box;
Border Properties
border-top-width	thin | medium | thick | length | length	border-top-width: 10px;
border-right-width	thin | medium | thick | length	border-right-width:medium;
border-bottom-width	thin | medium | thick | length	border-bottom-width:thick;
border-left-width	thin | medium | thick | length	border-left-width:15px;
border-width	thin | medium | thick | length {1,4}	border-width: 3px 5px 3px 5px;
border-top-color	color	border-top-color:purple;
border-right-color	color	border-right-color:whitesmoke;
border-bottom-color	color	border-bottom-color:black;
border-left-color	color	border-left-color:#C0C0C0;
border-color	color {1,4}	border-color: #ff000;
border-top-style	none | solid | double | groove | ridge | inset | outset	border-top-style:solid;
border-right-style	none | solid | double | groove | ridge | inset | outset	border-right-style:double;
border-bottom-style	none | solid | double | groove | ridge | inset | outset	border-bottom-style:groove;
border-left-style	none | solid | double | groove | ridge | inset | outset	border-left-style:none;
border-style	none | solid | double | groove | ridge | inset | outset	border-style:ridge;
border-top	border-width | border-style | border-color	border-top: medium outset red;
border-right	border-width | border-style | border-color	border-right: thick inset maroon;
border-bottom	border-width | border-style | border-color	border-bottom: 10px ridge Gray;
border-left	border-width | border-style | border-color	border-left: 1px groove red;
border	border-width | border-style | border-color	border: thin solid blue;
border-radius	top | right | bottom | left	border-radius: 25px; (The value applies to all four corners) border-radius: 15px 50px; (The value applies to top-left and bottom-right corners) border-radius: 15px 50px 40px; (The value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner) border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner)
Outline Properties
outline-width	thin | medium | thick | length {1,4}	outline-width: 7px;
outline-style	none | solid | double | groove | ridge | inset | outset	outline-style:double;
outline-color	color	outline-color:purple;
outline	width style color	outline:7px double #00d793;
Positioning Properties
position	absolute | relative | static	position:absolute;
top	length | percentage | auto	top:0px;
right	length | percentage | auto	right:10px;
bottom	length | percentage | auto	bottom:20px;
left	length | percentage | auto	left:0px;
clip	shape | auto	clip:rect(0px 200px 200px 0px);
visibility	visible | hidden | inherit	visibility:visible;
display	none | block | inline | inline-block | list-item	display:none;
float	none | left | right	float:none;
cursor	auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n- resize | se-resize | sw- resize | s-resize | w-resize | text | wait | help	cursor:hand;
clear	none | left | right | both	clear:left;
z-index	auto | integer	z-index:-1;
Pseudo Classes
active	using other properties	p:active { float:left;color:blue; }
hover	using other properties	p:hover { float:left;color:blue; }
link	using other properties	p:link { background:pink;color:blue; }
visited	using other properties	p:visited {color:blue; }
focus	using other properties	p:focus {color:orange; }
first-child	using other properties	ul li:first-child {border-top:2px solid purple; }
nth-child(2n)	using other properties	ol:nth-child(2n) li{background: purple; }
Pseudo-elements
first-line	using other properties	p::first-line { color:#8080ff}
first-letter	using other properties	p::first-letter { font-size:20px;}
before	using content property	p::before { content: url("img/logo.png"); }
after	using content property	p::after { content: url("img/logo2.png"); }
Media Types
all	Used for all media type devices.	@media all{ body { background: #e0e0e0; } }
screen	Used primarily for color computer screens.	@media screen{ body { background: #0Ed453; } }
print	Used for printers.	@media screen{ body { background: #0Ed453; } }
Printing Properties
page-break-before	auto | always | left | right	page-break-before:always;
page-break-after	auto | always | left | right	page-break-before:auto;
Attribute Selectors
input[type="text"]	using all other properties	input[type="text"] { color:red;}
Text Overflow
text-overflow	clip | ellipsis	text-overflow: clip;
word-wrap	normal | break-word | initial | inherit	word-wrap: break-word;
word-break	normal | break-all | keep-all | initial | inherit	word-break: break-all;
Flexbox Properties
display	flex | inline-flex	display :flex; display :inline-flex;
flex-direction	row | row-reverse | column | column-reverse	flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse;
flex-wrap	nowrap | wrap | wrap-reverse	flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse;
flex-flow	row | row-reverse | column | column-reverse | nowrap | wrap | wrap-reverse	flex-flow: row nowrap; flex-flow: row wrap; flex-flow: row wrap-reverse; flex-flow: column nowrap; flex-flow: column wrap; flex-flow: column wrap-reverse;
row-gap	length | normal | inherit | initial | unset	row-gap:20px;
column-gap	length | normal | inherit | initial | unset	column-gap:20px;
gap	row-gap | column-gap	gap:20px 40px; gap: 40px;
justify-content	flex-start | flex-end | center | space-between | space-around | space-evenly	justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-around; justify-content: space-evenly; justify-content: space-between;
align-items	stretch | flex-start | flex-end | center | baseline	align-items: stretch; align-items: flex-start; align-items: flex-end; align-items: center; align-items: baseline;
align-content	stretch | flex-start | flex-end | center | space-between | space-around | space-evenly	align-content: stretch; align-content:flex-start ; align-content:center; align-content:flex-end; align-content:space-between; align-content:space-around;
order	length | normal | inherit | initial | unset	order: 4;
flex-grow	length | normal | inherit | initial | unset	flex-grow: 4;
flex-shrink	length | normal | inherit | initial | unset	flex-shrink: 3;
flex-basis	length | normal | inherit | initial | unset | auto	flex-basis:400px;
flex	Flex-grow , flex-shrink , flex-basis	flex:0 1 auto;
align-self	stretch | flex-start | flex-end | center | baseline | auto	align-self: auto; align-self: flex-start; align-self: flex-end; align-self: center; align-self: stretch;
Grid Properties
display	grid | inline-grid	display :grid; display :inline-grid;
grid-template-columns	length	grid-template-columns: 100px 200px 300px; grid-template-columns: 2fr 2fr 1fr; grid-template-columns:repeat(3,200px); grid-template-columns:repeat(3,1fr) 300px; grid-template-columns: repeat(3, minmax(200px, 1fr));
grid-template-rows	length	grid-template-rows: 100px 200px 300px; grid-template-rows: 2fr 2fr 1fr; grid-template-rows:repeat(3,200px); grid-template-rows:repeat(3,1fr);
grid-template	grid-template-columns | grid-template-rows	grid-template: repeat(3,1fr) / repeat(4,1fr);
row-gap	length | normal | inherit | initial | unset	row-gap:20px;
column-gap	length | normal | inherit | initial | unset	column-gap:20px;
gap	row-gap | column-gap	gap:20px 40px; gap: 40px;
justify-items	start | end | center | stretch | baseline	justify-items:stretch; justify-items:start; justify-items:end; justify-items:center;
align-items	start | end | center | stretch | baseline	align-items: stretch; align-items: start; align-items: end; align-items: center;
place-items	align-items justify-items start | end | center | stretch | baseline	place-items: center start; place-items: center;
justify-content	start | end | center | space-between | space-around | space-evenly	justify-content: start; justify-content: end; justify-content: center; justify-content: space-around; justify-content: space-evenly; justify-content: space-between;
align-content	stretch | start | end | center | space-between | space-around | space-evenly	align-content: stretch; align-content:flex-start ; align-content:center; align-content:flex-end; align-content:space-between; align-content:space-around;
place-content	align-content justify-content stretch | start | end | center | space-between | space-around | space-evenly	place-content: end center; place-content: center;
grid-auto-flow	row | column	grid-auto-flow: row; grid-auto-flow: column;
grid-auto-rows	length	grid-auto-rows: 100px;
grid-auto-columns	length	grid-auto-columns: 100px;
grid-column-start	length | span	grid-column-start: 1;
grid-column-end	length | span	grid-column-end: 4; grid-column-end: span 3;
grid-column	start end length | span	grid-column: 1 / span 2;
grid-row-start	length | span	grid-row-start: 1;
grid-row-end	length | span	grid-row-end: 4; grid-row-end: span 3;
grid-row	start end length | span	grid-row: 1 / span 2;
justify-self	start | end | center | stretch | baseline	justify-self: stretch; justify-self: start; justify-self: end; justify-self: center;
align-self	start | end | center | stretch | baseline	align-self: stretch; align-self: start; align-self: end; align-self: center;
place-self	align-self justify-self start | end | center | stretch | baseline	place-self: start; place-self: start center;
grid-template-areas:	specific name	grid-template-areas: 'nav nav nav' 'head head head' 'sidebar content content' 'aside1 aside2 aside3' 'footer footer footer' ;
grid-area	specific name	grid-area: head;
Transform Properties
transform	translate() | translateX() | translateY() | translateZ()	transform: translate(20px,200px); /* x,y */ transform: translateY(250px); transform: translateZ(250px);
transform	rotate() | rotateX() | rotateY()| rotateZ()	transform: rotate(250deg); transform: rotateX(250deg); transform: rotateY(250deg); transform: rotateZ(250deg);
transform	scale() | scaleX() | scaleY()	transform: scale(2,1); /* width,height */ transform: scaleX(2); transform: scaleY(1);
transform	skew() | skewX() | skewY()	transform: skew(40deg,60deg);/* x,y */ transform: skewX(30deg); transform:skewY(10deg);
transform	matrix() - matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())	transform: matrix(1.5,0,0.7,0.5,0,2);
Transitions Properties
transition-delay	Time	transition-duration: 2s;
transition-duration	Time	transition-duration: 2s;
transition-property	Property name	transition-property: background transform; transition-property: all; transition-property: background;
transition-timing-function	linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit	transition-timing-function: linear; transition-timing-function: ease-in; transition-timing-function:ease-out ; transition-timing-function: ease-in-out; transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1) ;
transition	property duration timing-function delay	transition: all 2s linear 0s;
Animation Properties
@keyframes	animation will gradually change from the current style to the new style at certain times.
animation-name	Specific Name	animation-name: example;
animation-delay	Time	animation-duration: 2s;
animation-duration	Time	animation-duration: 2s;
animation-iteration-count	length | infinite	animation-iteration-count: infinite;
animation-direction	normal | reverse | alternate | alternate-reverse	animation-direction:normal animation-direction:reverse animation-direction:alternate animation-direction:aleternate-reverse
animation-timing-function	linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit	animation-timing-function: linear; animation-timing-function: ease-in; animation-timing-function:ease-out ; animation-timing-function: ease-in-out; animation-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1) ;
animation-fill-mode	forwards | backwards | both	animation-fill-mode: forwards animation-fill-mode: backwards animation-fill-mode: none animation-fill-mode: both
animation	name duration timing-function delay iteration-count direction fill-mode	animation: example 5s linear 2s infinite alternate;

• Previous
• Next

CSS Tutorial

---

Properties Reference

---

• CSS Properties Reference Guide

Cascading Style Sheet

---

• CSS Introduction
• History of CSS
• CSS Syntax
• CSS Selectors
• Inline Style Method
• Internal Style Method
• External Style Method
• Type of Units in CSS
• Font Properties
• Background Properties
• Text Properties
• List Properties
• Margin Properties
• Padding Properties
• Border Properties
• Display Properties
• Display Table Properties in CSS
• Parent & Child Element in CSS
• Pseudo Class in CSS
• Child Elements in CSS
• CSS Gradient
• Border Radius in CSS
• Colors in CSS
• Box Shadow in CSS
• Chess Board in CSS

Flexbox Tutorial

---

• Flex Box in CSS
• Advantages of Flex Box
• Vertical Center in Flexbox
• Flex Box Architecture
• Flex Box Properties
• Flexbox Container Properties
• Flex Item Properties
• Basic Code Setup
• Flex and Inline Flex
• Flex Direction Property
• Flex Wrap Property
• Flex Flow Property
• Flex Gap Property
• Justify Content in Flexbox
• Align Item in Flexbox
• Align Content in Flexbox
• Flex Order in Flexbox
• Flex Grow in Flexbox
• Flex Shrink in Flexbox
• Flex Basis in Flexbox
• Flex Property in CSS
• Align Self in Flexbox
• Flex Gallery in Flexbox

CSS Grid Tutorial

---

• Introduction of Grid
• Grid Basic Code Setup
• Grid and Inline Grid
• Grid Template Columns in CSS
• Grid Template Rows in CSS
• Grid Template in CSS
• Grid Gap in CSS
• Justify Items in Grid
• Align Items in Grid
• Place Items in Grid
• Justify Content in Grid
• Align Content in Grid
• Place Content in Grid
• Grid Auto Flow
• Grid Column
• Grid Row
• Grid Self Properties
• Grid Template Area

Transitions Properties

---

• Transitions in CSS
• Transition Properties in CSS
• Transition Timing Function in CSS
• Transition Accordion in CSS
• Underline Effect for Navbar Links with CSS

CSS Properties with Examples

---

• Font family in CSS
• Background Attachment in CSS
• Background Blend Mode
• Background Clip in CSS
• Gradient Background Colors in CSS
• Background Origin in CSS
• Background Size in CSS
• Box Sizing in CSS
• Column in CSS
• Combinator in CSS
• Minimum Height and Maximum Height in CSS
• Minimum and Maximum Weight in CSS
• Opacity in CSS
• Outline Properties in CSS
• Overflow Properties in CSS
• Pseudo Selector in CSS
• Pseudo Elements in CSS
• Selectors in CSS
• Transition in CSS
• Units in CSS
• Position Property in CSS
• Visibility in CSS
• Z Index in CSS
• Animated Sidebar in CSS
• Fixed Sidebar in CSS
• Navbar Flex in CSS
• Responsive Navbar in CSS
• Search Text in CSS
• Tables in CSS
• Sticky Navbar in CSS

CSS Selectors

---

• Universal or Wildcard Selector (*)
• Element Selector (tag name)
• Class Selector (.)
• ID Selector (#)
• Specific Class Selector (tag.classname)
• Grouping Selector
• Descendant Selector (space)
• Child Selector ( > )
• Adjacent Sibling Selector (+)
• General Sibling Selector (~)

CSS Pseudo Elements

---

• ::first-line
• ::first-letter
• Multiple Pseudo-elements
• Before & after
• ::marker
• ::selection
• ::placeholder

CSS Attribute Selectors

---

• Attribute Selector
• Attribute Value Selector
• Attribute Tilde Selector
• Attribute Caret Selector
• Attribute Star Selector
• Attribute Dollar Selector
• Attribute OR Selector

Input Pseudo Classes

---

• Enabled & disabled Classes
• Checked & Not checked
• Placeholder-shown & Not(placeholder-shown)
• Focus
• Valid & Invalid
• Required & Optional
• Read-only & Read-write
• In-range & Out-of-range
• Default
• User Action
• First and Last Child
• nth-child and nth-last-child
• nth-of-type and nth-last-of-type
• only-child
• only-of-type
• first-of-type and last-of-type
• empty

CSS Examples

---

• Animated Background in CSS
• Animated Gradient Color Spinner in CSS
• Animated Text in CSS
• Animated Stylish Spinner in CSS
• Detect Invalid Input With Shake Animation in CSS
• Create a Animated Glowing Text in CSS
• Different Style of Search Box Design in CSS
• Highlighting Custom Selection using CSS
• Creating Google Login Form Design in CSS
• Animated Button Design in CSS
• Text Animation in CSS
• Fog Effect in CSS
• Text Typing Animation in HTML CSS
• Custom Checkbox Creation in HTML CSS

CSS Animation Projects

---

• Photo Frame Over Effect
• Dynamic Colorful Rotating Balls
• Animated Wave Circles
• Type Writer Text Effect
• Photo Gallery
• Creating Animated Card
• Animated Buttons
• Radio Switch Buttons
• Button Hover Animation
• Animated Navigation Bar
• Animated Contact Form Design
• Pure Animated Accordion in CSS

---

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions