Understand the basics of Media Queries

Understand the basics of Media Queries
Hello Guys

Today we understand the basics of media query. All websites which is works online have four major screen ie
1.Large desktop screen 
2.Medium desktop screen
3.Ipad screen {768px width - 1024px}
4.Mobile screen { less than 768px}

Take an example:-
@media screen and (min-width: 768px) and (max-width: 979px) {...}
This media query will work between 768px width to 979 width only.

Now take an another example of max width media query ie:

@media screen and (max-width: 980px) {...}

This media works only in 980px screen size or less than 980px screen size. This media query is more effective than above media query in which we set min-width and max-width.

This media query also decrease the lines of css.




CSS cascade hierarchy

Hello Guys,

css has multiple hierarchical levels that cascade in importance and priority.

Css have three types which work according to his priority.

1: Inline CSS
2: Inline CSS
3: External CSS

Inline css have highest priority. after than internal css after than external css.

If we want to disable inline css effects we use "!important".



Refer by:- http://webstyleguide.com/


Simple file folder structure of website template

Hello Guys,

Remember a proper structure of website template file is necessary. A proper file structure give ease to designer or developer.

Just have a look on this image.


Refer by:-http://webstyleguide.com/


How we make paragraph inverted comma with css which set according to content size

How we make paragraph inverted comma with css which set according to content size
Hello Guys

Today we learn how you make paragraph inverted comma with css.
here we use a q tag for put our paragraph content. Now inverted comma will coming from css with before and after tag.

q:before {
color: #fa4173;
font-family: Times New Roman, Times, serif;
content: '\201C';
font-size: 60px;
padding-right: 5px;
}
q:after {
color: #fa4173;
font-family: Times New Roman, Times, serif;
content: '\201D';
font-size: 60px;
padding-left: 5px;
margin-top: 5px;
}

Demo:- http://jsfiddle.net/csszilla/RQrsk/9/embedded/result/

Basic concept of liquid css and design

Basic concept of liquid css and design

Theory:-

Hello Guys, hope you doing well.

Today i explain the basic concept of liquid design which make your web page totally fluid and looks good in all screen sizes.

Fonts sizes issue:-
Good question!! if we stick with our liquid design principles we’ll need to use relative font units. Our choices are:

1:-Em's
2:-%'s
3:-ex's
4:-css keywords


What is Liquid Design?

The term "Liquid" means a webpage should flow smoothly in all screen sizes.

<style>
body { font-size:1.5em;}

.top_header { background:#666; color:#fff; min-height:50px; width:100%; float:left; padding:15px 0px;}
.block1 { width:50%; float:left; background:#033; min-height:50px;}
.block2 { width:50%; float:left; background:#090; min-height:50px;}

.middle_part { background:#CCC; width:100%; float:left; padding:15px 0px;}
.left_part { min-height:100px; float:left; width:30%; background:#960;}
.right_part { min-height:100px; float:left; width:70%; background:#690;}


.footer_part { background:#930; float:left; width:100%; padding:30px 0px;}
.col1 { background:#999; width:33.333%; float:left; min-height:300px;}
.col2 { background:#333; width:33.333%; float:left; min-height:300px;}
.col3 { background:#CCC; width:33.333%; float:left; min-height:300px;}


@media screen and (max-width:980px) { body { font-size:1.4em;}}

@media screen and (max-width:767px) { body { font-size:1.2em;}}

@media screen and (max-width:480px) { body { font-size:0.8em;}}




</style>

<div class="top_header">
<div class="block1"> header left
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
<div class="block2"> header right
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
</div>

<div class="middle_part">
<div class="left_part"> left part
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
<div class="right_part"> right part
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
</div>

<div class="footer_part">
<div class="col1"> footer first
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
<div class="col2"> footer second
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
<div class="col3"> footer third
<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
</div>
</div>




Example:- Just resize your window and see effects

DEMO:- http://jsfiddle.net/csszilla/RQrsk/8/embedded/result/


CSS selectors by Alphabats

CSS selectors by Alphabats

A

::after


After is a pseudo element which is used for insert some text directly into webpage with out written in main html.
CSS:-
.button:after { content:"csszilla"; display:block;}
HTML:-
<a href="#" class="button"></a>


::before


before is a pseudo element which is used for insert some text directly into website, same as after element.
CSS:-
.button:before { content:"csszilla"; display:block;}
HTML:-
<a href="#" class="button"></a>


:active

The :active pseudo selector is used to change the color of element when clicked or when element is activated. Generally :active is used in a tag in navigation etc.
CSS:-
ul li a.active { background-color:#333;}
HTML:-
<ul>
<li>
   <a href="#" class="active">CSS ZILLA</a>
</li>
</ul> 


Attribute

css has ability to target HTML based on their attribute. You are aware from class and ID. ok lets see also rel attribute.
CSS:-
h2[rel="back_color"] { color:#CC3300;}
HTML:-
<div>
<h2 id="title" class="wonder" rel="back_color">CSS ZILLA</h2> 

here you control h2 styles with rel attribute same as classes and ID.


C

:checked

:checked is pseudo-class which is active only when element is selected. It apply only on input type radio and input type checkbox.

CSS:-


input[type=checkbox] + label {

  color: #ccc;

  font-style: italic;


input[type=checkbox]:checked + label {

  color: #f00;

  font-style: normal;

}

HTML:-


<input type="checkbox" id="css_zilla" name="csszilla"> 
<label for="csszilla">CSS ZILLA is Awesome</label>

Child property


child property is used to work first child to nth child.

take an example 

HTML:-

<ul>

<li>Avantika</li>
<li>Ankit</li>

</ul>
  • Avantika
  • Ankit

CSS:-

ul li { font-size:12px; color:#009933;}
ul li:first-child { color:#FF0000; font-size:15px;}


Class

class is also a selector of css. We can identify a html element by its class name, 
for example we make a button of input type ok, if we want to give styles to this button we make a class.

CSS:-

.button { background:#333; color:#fff; font-family:arial; font-size:13px;}

HTML:-

<input type="button" class="button" value="css zilla">


D

:default

The :default pseudo selector will match the default in group. for example in a group of radio buttons a radio button is selected by default, even if the user has selected a different value.

HTML:-



<ul>

  <li>

    <input type="radio" name="color" value="yellow" id="yellow"> 

    <label for="yellow">yellow</label>

  </li>
  <li>
    <input type="radio" name="green" value="green" id="green" checked> 
    <label for="green">green</label>
  </li>
  <li>
    <input type="radio" name="blue" value="blue" id="blue"> 
    <label for="blue">blue</label>
  </li>
</ul>
here green label button is selected by default whenever user have right to select more than one option. but green label is selected by default.


:disabled

Elements that can receive the disabled attribute is not activated either on mouse hover and focus. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus.

E

:empty

The :empty pseudo selector will select elements that contain either nothing or only an HTML comment. 
In simple empty pseudo selector will select empty div.
Example p:empty { display:none;}
div:empty { display:none;}

























CSS Curls

CSS Curls

CSS Speech Bubbles

CSS Speech Bubbles