Journey To The Front End World - Part2 - The Cosmetic

Journey To The Front End World
Part : 2
BY IRFAN MAULANA
The Cosmetic :
Make Over with CSS

Who am I ?
• Name : Irfan Maulana
• Job : Software Development Engineer at Blibli.com
• Front End Developer for last 4 year
console.info(“Who am I?")

Pre-Warning !
• This slide contain basic knowledge in front end side, if you feel you
are too big, please don’t read this slide.
• This slide may contain subjective perception from the author, if you
have different thinking please don’t let me know .

Getting to know CSS
• CSS stands for Cascading Style Sheet
• Some people say that CSS is cosmetics in web.
• CSS more critical than just cosmetics.
• CSS giving layout, position, existence, variation, etc.
• CSS describe how each HTML element should be displayed.
• CSS remove style formatting from HTML attribute.

CSS Delivery
• CSS come in HTML tag <style></style> in <head> block
• CSS can also come with each HTML element in attribute style=“”
• CSS can also deliver in external resources like <link
rel="stylesheet" type="text/css" href=“somecss.css">
in <head> block
• CSS has priority if there is same style from different delivery :
+ Inline style (inside an HTML element)
+ External and internal style sheets (in the head section)
+ Browser default

CSS Syntax
• CSS come with key-value syntax with colon (:) as separator and
semicolon (;) for ending each declaration.
• Ex : color:blue; font-size:17px;
• If using external resources or internal style, CSS use bracket ({}) after
its selector (*in next page)
• Ex : .row{color: blue; font-size: 17px;}

CSS Selector
• CSS Selector used to find HTML element will be style-ed.
• CSS will styling element that select by selector that used like HTML
element, Id, or class, attribute, etc.
• HTML element will apply to all HTML element that given style.
Ex : input[type=“text”], a, ul li, etc.
• ID is unique in one web page, represented by attribute id=“” in
HTML element.
• Class is NOT unique, can be reuse to any HTML element in one web
page, represent in attribute class=“” in HTML element.
• Class can be multiple in one HTML element using space separator.
• CSS use hash (#) for select id, and dot (.) for select class

Combination CSS Selector
• Nesting :We can nesting selector using space ( ) or (>).
(>) is child selector and space ( ) is descendant selector.
Ex :
.class1 p {
color: blue;
}
.class1 > p {
color: blue;
}
• Sibling :We can select sibling element with (+) or (~).
(+) adjacent sibling selector and (~) general sibling selector.
Ex :
div + p {
color: blue;
}
div ~ p {
background-color: yellow;
}

Advance CSS Selector
• We can select all classes that contains string like :
Ex :
[class*=“bli-"] {
color: blue;
}
• Read more about selector :
http://www.w3schools.com/cssref/css_selectors.asp

Pseudo Class
• Used to define a special state of an element.
Ex :
.link:hover {
text-decoration: underline;
}
.link:active {
}
.link:focus {
}

Pseudo Element
• Used to style specified parts of an element :
Ex :
.class1::before {
content: ‘*’;
}
.class1::after {
content: ‘’;
}
ul li::last-child{
color: blue;
}
tr::nth-of-type(odd){
color: blue;
}

Merging Rule
• We can merging more than one selector that have same rule in one
declaration using comma (,)
Ex :
.class1, class2, class3 {
color: blue;
}

Text Formatting
• For formatting text we can use many css rule like:
font-size, font-weight, font-style, color, text-
decoration, text-align, text-transform, word-wrap, word-
break, line-height, letter-spacing, etc.

Coloring
• Basicly for coloring we can use color and background-color.
color will apply color to its content and background-color will
apply to it’s background.

Spacing
• For spacing element we use margin and padding.
• Margin will affect to it’s outer
• Padding will affect to it’s inner

Positioning
• Here CSS for set positioning :
- Static : normal position
- Relative : relative to its normal position
- Fixed : positioned relative to the viewport, which means it always
stays in the same place even if the page is scrolled
- Absolute : positioned relative to the nearest positioned ancestor
• We can shift position with top, left, bottom, right rule.

Display
• Set how element showing in blocks
Ex : block, inline-block, table, flex

Existence
• For manipulating existence of element we can use :
opacity or display
Ex :
.hidden {
opacity: 0;
}
.show {
opacity: 1;
}
.hidden {
display : none;
}
.show {
display : block;
}
.hidden {
visibility: hidden;
}

Hands On
• Do you have code our latest HTML layout ?
• Lets make over that HTML with a littleCSS touch

Reference
• Slide : http://www.slideshare.net/IrfanMaulana21/journey-to-the-
front-end-world-part2-the-cosmetic
• Github : https://github.com/mazipan/journey-to-the-frontend-world
• Read more about CSS here : http://www.w3schools.com/css/

Contact Me
o Facebook : /mazipanneh
o Twitter : @mazipan
o Linkedin : /in/irfanmaulanamazipan
o Slideshare : /IrfanMaulana21
o Github : mazipan
o Email : mazipanneh@gmail.com
o Blog : mazipanneh , mazipan.github.io

Journey To The Front End World - Part2 - The Cosmetic

More Related Content

What's hot

Viewers also liked

Similar to Journey To The Front End World - Part2 - The Cosmetic

More from Irfan Maulana

Recently uploaded

Journey To The Front End World - Part2 - The Cosmetic