CSS Basics   Leave a comment

Below are the basic types of CSS tags.

<style type="text/css">
/* tag selector */
p {
	color: #505050;
	font-size: 1em;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	margin-left: 100px;
}

/* tag selector group */
h1,h2,h3 {
	color: #BD8100;
	font-family: Baskerville, "Palatino Linotype", Times, serif;
	border-top: 2px solid #86A100;
	padding-top: 7px;
	padding-left: 100px;
}
/* class selector - e.x. <p class="note"> */
.note {
	color: #333;
	border: 2px dashed #BD8110;
	background-color: #FBF8A9;
	margin-top: 25px;
	margin-bottom: 35px;
	padding: 20px;
}

/* descendent selector - applies to the <strong> tag within a that containing class="note" e.x. <p class="note"><strong>NOTE:</strong> */
.note strong {
	color: #FC6512
}

/* id selector - e.x. <body id="article">*/
#article {
	background-color: #FDF8AB;
	background-image: url(images/bg_page.png);
	background-repeat: repeat-y;
	background-position: center top;
	padding: 0;
	margin: 0 auto;
	width: 760px;
}

/* adjacent sibling selector - applies this formatting to only the first (+) paragraph after the <h1> tag */

h1+p {
	color: #FF6600;
	font-size: 1.2em;
	line-height: 140%;
	margin-top: 20px;
}

</style>
Advertisements

Posted October 17, 2013 by javasavy in Programming

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: