Sunday, July 19, 2015

css 3 complete tutorial

CSS 3 COMPLETE TUTORIAL

css means 'cascading style sheet'.which is used to design website layout.and the css 3 is the latest version of css.it is the tool which gives you the energy to make professional layout of web and with advanced option.this course of css3 is advanced and i think it gives you so many ideas to post in your web project.in other words we say it is a web pages which is written in the form of html, x html, XML etc.
and we also say css is a web language which is used for adding formatting to web pages and applications.
css3 released in 2012 and it is still major css tool in all browser.

how does css work

  • css is used within html document and it work as a style sheet.
  • css is a loosly written web language which can be written inside html  tags.
  • css have their selectors and selector have their own properties and value.
  • css can be written internally ,externally and within lines.
  • css is suported by all major browsers like google chrome,mozila firefox,opera mini,internet explore etc.

syntax of css

css syntax is as follow
           1)selector    2)property    3)value
h1{color :red;}
one selector have many properties like:
H1{color:red;size 12 px;; background;red;}
     all html tags are default selectors in css,and users defined  selectors are called ids and classess in css.

method of css in html

there are 3 method ,by using which you can write css code  inside html documents;
  1. external method                                                                                                                                        <link rel='stylesheet' href='style.css'>
  2. internal method.                                                                                                                                                 <style>code is written here</style>
  3.  inline method                                                                                                                                                      <p style='color; red;'>this is a pragraph!</p>        

what can we do with the help of css   


  • we can create website layouts wih css
  • we can create horizontal and vertical menus in css.
  • we can create drop downs menus with the help of css
  • we can create image gallerias using css
  • we can create web templates with css
  •    we can create animation with the help of css
  • we can create object using css
  • we can create rounded borders using css.

requirements 

  • basic understanding of computer and internet , html knowledge will be bonus
  • a text editor to write code in such as notepad ++, Dreamweaver, sublime text etc
  • a browser to view the output like mozila firefox or google chrome.
border and radius code  

you can manually use your default figure but here is only example of css code
     -webkit-border-radius: 13px 16px 23px 16px;

border-radius: 13px 16px 23px 16px;

box shadow code

-webkit-box-shadow:inset 22px 12px 21px 12px #FF6421;
box-shadow:inset 22px 12px 21px 12px #FF6421;

multiple column

-moz-column-count: 3;
-moz-column-gap: 21px;
-webkit-column-count: 3;
-webkit-column-gap: 21px;
column-count: 3;
column-gap: 21px;

outline dotted

outline: 21px dotted #171FFF;
outline-offset: 21px;

text shadowing

text-shadow: 12px 32px 13px #19FF19;

some screenshots of css code




through this tutorial i think you got some idea and totally understand on css 3.the best text editor tool is sublime text i personaly used it and it is good.

No comments:

Post a Comment