css



As always, 
our group is meant for asking doubts

https://www.facebook.com/groups/SDSWebDev/



Also, 
you might like our Facebook page

https://www.facebook.com/SDSLabs/





LETS JUMP IN!

Basic syntax

SELECTOR { PROPERTY: VALUE; }
Attribute selector: [ATTRIBUTE] { PROPERTY: VALUE; }


example: 
p { margin-top: 10px; }
h1 { font-size: 14px; }
form { border: 1px solid blue; }
[input] { color: #bbbbbb; }

COMMENTS


/* this is a comment */

Chrome inspect

is your best friend

WHERE do i put this thing??

INLINE
<worst idea, ever>

INTERNAL
<ok for one page sites>

EXTERNAL
<best idea, ever>

inline


<p style="color: white;">Bad way to style a para</p>

syntax:

<tag style="........"></tag>

INTERNAL

<head>
                <title>SDSLabs open lecture</title>
                <style type="text/css">
                                p { color: black; }
                </style>
</head>

EXternal

Add all the styles in a file with the extension .css

Link the file in head tag of the html page

<head>
    <title>SDSLabs open lecture</title>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>

Multiple css files can be included

CLASSes and ids

What are they?
Why do they exist??
Why should I use them???
Do they make my life easy????


<p>This is paragraph one</p>
<p>This is paragraph two</p>
<p>This is paragraph three</p>
<p>Ok, we should stop playing with paragraphs</p>
<p>No seriously</p>


<p>Damned you won't stop playing</p>

<p class="special">Wait, this seems different!</p>

<p class="special">Different again!</p>

<p id="awesome">ID?? This is new</p>

<p class="not_special">Different class? Class apart?</p>

<h1 class="special">Special Heading?</h1>


p.special { color: black; }

.special { color: black; }

h1.special { color: black; }

p#awesome { color: black; }

#awesome { color: black; }


<p class="pig">CSS guinea pig paragraph</p>

p { color: black; }

.pig { color: blue; }

p.pig { color: green; }

Let's have a look at this

An Example

Selectivity


More specific your selector is, higher the priority

If priority is same then what?
Latest gets higher priority

p { color: black; }
...
...
...
...
p { color: blue; }

external css


<link rel="stylesheet" type="text/css" href="one.css" />
/*p { color: black; }*/

<link rel="stylesheet" type="text/css" href="two.css" />
/*p { color: blue; }*/

<link rel="stylesheet" type="text/css" href="three.css" />
/*p { color: green; }*/

What if you have all 3?


INLINE
INTERNAL
EXTERNAL





INLINE > INTERNAL > EXTERNAL

BOX MODEL



p {
         margin: 10px 10px 10px 10px;
         margin: 10px 10px;
         margin-left: 10px;
}

/* similar syntax for padding */

Lets see an example

Example

Block vs inline


BLOCK:
Takes up the full width available, with a new line before and after 

INLINE:
Takes up only as much width as it needs, and does not force new lines 

BLOCK

div
h1...h6
p
ul ol li
form
etc

INLINE

span
a
img
br
etc

Here's an example

Example

DIV and spans

They are your super utility containers

  1. Divide your html into section
  2. Style sections as per need
  3. Sections are more or less independent

DIV

<div class="awesome">
            <!-- put whatever you want here -->
            <p>Paragraph inside my awesome div!</p>
</div>

div.awesome p {
                   color: black;
}

SPAN

<p>
      We just won't stop playing with paragraphs will we?
      Well then <span class="intro">let's add a span!</span>
</p>

span.intro {
                   color: black;
}

Let's see how this looks

Example

POSition

http://www.barelyfitz.com/screencast/html-training/css/positioning/

  1. relative
  2. absolute
  3. fixed

RELATIVE


A relative positioned element is positioned relative to its normal position.

div.awesome {
              position: relative;
              top: 10px;
              left: 20px;
}

FIXED

With absolute positioning, you define the exact pixel value where the specified HTML element will appear.

 The point of origin is the top-left of the parent element (that's the HTML element that it is inside of)

div.awesome {
              position: absolute;
              top: 10px;
              left: 20px;
}

Absolute

An absolute position element is positioned relative to the first parent element

It is removed from the flow of html

FLOW??
What the heck?

Here's an Example

Example

FLOW OF HTML

AKA How is the document laid out

BUT I WANT to move this tag out of the flow?!

OPTIONS:
Float it
or
Absolutely position it


FLOAT

div.lets_float {
           float: left; /* or right */
}

Let's go back to a previous example

Example

Colors


rgb(255,255,255)
#e34cde

pixel vs em vs %

pixel: absolute
p { font-size: 14px; }
em: relative
p { font-size: 2em; }
%: relative, of course, duh
p { font-size: 200%; }

Pseudo Classes

selector:pseudo-class {property:value;}
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */

Let's see an example

Example

Browser inconsistencies

Internet Explorer's handling of css sucks,
But some people do use it!

So, now what?

1.) Let those IE lovers pay their price by dealing with ugly webpages. Or
2.) Be good and fix the css for them.
Conditional comments:

< !--[if IE]>
< link rel="stylesheet" type="text/css" href="ie_fixes.css" / >
< ![endif]-- >
Prefixes:

  • -webkit-
  • -o-
  • -moz-
Examples:

  • -webkit-transition: width 2s; /*Safari*/
  • -moz-column-count:3; /* Firefox */
css reset

Removes default browser styles.

http://meyerweb.com/eric/tools/css/reset/

QUESTION?

EVEN BATMAN ASKED QUESTIONS



The lectures can be downloaded from here
https://sdslabs.co.in/lectures/