Nattoise Labs: January 2014

<What is CSS?>

CSS (which stands for Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML.

A style sheet is a file that describes how an HTML file should look. That's it!

* Notes: CSS Level 1, Level 2, Level 3

<CSS In-Line Style Sheet>

For Example:

Hello World!

</div>

<CSS Embedded Style Sheet>

For Example:
<!DOCTYPE html>
<html>
   <head>
       <style>
           p {
               color: purple;
           }
       </style>
       <title>Result</title>
   </head>
   <body>
       <p>Check it out! I'm purple!</p>
   </body>
</html>

<CSS External Style Sheet>

For Example:
<html>
   <head>
       <link href="stylesheet.css" rel="stylesheet" type="text/css"></link>
       <title>Fancy Fonts</title>
   </head>
   <body>
       I'm a paragraph written in red font, but one of my words is <span>blue</span>!<br />

   </body>
</html>

*Notes:
type attribute - should always be equal to "text/css"
rel attribute - file type, should always be equal to "stylesheet"
href attribute - file name or URL link

Because nothing ever goes between<link></link> tags, it's okay to use a single set of <>s to be the openingand closing tags. You do that like so:
<link href="stylesheet.css" rel="stylesheet" type="text/css" />

<CSS syntax - use ; and {}>

A selector (選擇器) can be any HTML element, such as <p>, <img>, or <table>.
A property is an aspect of a selector, such as font-family, color, and font-sizeof the text .
A value is a possible setting for a property, such as color can be red, blue, black, or almost any colour.

Syntax
selector {property1: value1; property2: value2};

selector {
property: value;
}

For Example:
p {
color: green;
}

You need to end each property-value with a semi-colon (;).
Also, don't forget: all property-value pairs for a selector are surrounded by curly braces ({}).

<One Selector, many properties>

For Example:
p {
color: green;
font-family: Garamond;
font-size: 24px;
}

<CSS Comment>

HTML comments look like this:

<!--I'm a comment!-->

CSS comments, on the other hand, look like this:

/*I'm a comment!*/

<Pixels and em>

A pixel is a dot on your computer screen. Specifying font sizes in pixels is great when you want the user to see exactly on their screen what you designed on yours, though it assumes your screens are of similar size.

p{
font-size: 10px;
}

What if the user is using a screen that's a very different size from yours, though (like a smartphone screen)? Enter ems. (Don't confuse these with the <em></em> tags we use for emphasis!)

The font-size unit em is a relative measure
<!DOCTYPE html>
<html>
    <head>
        <title>Result</title>
    </head>
    <body>
        <p style="font-size: 1em">One em!</p>
        <p style="font-size: 0.5em">Half an em!</p>
        <p style="font-size: 2em">TWO EM!</p>
    </body>
</html>

Other units:
px - pixels
em - 1em by default, 2em = 1em x 2
ex - around half height of current font size
% - percentage
in - inch
cm - centimeter
mm - milimeter
pt - points
pc - pica, 1px = 12pt

<Font Color with Hexdecimal>

