basic css
DESCRIPTION
Basic CSS. Let’s try…. Background background-color background-image body { background-image:url (); } . background-repeat - PowerPoint PPT PresentationTRANSCRIPT
Compiled by: Miraf
Belyu
Basic CSSLet’s try…
Compiled by: Miraf Belyu
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-repeatjust 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 textColor
<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 worksLet’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