Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Coding Techniques and Best Practices in Programming

No description
by

meteor test

on 24 February 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Coding Techniques and Best Practices in Programming

Before CSS
<font color="#fff" size="4">Hello World</font>
Applying CSS
Introduction
Cascading Style Sheet
Contains the rules for the presentation of HTML.
Proposed by Håkon Wium Lie in 1994
CSS 101
Just Kidding!
Coding Techniques and Best Practices in Programming
Very hard to make global modifications to website or maintain consistency.
Inline

Embedded

Linked
Inline Styles
<div style="font-size:12px">Body Text</div>
Embedded Styles
<style type="text/css">
.red { color:red }
</style>
Linked Styles
<link rel='stylesheet' href='style.css' />
Selectors, Properties and Values
Cascade?
1. !important
2. Inline
3. Embedded
4. Linked
5. Browser default
The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.
Basic
Selectors: ID Based
#box { padding:10px }
Selectors: ID Based
#box { padding:10px }
Selectors: Class Based
.alert { color:red }
Selectors: Tag Based
body { font-size:11px }
Selectors: Grouping
h1, h2, h3 { margin-bottom:10px; }
Selectors: Descendant
div.box h1 { color:#000 }
Selectors: Child
ul > li { color:#fff }
Selectors: Universal
* { padding:0; margin:0 }
Selectors: Sibling
p + img { margin-top:10px }
<p>Some text</p>
<
img
src="image.jpg">
Selectors: Attribute
a[target="_blank" { text-decoration:underline }
<a href="#">normal link</a>
<a href="#"
target="_blank"
>another link</a>
Advanced Selectors
Advanced Attribute Selectors
a[href
*=
login] { color:red }
a[href
^=
"http://"] { color:red }
a[href
$=
".jpg"] { padding:2px }
a[rel
~=
"tag"] { color:#fff }
Advanced Pseudo Selectors
:first-of-child
:last-of-child
:not(x)
:nth-child(n)

.. and many more
Box Model
* { box-sizing: border-box }
Cross browser issues rendering padding / margin.

Box Model Issues
Modern Browser Fix
Inline - side by side
Block - stack like boxes

Display Property
etc.
Only works with
positioned
elements. (relative, absolute or fixed)

z-index
Float
RWD
tldr; media queries
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Frameworks
Bootstrap
ZURB Foundation
UIKit
Semantic UI
etc.

Thank You!
Tips!
Use short-hands.
Reset.css
margin:0 auto
Full transcript