kdipietro’s gists

kdipietro / index.html

Created April 14, 2013 23:31

A CodePen by kdipietro. CSS Backgrounds Example

	<!--YOU MAY ADJUST THE CODE FOR YOUR OWN TINKERING KNOWLEDGE, BUT DO NOT CLICK SAVE! -->
	<body>
	<h1>CSS Backgrounds</h1>
	<p id="p1">This is an example of background image positioning with CSS.</p>
	<p id="p1">What we have done here is linked to a background image from an image hosting site, and told the webpage how to position the image.</p>
	<p id="p1">Notice that as we scroll down, the background image stays fixed in position, because of the "background-attachment" attribute.</p>
	<p>.</p>
	<p>.</p>
	<p>.</p>
	<p>.</p>

kdipietro / index.html

Created April 7, 2013 03:37

A CodePen by kdipietro. CSS "selector" Demo. - A quick demonstration of different types of selectors and how to call them from your HTML file.

	<head>
	<title>CSS Selector Demo</title>
	</head>
	<body>
	<div>

	<p1>Here we can see that the body tag calls to the body selector in the CSS sheet. This makes our background black on the entire page</p1>

	<p1>Here we can see that the custom made p1 tag calls to the p1 selector in the CSS sheet. This makes our font light grey in color, and in Futura.</p1>

kdipietro / index.html

Created April 7, 2013 03:36

A CodePen by kdipietro. CSS "selector" Demo. - A quick demonstration of different types of selectors and how to call them from your HTML file.

	<body>
	<div>

	<p1>Here we can see that the body tag calls to the body selector in the CSS sheet. This makes our background black on the entire page</p1>

	<p1>Here we can see that the custom made p1 tag calls to the p1 selector in the CSS sheet. This makes our font light grey in color, and in Futura.</p1>

	<p1>We can see that the paragraphs within this div container are not affected because there is no ID attribute in the opening div tag, thus it is not applying any styling properties. In this case the div tags do not even need to be here.</p1>

	</div>

kdipietro / index.html

Last active December 15, 2015 21:49

A CodePen by kdipietro. Linking Your HTML to CSS - In this snippet, we see how to link our stylesheet.css files to our HTML file.

	<!DOCTYPE HTML>
	<HTML>
	<Head>
	<Title>Linking Your CSS Stylesheet</Title>
	<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
	</Head>


	<!-- ABOVE IS AN EXAMPLE OF THE SYNTAX YOU NEED TO LINK TO A CSS FILE. BELOW IS A DESCRIPTION OF THE ATTRIBUTES WITHIN THE TAG. --->

kdipietro / index.html

Created April 7, 2013 00:34

A CodePen by kdipietro.

	<body>
	<div id="csstest">
	This text should modified by CSS.
	</div>
	And this text should not.
	</body>

kdipietro / index.html

Created April 7, 2013 00:31

A CodePen by kdipietro. Linking Your HTML to CSS - In this snippet, we see how to link our stylesheet.css files to our HTML file.

	<!DOCTYPE HTML>
	<HTML>
	<Head>
	<Title>Linking Your CSS Stylesheet</Title>
	<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
	</Head>


	<!-- ABOVE IS AN EXAMPLE OF THE SYNTAX YOU NEED TO LINK TO A CSS FILE. BELOW IS A DESCRIPTION OF THE ATTRIBUTES WITHIN THE TAG. --->

kdipietro / index.html

Created April 7, 2013 00:30

A CodePen by kdipietro. Linking Your HTML to CSS - In this snippet, we see how to link our stylesheet.css files to our HTML file.

	<!DOCTYPE HTML>
	<HTML>
	<Head>
	<Title>Linking Your CSS Stylesheet</Title>
	<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
	</Head>


	<!-- ABOVE IS AN EXAMPLE OF THE SYNTAX YOU NEED TO LINK TO A CSS FILE. BELOW IS A DESCRIPTION OF THE ATTRIBUTES WITHIN THE TAG. --->