CSS and JS Lab

Select, Position, et cetera

Some reference for later el and el2 just denote any two element tagnames

Selector	Use
*	selects all
#name	selects by id
.name	selects by class
`el el2`	juxtapositon of two elements selects all decendents of that type
`el + el2`	addition selects the first `el2` following the `el`
`el > el2`	`el` greater than `el2` selects the immediate children of type `el2` but not grandchilren
`el ~ el2`	just selects all of the `el2` tags following an `el`
`el:active`	if currently held down
`el:hover`	if hovering
`el:clicked`	if clicked
`el:not(el2)`	select all except `el2`
`el:nth-child(num)`	selects the child element of `el` that is some `num` levels down. `num` can also be `even` or `odd`

Better References

Designing Tools

Exercises

Ex_1

<div id="listContainer">
	<ul id="myList">
		<li>
			Quisque eget nunc euismod, sollicitudin lacus et, varius diam.
		</li>
		
		<li>
			Aenean a arcu posuere, lobortis turpis et, ultrices odio.
		</li>
		
		<li>
			Ut rutrum enim facilisis dui sagittis tempus.
		</li>
		
		<li>
			Praesent adipiscing elit vel magna iaculis lobortis.
		</li>
		
		<li>
			Fusce feugiat est ac lectus rhoncus vehicula.
			Donec volutpat orci ut congue cursus.
		</li>
	</ul>
</div>

Directions:

Give the div containing the list a padding and a gray background color. Use the margin to center it left and right.
Give the list a white background color
Shade the alternating the 'backgroundcolor on eachli` from white to a dark gray

Ex_2

COPY THIS HTML

	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="utf-8">
			<title>Page Layout with HTML DIVs</title>
			<!-- external CSS link -->
			<link rel="stylesheet" href="css/reset.css">
			<link rel="stylesheet" href="css/style.css">
		</head>
		<body>
			<div id="container">
				<div id="header">
					<h1>HTML &amp; CSS</h1>
				</div><!-- #header -->
				<div id="main">
					<h2>DIVs</h2>
					<p>Simply put, the DIV is used to divide our page into sections.</p>
					<h3>Additional Definitions</h3>
					
					<blockquote>"The Document Division HTML element is generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang."<br> - <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/div" target="_blank">MDN</a></blockquote>
					<blockquote>"A DIV is a block level container that you can use to group sections of block level content together. You should only use these elements when there isn't a more appropriate, semantic element to use for marking up content. Marking up paragraphs and headings all with DIVs is a terrible thing to do, as although it might look ok, the page will be inaccessible to those using screen readers"<br>  - <a href="http://www.w3.org/community/webed/wiki/HTML_structural_elements#Structuring_a_page_with_HTML_4" target="_blank">W3C</a></blockquote>
				</div><!-- #main -->
				<div id="footer">
					 &copy; 2012 - GA
				</div><!-- #footer -->
			</div><!-- #container -->
		</body>
	</html>

Style the header, footer, body, container, main, and all other tags in the html. Should look presentable and show a clear sense of a basiclayout.

Ex_3

CSS & JS

Create a nav bar that's either on the top, left, or right of the page. Choose your positioning, but at the least it should contain a link to the following:

'/home'
'/about'
'/contact'
'/posts'

You should add javascript to put an 'active' class to the most recently clicked nav element. Fill free to integrate this into your layout from exercise 2.

Ex_4

Modal CSS & JS

 <form method="post" action="#">


            <label>Name</label>
			<input name="name" placeholder="Type Here">

            <label>Email</label>
			<input name="email" type="email" placeholder="Type Here">


            <label>Message</label>
 			<textarea name="message" placeholder="Type Here"></textarea>

            <label>*What is 2+2? (Anti-spam)</label>
  			<input name="human" placeholder="Type Here">

        <input id="submit" name="submit" type="submit" value="Submit">

    </form>

Style the above form:

Should change somehow on focus.
Should be well aligned

Put the form in a div container with class modal. Create a button called Feedback so that when the button is clicked the modal is viewable, but is hidden otherwise. Include the a button in your modal div to make it hidden again.

Notes:

the modal should fit the width and height of the page
the modal should blur out the background, so attempt to give it an opacity.
Use a javascript function to handle toggling the visibility hidden and visible.

OfTheDelmer/css_lab.md