working with div and css Fresno website and mobile development

FUNdamentals behind making a website

<div> </div> that right there is a block and content can go with in it such as <div> hello world!!! </div>
a <div> can be styled using CSS which stands for cascading style sheets which basically tell the block <div> how to be styled width, height , color, background or its properties for its content.

you can assign a <div> an ID  or Class which looks like  <div id=”someID”></div> or <div class=”someClass”></div>

what is the difference?
<div> id can be used to assign specific css elements that identify with just that one <div> for example
if my <div> is <div id=”someID”> hello world</div> and i wanted the div to be the height of 50 pixels and a width of 230 pixels the corresponding css document will look something like this:
#someID{
height:50px;
width:230px;
}
how about adding a color to the background of the div? simple !!
just add
background-color:#00FFFF;
to the corresponding css element.
wtf is that????
Html and css use Hexadecimal colors which are a group of six characters that make up a specific color.
you can look them up anywhere online there is thousands of free charts and generators.

okay carried away so what about a <div> with class? a Class lets us use the css characteristics to various elements using the same class

so if I have 2 divs

<div class=”someCLASS”>This is my first div</div> <div class=”someClass”>This is my second div</div>
.someCLASS{
background-color:#f0f0f0;
font-size:25px;
padding-left:5px;
padding-right:5px;

}

both divs will carry the same characteristics
you can also have both with same characteristics but what if you wanted to distinguish and identify them from eahother

<div id=”someID1″ class=”someCLASS”>This is my first div</div> <div id=”someID2″ class=”someCLASS”>This is my second div</div>

 

#someID1{
height:50px;
width:230px;
}

#someID2{
height:70px;
width:200px;
}

.someCLASS{
background-color:#f0f0f0;
font-size:25px;
padding-left:5px;
padding-right:5px;

}

lets look at our examples in true format

<html>
<head>

<style type=”text/css”>

#someID1{
height:50px;
width:230px;
}

#someID2{
height:70px;
width:200px;
}

.someCLASS{
background-color:#f0f0f0;
font-size:20px;
padding-left:5px;
padding-right:5px;

}

</style>
</head>

<body>

<div id=”someID1″ class=”someCLASS”>This is my first div</div> <div id=”someID2″ class=”someCLASS”>This is my second div</div>

</body>
</html>

paste on to your notepad or text edit and save as an html file and open on your browser
you can do more with css such as aligning floating and centering blocks.. stay tuned for more

In the mean while check out our fresno mobile development apps for iPhone.

Related Posts