Beginners Blog : CSS

How to use CSS Styles

What if we want to make styles in all the Labels in our website maybe we want to make the same style to the paragraph too so how can we do that its very easy lets do it like this :
<style type="text/css">
p
{
Font-family:Arial;
}
Label
{
Font-family:Arial;
}
</style>

Do you think that was the right way sure its correct but its not dynamic if we want to make all the paragraphs and labels and maybe <h1> headers and alot alot do you think this is the best way

sure its not so whats the best way that best way is to use class and what is class its something we give it a name and then inherit this class to all objects we want to for example :
<html>

<head>

.myclass */ its very important to put dot before the name

{

Font-family:Arial;

}

</head>

<body>

<p class="myclass"> helloooooo</p>

<h1 class="myclass">it has the same font family of hellooooo</h1>

<label class="myclass">and this too :) Imagine :D</label>

</body>

</html>

now what if we want to let only a specific element to has it unique class just like humans elements in websites can have ID too so if we give each element an ID and then in our style file say make this style available only for the element of that ID lets see this example :

<html>
<head>
<style type="text/css">
#text
{
padding:100px;
font-size:20px;
color :red;
}
</style>
<body>
<p id="text"> hello</p> */ so only this paraghrap which has a unique ID will get that style in our css style
</body>
</html>
i hope its fine till now.
what if we want to use various classes for the same object or tag its not that complicated lets see
<html>
<head>
<style type="text/css">
p.color
{
color: FFFFFF */white color
}
p.font
{
font-size:20%;
font-family:Romani;
}
</style>
<body>
<p class="color"> how are you guys i hope you like my lessons</p>
<p class="font">i'd love to share me your questions and i'll do my best to answer it</p>
</body>
</html>

Alignment

Another css style i'll only talk about most used styles and i want you to go and search it up on google or any other website to know more about this
whats Alignment its kinda the location of our object or element (image,table,text)
there's four values of Alignment which is :

Center
Right
Left (The Defualt)
Justify

how to use you can use it as we did before in inline style or external or embedded style
for example :

<html>

<head>

</head>

<body>

</body>

</html>

Hope you'll like it :)

Colors in CSS

Color is a problem for the Web for two reasons:

Monitors vary widely
Browsers vary widely

There is a set of 16 colors that are guaranteed to be displayable by all graphical browsers on all color monitors

black 000000 green 008000

silver C0C0C0 lime 00FF00

gray 808080 olive 808000

white FFFFFF yellow FFFF00

maroon 800000 navy 000080

red FF0000 blue 0000FF

purple 800080 teal 008080

fuchia FF00FF aqua 00FFFF

so these are the colors and here's an example oh how to use them :

<html>

<head>

p {

color:000000; */ for black or any other color you want

}

</head>

<body>

<p> hello</p>

</body>

</html>

\\\

Font Properties

font-family

Value is a list of font names - browser uses the first in the list it has

font-family: Arial, Helvetica, Courier

Generic fonts: serif, sans-serif, cursive, fantasy, and monospace (defined in CSS)

Browser has a specific font for each

font-size

Possible values: a length number or a name, such as smaller, xx-large, etc.

font-style

italic, oblique (useless), normal

font-weight - degrees of boldness

bolder, lighter, bold, normal
Could specify as a multiple of 100 (100 – 900)

lets use some examples as we usually do before in sublime or notepad :

<html>

<head>

font-family:Arial;

font-size: 40px;

font-style:italic;

}

</style>

<head>

<body>

<p> this text has a nice style</p>

<p>all these tags will take the same styles</p>

</body>

</html>

and Thats it and for more styles i prefer you search it up on internet just search for"css style examples" :)

The Styles Priority

as we know there's 3 types of styles but if we write more than one type who'll be the active one?

thats a common question for most of beginners just like me :D

i searched alot on the internet and come out with this conclusion

the nearest style is the active one for example :

the style css file:

<style>

p {color : red;}

</style>

*********************

the html file

<html>

<head>

</head>

<body>

<p style="color:blue"> Hello</p> */ what do you think the color of paragraph will be it will be blue as i said it takes the nearest so if we have Embedded style and external style the Embedded style will work not the external one

</body>

</html>

Styles

There's three main types of styles it depends on where you declare your style information

1- inline styles

Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to.

      <a href="" style="text-decoration: none;">

      this is just the previous example i said

2- Embedded styles

styles that are embedded in the head of the document. Embedded styles affect
only the tags on the page they are embedded in.


if we want to use it we should write it inside the <head> tag 

for example :

<html>

<head>

<style type="text/css">

   p { color: #00f; } */ we are saying that all <p> tags should have this color

</style>

</head>

<body>

<p> hello</p> */ all the <p> tags will change its color 

</body>

</html>




3-external styles
External styles are styles that are written in a separate document and then attached to various Web documents. External style sheets can affect any document they are attached to.

<link rel="stylesheet" type="text/css" href="styles.css" />

     but where we should write our style or css file then

     go to sublime or notepad and do the following:

     1- write <style> tag

     2- for example lets use this one :

        <style>

p {

         padding-top: 100px; */ padding is to make space between each object in your                            webpage

     3-press ctrl+s

     4- name it as you want but now you should do it like this "your_file_name.css"

     5-its very important that the html and css file should be in the same folder or

       in the <link> tag you must write the address of your file for example

       <link rel="stylesheet" type="text/css" href="D:\Mywebpage\styles.css">

Thats it guy if you have any question please dont hesitate to ask

Styles 2

as i said before about styles and css each tag or object in web page has it own style attributes so for example there's width and height for everything but sure it doesnt has the same value for all i mean the width of pic its not as the same of the width of table thats why we should know how to use our width values and for the values we have few values here they are :

px - pixels
in - inches
cm - centimeters
mm - millimeters
pt - points
pc - picas (12 points)
em - height of the letter ‘m’
ex-height - height of the letter ‘x’
No space is allowed between the number and the unit specification e.g., 1.5 in is illegal!
Percentage - just a number followed immediately by a percent sign

and much more but these are enough the problem for beginners is about how to determine the real or wanted value i dont think you can know it immediately so the trying is the best thing you can do and the more used units are pixels and the percentage

so lets start out example with the same last steps:

1-open notepad

2-lets write this :

<html>

<head>

</head>

<body>

<img src="your_pic_url.jpg" style="width:300px;"> */ its very important to use ":" and the semi colon ";"

</body>

</html>

3-press ctrl+s to save it

4-name it as you want but dont forget to put the ".html" after the file name

5-open it by your web browser or just click on it :)

Have a nice day

Inline Styles

hey guys i want to thank you for your support ...
Today i want to talk about a very important thing which is style or the css of the page every page has its css which mean cascade style sheets "i dont know what does that mean lol" but whats css it allow us developers to make our websites more dynamic and more colorful it starts from the fonts to the animation alot of things you can do with it so as a start we'll start with small and simple examples then we'll go deeper
lets do the same steps again :
1-open notepad
2-lets write this:
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<h1> please if any of you has a problem in any tag please let me know to make it clear for you </h1>
<p style="font:Arial"> this is our text </p> */you can change it to italic or bold to see the difference
</td>
</tr>
</table>
</body>
</htm;>
3-press ctrl+s
4-save the file any name you want but you should write it like this "yourfilename.html"
5-dont forget to thank me hahhah :p

Tuesday, July 15, 2014

1- inline styles

2- Embedded styles

3-external styles