Web designing (2) - CSS Basic Coding
•
7 likes•1,118 views
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 :)
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Web designing (2) - CSS Basic Coding
Similar to Web designing (2) - CSS Basic Coding (20)
Recently uploaded
Recently uploaded (20)
Web designing (2) - CSS Basic Coding
- 1. Web-Designing (2) CSS Basic Coding A Presentation by, MD. Rabiul Islam (robi)
- 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.