Hexadecimal counting is base-16. Hex values always start with a pound sign (#), are up to six "digits" long, and are case-insensitive.

For Example:
<h1>I'm maroon!</h1>
<h2>I'm coral!</h2>

h1 {
color: #8B1C62;
}

h2 {
color: #FF7256;
}

*Notes:
font-style: normal, italic, oblique
font-weight: normal, bold, bolder, lighter, 100-900

<Font family>

For Example:
h1{
font-family: serif;
}

h2{
font-family: sans-serif;
}

h3{
font-family: cursive;
}

<Multiple Font-family>

You don't have to jump straight to a default value like cursive or sans-serif: you can tell CSS to try several, going from one to the next if the one you want isn't available.

For Example:
/*Add your CSS below!*/
h1{
    font-family: Times, serif;
}

h2{
    font-family: Verdana, sans-serif;
}

h3{
    font-family: Vivaldi, cursive;
}

You can tell CSS to try several, going from one to the next if the one you want isn't available.

<Formatting Properties - Height and Width - to build a block>

There are three properties you'll need to set values for:

For Example:
div{
    background-color: #cc0000;
    height: 100px;
    width: 100px;
}

*Notes:
min-width
min-height
max-width
max-height

<Border>

The border property in turn supports several values. For example, for a border 2 pixels thick, solid, and red, ...
/*Add your CSS below!*/
td{
    height: 50px;
    border: 1px dashed blue;
}

table{
    border: 1px solid black;
}

*Notes:
border-color
border-style: none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-top-width: think, thin, medium, pixels
border-right-width: think, thin, medium, pixels
border-bottom-width: think, thin, medium, pixels
border-left-width: think, thin, medium, pixels

<Link and text-decoration>

Give your a selector a color of #cc0000 and a text-decoration of none.

/*Add your CSS below!*/
a{
color: #cc0000;
text-decoration: none;
}

<Image border>

img{
    height: 100px;
    width: 300px;
    border: 1px solid #4682b4;
}

<Drawing a button>

div{
    height: 50px;
    width: 120px;
    border-color: #6495ED;
    background-color: #BCD2EE;
    border-radius: 5px;
    margin: auto;
    text-align: center;
}

Your border-style can be any type (dashed, solid, and so on) and you can use any border-width you want. (We like 2px.)

Button position:

margin: auto; is the CSS you use to tell the browser: "Hey! Make sure to set equal margins on each side of this HTML element." When the margins are equal, the object is centered.
text-align: center; is how you center text elements.

*Notes:
background-color
background-image
background-position

<CSS Selector - first-child>

Another useful pseudo-class selector is first-child. It's used to apply styling to only the elements that are the first children of their parents. For instance:

For Example:
p:first-child{
font-family: Cursive;
}

<CSS Selector - nth-child>

You can actually select anychild of an element after the first child with the pseudo-class selector nth-child;
The element that is the child goes before :nth-child; its parent element is the element that contains it.

For Example:
p:first-child{
font-family: Cursive;
}

p:nth-child(2){
font-family: Tahoma;
}

For Example:
<a href="http://www.google.com.hk">Google</a>
<br/>
<a href="http://www.yahoo.com.hk">Yahoo</a>
<br/>
<a href="http://www.apple.com.hk">Apple</a>

a{
text-decoration: none;
}

a:first-child{
color: #CDBE70;
}

a:nth-child(3){
color: #FFC125;
}

<Multiple Selector>

If you have a paragraph inside a div that's inside another div, you can get to it like this:

For Example:
div div p {
color: red;
}

This will style all paragraphs nested inside two divs and will leave all paragraphs that don't meet these criteria alone.

<Grouping Selector>

For Example:
div, p{
text-align: center;
color: green;
margin-left: 20pt;
font-size: 12pt;
}

<Class Selector>

You can give the same styling to different elements, such as an h3 header, a paragraph, a link, and a table.

For Example:

<body>

<h3 class="fancy">Header 3</h3>

<p class="fancy">First Paragraph</p>

</body>

.fancy{

font-family: cursive;

color: violet;

}

<ID Selector>

You can be used to target a specific element.

For Example:
<body>

<h3 class="fancy">Header 3</h3>
<p class="fancy">First Paragraph</p>
<p id="serious">Second Paragraph</p>
</body>

#serious{
font-family: Courier;
color: #8c8c8c;
}

For Example:
<body>

<h3 class="fancy">Header 3</h3>
<p class="fancy">First Paragraph</p>
<p id="serious">Second Paragraph</p>
<p id="third">Third Paragraph</p>
</body>

.fancy{
font-family: cursive;
color: violet;
}

#serious{
font-family: Courier;
color: #8c8c8c;
}

p:nth-child(4){
font-size: 26px;
}

Remember:
Your paragraph is the third paragraph, but the fourth CHILD of body. The h3 counts as the first child!

ID Selector >> Class Selector !!!

<Use ID and Class Selectors>

For Example:
<body>

