CSS is the 2nd step of coding for web designing after HTML. Here is the basic coding terms of CSS that I learnt during my web designing course. This may help you too. Thank you :)
2. CSS
External Style-Sheet
The style sheet which is created individually and attached with HTML file by a link is
called external Style Sheet.
How To Add…………………..
<html>
<head>
<link rel=“stylesheet” type=“text/css” herf=“styleSheetname.css”/>
</head>
This Style Sheet is totally separated from main html file. This file is attached later just
like a link.
3. Image & link…
To set a image in a position….. Link effects……..
Img { float : left a link { color}
Width: 120px a hover { font-family , bgcolor,
border:1px solid black underline , font-size }
margin: 0 px 0 px 20px 26px
padding: 12px
text-align: the picture details } Adding Image before a line……………..
Input Box Effects…………………… h1: before/after { content : url (bird_pic.JPG)}
Input: Focus { background-color:#00ff00}
Paragraph first Letter/Line………………….. Image galary………………………..
P: first-letter { color: #00ff00 ; font-size: xx-large }
P: first-line { color: #00ff00 ; font-size: small-caps }
4. Internal Style Sheet
The Style Sheet which is done in the head in the option of any html project then its called Internal Style
Sheet.
How To Add…………..
<html>
<head>
Body {background-color; green} a:link {color:green}
h1 { color : maroon; font-size:22 pt} a:visited {color:yellow}
Hr {color :blue} a:active {color:black}
P {margin-left:15 px; font-size:26 pt} a.hover {color:red}
</head>
(N:B… at every option different types of codes will make different changes)
5. In-Line Style Sheet
IF the Style sheet is used in the Html Code line then its called in-line Style
Sheet.
How to Add……
<p style=“color:green”;”margin-left:2px”;”font-size:30pt”>
Here is the text about details
</p>
In-line Style is used for the style of a particular part of a html project.
6. Background color & images
Background ………………………… Background image…………………………
<head> <head>
<style type=‘’text/css”> <style type=“text/css”>
**Body body
{background-color : yellow} or,… {background-repeat: x ,y, no repeat}
(background-color : #ooffoo} or…. {background-attachment : fixed}
(background-color : rgb(255,0,0,255} {background-position : center, 50 px:60px}
</style>
</head> Adding image on list………………..
ul
Adding.. Normal image…………… { list-style-image:url(‘picname.jpg’);
<img src=“pic.jpg” height”225” width”90”> list-style-type: square; }
Img
{Height: 200px width:240px….. Height/width: auto }
This tag is for setting the height or width of a pic in a web page. If its “auto” then the pic will show its Original size in
the page.
7. Text Position
Fixed position……..
P { position: fixed; top:3cm; left:2cm;}
Relative Position………………......
P { position: relative; left: 2px,-2px; top:5px,-5px }
N:B.. This position depends on the same named tag…… and the relation occurs only with the last tag… !!!
Absolute Position………………..
Img { position : absolute; left:5px; top:8px; z-index:-1 }
N:B…. To set a image behind paragraph.
To set a image Shape/position………
Img { Position: absolute; clip:rect(2px,60px,20px,1opx);}
8. Scroll Bar/Non scroll bar box
Two side Overflow……
Div {background-color:#00ffff; width:100px; height:200px; overflow : Scroll }
Only right side overflow…
Div { background-color:#00fff; width:200px; height:300px; overflow: auto }
A text box Without color……….
Div { background-color:#00fff; width:200px; height:300px; overflow: hidden }
Different types of cursor effect :
<span style=“cursor:auto/pointer/move..etc..”>text here</span>
10. Text….
P.ex {color:#ooffoo; margin-left:22px} <span>T</span>ime is valuable. Span {float,width,font
size,font-style ,line-height}
<p class=“ex”>This is the way to mark a particular part or line of html with a symbol like “ex” and making
the style only for that marked part.
The tools that can modify a line or text……………
Font-size: 20pt / em /% Margin-left/right/upper/bottom:
Font-style :normal /Italic /oblique 20px ,25% , 2.5cm ,0.6em
Font-weight: normal/lighter/bold/900
Font-variant: normal/small-caps Text-align: left , right , Justify
…………………………………………………………………..
latter-spacing: 2px,-3px word-spacing: 30px Text-decoration: blink , overline , underline
white-space: no wrap
line-spacing: 90%,40% , Text-transformation: capitalized , uppercase , overcase , Text-indent: 50 px
Paragraph width/height in page….……. Max-height/width: 80px,80%
Min-height/width: 20px,20% quotes {“—” ”!” “~” } , Display : None
11. Box……
<head>
Div Border-color: green , der, #00ff00 , rgb(00,003,3335)
{ gackground- color: green
width: 70% Box-outline: #00ff00 dotted dashed
Padding: 10px
Border:5px solid grey Padding-top/bottom/right/left
Margin: 0px :25% 25% 50% 50%
text-align: center/left. Border style: none/dashed/solid/dobule/grey.
Position: absolute/…. Border-top/bottom/left/right/-style:
dotted/solid/dashed.
</head>
N:B-border color & all size is works by default , when its given together.
12. Follow us…..
<head>
<style type=“text/ css”>
li { display : inline}
</style>
</head>
<p> Follow us from below…. </p>
<ul>
<li><a herf=‘’facebook.com/rabiulrobi79/follow” img src=“Fblogo.jpg” width=“18” height=“14”>FB</a> </li>
<li><a herf=‘’twitter.com/rabiulrobi67/follow” img src=‘’twitterlogo.png width=“14” height=“12”>twitter</a> <li>
N:B.. For inline Display tag the links will appeared side by side in a line.