Css Basics , Css interview questions and answers

                                      CSS NOTES
----------------------------------------------------------------------------------------------------------
 background-color=  specifies the background color of an element.
background-repeat: repeat-x;= repeated only horizontally
background-repeat: repeat-y;=repeated only vertically
 background-position: right top;= change the position of the image 
background-attachment: scroll|fixed|local|initial|inherit;(image are fixed and                                            content are move)
----------------------------------------------------------------------------------------------------------
 text-decoration: none;= text-decoration property is mostly used to remove                                         underlines from links for design purposes:
                          : overline=text upper line    
              :line-through=strike the line
             :underline=text underline
text-transform=  used to specify uppercase and lowercase letters in a text.                             and capitalize the first letter of each word
 text-indent: 50px;=  used to specify the gap(empty line ) of the first line of                                   a text.
text-shadow=the property adds shadow to text.(text-shadow: h-shadow v-                        shadow blur-radius color|none|initial|inherit;)
----------------------------------------------------------------------------------------------------------
 white-space: nowrap;=single line text(p tag same process)
----------------------------------------------------------------------------------------------------------
font-variant: normal|small-caps|initial|inherit;(text latter change)
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
----------------------------------------------------------------------------------------------------------
list-style-image    Specifies an image on list style type
list-style-type    Specifies the list type = circle;square;upper-roman
----------------------------------------------------------------------------------------------------------
border-collapse=the property sets whether the table borders are collapsed                            into a single border or separated:(single line border)
 border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
outline=outerside border(outline-color,outline-style,outline-width,inherit)
----------------------------------------------------------------------------------------------------------
Padding - Clears an area around the content.(inside the content space in                          border)
Margin - Clears an area outside the border.
----------------------------------------------------------------------------------------------------------
display: block= that means that the element is displayed as a block,                             
display: inline= that means that the element is displayed inline,                              

display:none=hide total display
  visibility:hidden=display hide but occupies space
----------------------------------------------------------------------------------------------------------
position(left right top bottom)=absolute=default fixed position(sub node of                                                    relative position)
  fixed=A fixed element does not leave a gap in the page
----------------------------------------------------------------------------------------------------------
                         All CSS Pseudo Classes
---------------------------------------------------------------------------------------------------------
Selector        Example   
:active        a:active   
:checked        input:checked( only checked button are resize or -                                            -largest,highlights)        
:empty         p:empty (only empty page are show)        
:first-child    p:first-child (first line changed of main content,sub content)     
:first-of-type p:first-of-type(first line changed)     
    
:hover          a:hover (mouse over changed the task)   
:in-range          input:in-range (number range start)     
  
 :last-of-type  p:last-of-type    (last page changed) 
:link           a:link     (link color size)
      
:read-only       input:read-only(only read no create text in text box)     
:read-write      input:read-write     
:required             input:required   
:valid             input:valid(only valid data color change )   
:visited             a:visited   


::after             p::after (select the content after p tag)   
::before              p::before ( add to before content)
::first-letter       p::first-letter    (first latter are changed (small,capital,color)) 
::first-line           p::first-line(first line changed provide color,size)
::selection           p::selection (add to select color,size)     ----------------------------------------------------------------------------------------------------------
[attribute~="value"] selector is used to select elements with an attribute                                 value containing a specified word.( (~)=accept particular                                 one word)
----------------------------------------------------------------------------------------------------------
 border-radius =change the"rounded corners".
----------------------------------------------------------------------------------------------------------
box-shadow= Adds one or more shadows to an box( box-shadow: 10px 10px                        grey;)
text-shadow= Adds one or more shadows to a text
----------------------------------------------------------------------------------------------------------
  word-wrap: break-word;= the property allows long words to be able to be                                              broken and wrap onto the next line(total                                                           words set in block)
  word-break: keep-all;=(total word complete then next line)
    word-break: break-all;=(complete word first and second line)
----------------------------------------------------------------------------------------------------------
  transition: width 5s;=hover process 5 second completed

Thanks

Css Zilla Team