<div class="friend" id="best_friend">First Div</div>
<div class="family" id="archnemesis">Second Div</div>
<div class="enemy">Third Div</div>
</body>

/*Add your CSS below!*/
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
background-color: red;
border-radius: 100%;
border: 2px solid black;
}

.friend{
border: 2px dashed #008000;
}

.family{
border: 2px dashed #0000ff;
}

.enemy{
border: 2px dashed #FF0000;
}

#best_friend{
background-color: pink;
border: 4px solid #00C957;
}

#archnemesis{
background-color: yellow;
border: 4px solid #CC0000;
}

<CSS Positioning - DISPLAY>

Elements populate the page in what's known as the CSS box model. Each HTML element is like a tiny box or container that holds the pictures and text you specify.

Each HTML element gets its own box to live in. By default, they take up the full width of the page.

We can change all this with the first positioning property we'll learn: the display property. We'll learn about four possible values.

1) block: This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width.
display: block;

2) inline: This makes the element sit on the same line as another element, but without formatting it like a block, but not as blocks: they don't keep their dimensions. It only takes up as much width as it needs (not the whole line).

inline-block: This makes the element a block box, but will allow other elements to sit next to it on the same line.
inline-table:
display: inline;

3) list-item: This makes listed elements with dot.
display: list-item;

4) table: This makes table elements
display: table;
display: table-row;
display: table-cel;

5) none: This makes the element and its content disappear from the page entirely! As you might expect, this prevents the page from displaying the selected element. This removes the selected element from the page entirely, including any children and any content.
display: none;

*Notes:
Our<div>s were block elements by default. And our <div>s all moved onto the same line!

For Example:
display: block;

<Margin, Border, Padding, Content>

The margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other.

The border is the edge of the element. It's what we've been making visible every time we set the borderproperty.

The padding is the spacing between the content and the border. We can adjust this value with CSS to move the border closer to or farther from the content.

The content is the actual "stuff" in the box. If we're talking about a <p>element, the "stuff" is the text of the paragraph.

You'll see abbreviations like TM, TB, and TP in the diagram. These stand for "top margin," "top border," and "top padding." As we'll see, we can adjust the top, right, left, and bottom padding, border, and margin individually.

If you want to specify a particular margin, you can do it like this:

For Example:
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #308014;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 20px;
padding: 40px 40px 40px 40px;
}
or

You can also set an element's margins all at once: you just start from the top margin and go around clockwise (going from top to right to bottom to left). For instance,
margin: 20px 50px 10px 5px;

Give it a top margin of 20px, a right margin of 50px, a bottom margin of 10px, and a left margin of 5px.

<Negative Value>

For Example:

margin-top: 10px;

margin-right: 10px;

margin-bottom: 10px;

margin-left: -20px;

<Float>

For Example:
float: right;

You can think of the HTML page as sort of like a sea, and floating elements as boats on it: all the boats have positions on the sea, and they all see and steer clear of each other.

<Clearing Element>

We sometimes mix large floating elements with non-floating ones, and elements do end up on top of each other.

If you tell an element to clear: left, it will immediately move below any floating elements on the left side of the page; it can also clear elements on the right. If you tell it to clear:both, it will get out of the way of elements floating on the left and right!

<Static by default>

If you don't specify an element's positioning type, it defaults to static. This just means "where the element would normally go." If you don't tell an element how to position itself, it just plunks itself down in the document.

<Absolute positioning>

The first type of positioning is absolute positioning. When an element is set to position: absolute, it's then positioned in relation to the first parent element it has that doesn't have position: static. If there's no such element, the element withposition: absolute gets positioned relative to <html>.

For Example:
<body>
<div id="outer"><div id="inner"></div></div>
</body>

#inner{
position: absolute;
margin-left: 20px;
}

<Relative positioning>

Relative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the defaultstatic positioning.

For Example:
#inner{
position: static;
margin-left: 20px;
}

<Fixed positioning>

Fixed positioning anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past.

postion: value - absolute/relative/static (by default)/fixed

For Example:
#inner{
position: fixed;
margin-left: 20px;
}

