Uploaded byRabiul robi
Web designing (2) - CSS Basic Coding
The document presents a detailed overview of CSS styles in web design, explaining the differences between external, internal, and inline style sheets. It provides examples of how to apply various CSS properties to HTML elements, including positioning, background colors and images, and cursor effects. Additionally, the document covers techniques for formatting text, images, and lists to create visually appealing web pages.
More Related Content
Similar to Web designing (2) - CSS Basic Coding
Web designing (2) - CSS Basic Coding
- 1. Web-Designing (2) CSS BasicCoding A Presentation by, MD. Rabiul Islam (robi)
- 2. CSS External Style-Sheet The stylesheet 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… Toset 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 TheStyle 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 IFthe 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 scrollbar 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>
- 9.
- 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.