1 / 31

Basic CSS

Basic CSS. Let’s try…. Background background-color <p style = “background-color: blue;”> background-image <html> <head> <style type = “text/ css ”> body { background-image:url (); } </style> </head> <body> </body> <html>. background-repeat

nan
Download Presentation

Basic CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basic CSS Compiled by: Miraf Belyu Let’s try…

  2. Background • background-color <p style = “background-color: blue;”> • background-image <html> <head> <style type = “text/css”> body { background-image:url(); } </style> </head> <body> </body> <html> Compiled by: Miraf Belyu

  3. background-repeat just modify the previous code to: <head> <style type = “text/css”> body { background-image:url(file); background-repeat: no-repeat; } </style> • Remember if you want to repeat the image horizontally use repeat-x if you rather want to repeat the image vertically you can use repeat-y. Compiled by: Miraf Belyu

  4. Font • Family <head> <style type = “text/css”> p { font-family:georgia, serif; } </style> </head> • Remember if the font family has more than one word put it in quotation (“”) mark. Example: Times New Roman should be “Times New Roman” Compiled by: Miraf Belyu

  5. Font style (normal, italic, straight-through) let’s modify the above rule. <html> <head> <style type = “text/css”> p { font-family:georgia, serif; font-style: italic; } </style> </head> <body> <p>this paragraph will have a font family of GEORGIA,</p> </body> </html> Compiled by: Miraf Belyu

  6. Font weight (bolding) just work on the previous doc <head> <style type = “text/css”> p { font-family:georgia, serif; font-style: italic; font-weight: bold; } </style> </head> Compiled by: Miraf Belyu

  7. Font size ( px, em, %) <head> <style type = “text/css”> p { font-family:georgia, serif; font-style: italic; font-weight: bold; font-size: 20px; } </style> </head> • I recommend using size in pixel (px) . Compiled by: Miraf Belyu

  8. Let’s manipulate text • Color <head> <style type = “text/css”> p { color:blue; } </style> </head> Compiled by: Miraf Belyu

  9. Direction ( ltr and rtl ) <head> <style type = “text/css”> p { color:blue; direction:rtl; } </style> </head> Compiled by: Miraf Belyu

  10. Text indentation <head> <style type = “text/css”> p { color:blue; text-indent: 20px; } </style> </head> Compiled by: Miraf Belyu

  11. Lets decor our text (underline, line-through) <head> <style type = “text/css”> p { color:blue; text-decoration:underline; } </style> </head> Compiled by: Miraf Belyu

  12. How about applying shadow <head> <style type = “text/css”> h1 { color:blue; text-shadow: 2px 1px 3px grey; } </style> </head> Compiled by: Miraf Belyu

  13. Border (color, style and width) • border-color [bottom, top, left, right] • border-style [solid][dashed] • Border-width Have a Try! Compiled by: Miraf Belyu

  14. <head> <style type = “text/css”> h1 { color:blue; text-shadow: 2px 1px 3px grey; border-style:solid; border-color: grey; border-width:1px; } </style> </head> Compiled by: Miraf Belyu

  15. Setting margins (top, right, bottom, left) • let’s work on a new snippet of code: <head> <style type = “text/css”> body { margin-top: 10px; margin-right: 200px; margin-bottom: 10px; margin-left: 200px; border: 1px dotted grey; height: 800px; } </style> </head> Compiled by: Miraf Belyu

  16. How about you try the padding Compiled by: Miraf Belyu

  17. Advanced CSS concepts Compiled by: Miraf Belyu

  18. id, class and pseudo-class selectors. • Styling hyperlinks. • Elements visibility. • Positioning. Compiled by: Miraf Belyu

  19. ID • for a single, unique element. • Set the id on any html element an then use it in the style sheet. • Defined by a “#” Compiled by: Miraf Belyu

  20. How it works <!DOCTYPE html> <html> <head> <style> #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> </html> Compiled by: Miraf Belyu

  21. class • to specify a style for a group of elements. • defined with a "." Compiled by: Miraf Belyu

  22. How it works <!DOCTYPE html> <html> <head> <style> .center { text-align:center; } </style> </head> <body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> </body> </html> Compiled by: Miraf Belyu

  23. Pseudo-class Selector • add special effects to some selectors. • Syntax: selector:pseudo-class { property:value; } • Mostly used in hyperlinks. Compiled by: Miraf Belyu

  24. How it works • Hyperlinks ( link, visited, hover and active) • link (unvisited link) a:link { text-decoration: none; color:blue; } • Visited (visited link) a:visited { color:grey; } • Hover (mouse over) a:hover { text-decoration: underline; color: green; } • Active (while clicking) a:active { color:red; } Compiled by: Miraf Belyu

  25. Visibility (hide and show) • Let’s hide a heading <!DOCTYPE html> <html> <head> <style> h1.hidden { visibility: hidden; } h1.visible { visibility: visible; } </style> </head> <body> <h1 class=“hidden">Hidden heading.</h1> <h1 class="visible">But this is visible.</h1> </body> </html> Compiled by: Miraf Belyu

  26. Positioning • absolute • calculated from the upper left corner of the page. • Otherwise, calculated from the upper left corner of the parent layer. Compiled by: Miraf Belyu

  27. How it works Let’s create a division for a website header <head> <style type = “text/css”> div#header { position: absolute; margin-left: 50px; margin-right: 50px; border: 1px solid grey; width: 1250px; padding: 0px; } </style> <body> <div id = “header”> <h1> you can put an image here, preferably. </h1> </div> </body> Compiled by: Miraf Belyu

  28. Compiled by: Miraf Belyu

  29. Positioning cont… • Relative • calculated relative to the position of the tag that carries the style. • If you are in the middle of the page, it will be calculated from that point. Compiled by: Miraf Belyu

  30. Try to modify the above code and get the following output Compiled by: Miraf Belyu

  31. Compiled by: Miraf Belyu

More Related