<Navigation Bar>

For Example:
<body>
<div id="header">
<div id="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Plans for World Domination</li>
<li>Contact</li> </ul>
</div>
<h2>About Me</h3>
</div>
<div id="left">
...

#navbar {
/*Add your CSS here!*/
position: fixed;
left:50%;
margin-left:-254px;
margin-top: -10px;
}

<Fixing your header: z-index>

The higher it will be "stacked" on the page. Giving your header a z-index of 1 while not giving any of the other elements a z-index ensures that your header will sit "on top of" your other elements and won't get stuck behind them.

For Example:
#header{
border-radius: 5px;
border: 2px dashed red;
height: 30px;
background-color: yellow;
position: fixed;
z-index: 1;
}

<Appendix>

CSS1 Selector

CSS1	Example	Remarks
.class	.test	class selector
#id	#name	ID selector
element	p	HTML element
element, element	div, p	Grouping HTML elements
element element	div div p	Nested HTML elements
:first-letter	p:first-letter	Select the first character of p element
:first-line	p:first-line	Select the first line of p element
:link	a:link	Select the unvisited link
:visited	a:visited	Select the visited link
:active	a:active	Select all active link
:hover	a:hover	Select all link when mouse is hovering on the link

CSS2 Selector

CSS2	Example	Remarks
*	*	Apply for all elements
element>element	div>p	Select all p elements inside div elements 選擇所有父元素是div 元素的p 元素
element+element	div+p	選擇所緊接著div 元素之後的 p 兄弟元素
[attribute]	[count]	Select all elements with count attribute
[attribute=value]	[target=_blank]	Select all elements with "target=_blank" attribute
[attribute~=value]	[title~=flower]	選擇所有元素擁有title 屬性且屬性值包含"flower" 的元素
[attribute\|=value]	[lang\|=en]	選擇所有擁有lang 屬性且屬性值是"en" 開頭的元素
:focus	input:focus	選擇取得焦點的input元素
:first-child	p:first-child	選擇所有是第1 個元素的P 元素
:before	p:before	插入在每一個 p 元素之前的擬元素(pseudo-elements), 這是一個沒有實際名稱或原來並不存在的元素，可以將它視為是一個新元素
:after	p:after	插入在每一個 p 元素之後的擬元素
:lang(value)	p:lang(it)	選擇所有擁有lang 屬性，且屬性值是"it" 開頭的p元素

CSS3 Selector

CSS3	Example	Remarks
element1~element2	p~ul	選擇所有之前是p元素的ul元素
[attribute^=value]	a[src^="https"]
[attribute$=value]	a[src$=".txt"]
[attribute*=value]	a[src*="hinet"]
:first-of-type	p:first-of-type
:last-of-type	p:last-of-type
:only-of-type	p:only-of-type
:only-child	p:only-child
:nth-child(n)	p:nth-child(2)
:nth-last-child(n)	p:nth-last-child(2)
:nth-of-type(n)	p:nth-of-type(2)
:nth-last-of-type(n)	p:nth-last-of-type(2)
:last-child	p:last-child
:root	:root
:empty	p:empty
:enabled	input:enabled
:disabled	input:disabled
:checked	input:checked
:not(selector)	:not(p)
::selection	::selection

<Other CSS3>

text-shadow: 替文字內容加上陰影效果來建立立體字
box-shadow: 在 HTML元素建立3D效果的陰影； Safari 和 Google Chrome 是 -webkit-box-shadow;
border-radius: 建立㘣角方框的顯示效果，Safari 和 Google Chrome 是 -webkit- 字頭； FireFox 則是 -moz-
column-count: 指定多欄版面配置的欄數； Safari 和 Google Chrome 加上 -webkit- 字頭；FireFox 則是 -moz-
column-gap: 指定多欄版面置中，各欄之間的間柜，Safari 和 Google Chrome 加上 -webkit- 字頭；FireFox 則是 -moz-

Nattoise Labs

Friday, January 31, 2014

Study for CSS

My Favourite

About Me