Mastering CSS Basics: Backgrounds, Fonts, Text, Borders, and Advanced Selectors

Basic CSS Compiled by: Miraf Belyu 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> Compiled by: Miraf Belyu

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

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

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

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

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

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

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

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

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

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

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

<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

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

How about you try the padding Compiled by: Miraf Belyu

Advanced CSS concepts Compiled by: Miraf Belyu

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

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

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

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

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

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

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

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

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

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

Compiled by: Miraf Belyu

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

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

Compiled by: Miraf Belyu

Mastering CSS Basics: Backgrounds, Fonts, Text, Borders, and Advanced Selectors