Download - Basic CSS
![Page 1: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/1.jpg)
Compiled by: Miraf
Belyu
Basic CSSLet’s try…
![Page 2: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/2.jpg)
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>
![Page 3: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/3.jpg)
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.
![Page 4: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/4.jpg)
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”
![Page 5: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/5.jpg)
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>
![Page 6: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/6.jpg)
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>
![Page 7: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/7.jpg)
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) .
![Page 8: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/8.jpg)
Compiled by: Miraf Belyu
Let’s manipulate textColor
<head><style type = “text/css”>
p{
color:blue;}
</style></head>
![Page 9: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/9.jpg)
Compiled by: Miraf Belyu
Direction ( ltr and rtl )
<head><style type = “text/css”>p{color:blue;direction:rtl;}</style></head>
![Page 10: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/10.jpg)
Compiled by: Miraf Belyu
Text indentation
<head><style type = “text/css”>p{color:blue;text-indent: 20px;}</style></head>
![Page 11: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/11.jpg)
Compiled by: Miraf Belyu
Lets decor our text (underline, line-through)
<head><style type = “text/css”>p{color:blue;text-decoration:underline;}</style></head>
![Page 12: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/12.jpg)
Compiled by: Miraf Belyu
How about applying shadow
<head><style type = “text/css”>h1{color:blue;text-shadow: 2px 1px 3px grey;}</style></head>
![Page 13: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/13.jpg)
Compiled by: Miraf Belyu
Border (color, style and width)border-color [bottom, top, left, right]border-style [solid][dashed]Border-width
Have a Try!
![Page 14: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/14.jpg)
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>
![Page 15: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/15.jpg)
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>
![Page 16: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/16.jpg)
Compiled by: Miraf Belyu
How about you try the padding
![Page 17: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/17.jpg)
Compiled by: Miraf
Belyu
Advanced CSS concepts
![Page 18: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/18.jpg)
Compiled by: Miraf Belyu
id, class and pseudo-class selectors.Styling hyperlinks.Elements visibility.Positioning.
![Page 19: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/19.jpg)
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 “#”
![Page 20: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/20.jpg)
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>
![Page 21: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/21.jpg)
Compiled by: Miraf Belyu
class
to specify a style for a group of elements.
defined with a "."
![Page 22: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/22.jpg)
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>
![Page 23: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/23.jpg)
Compiled by: Miraf Belyu
Pseudo-class Selector
add special effects to some selectors. Syntax:
selector:pseudo-class {
property:value;}
Mostly used in hyperlinks.
![Page 24: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/24.jpg)
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;}
![Page 25: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/25.jpg)
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>
![Page 26: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/26.jpg)
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.
![Page 27: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/27.jpg)
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>
![Page 28: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/28.jpg)
Compiled by: Miraf Belyu
![Page 29: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/29.jpg)
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.
![Page 30: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/30.jpg)
Compiled by: Miraf Belyu
Try to modify the above code and get the following output
![Page 31: Basic CSS](https://reader035.vdocuments.mx/reader035/viewer/2022062811/568160a6550346895dcfc7f4/html5/thumbnails/31.jpg)
Compiled by: Miraf Belyu