CSS

CSS intro

What is CSS for?

Provide a relatively easy way to change how a group of HTML pages look like.

Each CSS rule is a combination of a selector that selects to which specific element the rule applies to. (for example the a element within a p element that is in the "news" class.)

An attribute (for example color).

And a values for that attribute. (For example red.)

p.news a {
  color: red;
}

How to add CSS to an HTML document?

Inline style attribute
In the <head> tag or in the <body> of the HTML
In a separate file using <link>

Inline style attribute

<h1 style="color: red">This is a red H1 element</h1>

In order to see this, save the code in a file with .html extension and open it with a browser.

In the head or body of the HTML

<style>
h1 {
  color: red;
}
</style>


<h1>This is a red H1 element</h1>

External stylesheet included with a link

<link href="external.css" rel="stylesheet">

<h1>This is a red H1 element</h1>

h1 {
  color: red;
}

In most cases people place the link tag inside the head tag, but it also works outside of it.

background

selector {
   background-color: #FFFFFF;
   background-image: url("path/to/image.png") | none;
   background-repeat: repeat | no-repeat | repeat-x | repeat-y;

   background: #FFFFFF none;
}

Learn layout

Learn layout here! inspired the following pages.

No layout


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

margin: auto

margin: auto
width
max-width

<style>
#main {
   /* width: 600px; */
   max-width: 600px;
   margin: auto;
}
</style>

<div id="main">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

box-sizing

box-sizing

<style>
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
div {
    height: 200px;
    border: solid;
    background-color: #5D5FD4;

}
#small {
    padding: 2px;
    margin: 20px auto;
    width: 600px;
}
#big {
    padding: 20px;
    margin: 50px auto;
    width: 600px;
}
</style>

<div id="small">
</div>

<div id="big">
</div>

display

display
block
inline
none

The default display property of div, p , form, header, footer, section, and li is 'block'. The default display property of span and a is 'inline'.

position

position
static
relative
fixed
absolute
static - the default = has no position
relative - it is relative to where it should be if it was static. The relativity is set by top/left/right/bottom

boxes using div

Some text

<div id="w">
  <div id="a">
  Title a<br>
  <button>a 1</button>
  </div>
  <div id="b">
  Title b<br>
  <button>b 1</button>
  </div>
</div>

<style>
#a {
  background-color: red;
  height: 40px;
}
#b {
  background-color: blue;
}

#w {
  background-color: green;
  border: solid 1px;
  padding: 5px;
}
</style>

Resources

<!DOCTYPE html>
<head>
	<title>Creating a modal window with HTML5 &amp; CSS3</title>
	
<!-- source: http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html -->
	<style>
	.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

	.modalDialog:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 400px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}

	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close:hover { background: #00d9ff; }
	</style>
</head>

<body>

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
	<div>
		<a href="#close" title="Close" class="close">X</a>
		<h2>Modal Box</h2>
		<p>This is a sample modal box that can be created using the powers of CSS3.</p>
		<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
	</div>
</div>

</body>
</html>

source: http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html

Keyboard shortcuts

CSS - Cascading StyleSheet