CSS – basics

CSS

Since I always forget what is what for css selectors, here is a brief overview.

Selectors

Types of selectors:

‘.’, ‘#’ or tagname directly.

Tagname

Use the tag-name directly:

html , body{
	line-height: 1;
	background-color: #ffffff;
    font-family: "Trebuchet MS",Verdana, Arial, Sans-Serif;

Dot ‘.’

With . you refer the css class of the control:

<div class="save-button">
.save-button
{
  padding: 0.5em 0.3em 0.3em 0.3em;
}

Hashmark #

With # you refer the ID of the control:

<div id="mainContainer">
#mainContainer
{
	text-align: left;
	margin-left: 1%;
	width: 95%;
}

Combinations

You can also combine. Eg.

ul#navigation a.active
{
	color: Yellow;
}

 

If you want to target a button – which is an <input type=”submit”> in the html, it can be targeted like this:

input[type=submit]
{
	display: inline-block; 
	padding: 0.2em 0.2em;
	margin: 0.2em 0.2em;
	color: #333;
	background-color: rgb(180,202,213);
	text-decoration: none;
	border: 1px dotted #000; 
}

.