Skip to main content

CSS tutorial


Introduction to CSS

Imagine you've just designed a two hundred page web site for a client (or maybe for yourself) but at the last minute your client (or you) decide the font is a little two small or the typeface should be serif instead of sans-serif? You didn't know how to use cascading style sheets (CSS) so you coded all of the pages with the old-style <font> tag. If you didn't know CSS, chances are you'd have to replace every occurrence of the old <font> tag with the new <font> tag. But if you had decided to write the site with CSS from the get-go, all you would have to do is replace one single line of code in a master file, and your entire site would be rendered immediately in your new style.

That's just one file to upload. That's a lot better than two hundred. Now you can do other things with your time. This is one major reason cascading style sheets are important. CSS makes web site maintenance easier.
 CSS LINKS

a:link { } - regular link
a:visited { } - regular link already visited
a:hover { } - any link with the mouse cursor currently over it
a:active { } - the split-second a link is clicked

CSS listes 

OL { list-style-type: upper-roman; }
OL OL { list-style-type: upper-alpha; }
OL OL OL { list-style-type: decimal; }
OL OL OL OL { list-style-type: lower-alpha; }
OL OL OL OL OL { list-style-type: lower-roman; }
colors :

body { background-image: url(graphic.jpg);
color: #FFFFFF; background-color: #000000;
background-repeat: no-repeat; }
CSS CLASS 


p.first{ color: blue; }

p.second{ color: red; }

  <html>

<body>

<p>This is a normal paragraph.</p>



<p class="first">This is a paragraph that uses the p.first CSS code!</p>

<p class="second">This is a paragraph that uses the p.second CSS code!</p>


out put :

 This is a normal paragraph.

This is a paragraph that uses the p.first CSS code!

This is a paragraph that uses the p.second CSS code!


font 

h4 { color: red; }



h5 { color: #9000A1; }



h6 { color: rgb(0, 220, 98); }








Popular posts from this blog

insert document in collection mongodb

 Insert document in collection Two types of insert Insert single records:  Insert multiple records Insert single records:    syntax:  db.collection.insertOne(    <document>,    {       writeConcern: <document>    } ) Example 1:  db.users.insertOne({"name":"ram","email":"ram@gmail.com"})  Example 2:  db.users.insertOne( [{"employee":{"name":"ram","email":"ram@gmail.com"}}] ) Insert multiple records:   syntax : db.Collection_name.insertMany( [<document 1>, <document 2>, …], {     writeConcern: <document>,     ordered: <boolean> }) Example:  db.users.insertMany([{"name":"ram","email":"ram@gmail.com"},{"name":"raju","email":"raju@gmail.com"}])
Read more

Collection Shell Commands in MongoDB

Create Collection  Syntax: db.createCollection("Collection Name"); Example: db.createCollection("users"); Delete collection in Mongodb Shell Command db.collection.drop()  Find Collection in Mongodb Shell Command db.collection.find() Show all Collection in Mongodb Shell Command show collections Creat Collection in Mongodb Shell Command db.createCollection("users") Rename the Collection In Mongodb Shell Command db.collection.renameCollection()   Update the single document in MongoDB collections Shell Command db.collection.updateOne()  Updates all the documents in MongoDB collections that match the given query.  db.collection.updateMany() Replaces the first matching document in MongoDB collection db.collection.replaceOne()  Deletes the first document in Mongodb collection db.collection.deleteOne()  db.collection.deleteMany()
Read more