Skip to content

Instantly share code, notes, and snippets.

@OfTheDelmer

OfTheDelmer/css_lab.md

Last active December 24, 2015 12:59
Show Gist options
  • Save OfTheDelmer/6801045 to your computer and use it in GitHub Desktop.
Save OfTheDelmer/6801045 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css_lab.md

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
Copy link
Author 

Exercise 1

    <style>
    div {
        background-color: #ccc;
        padding:50px;
        border: solid 1px black;
    }

    ul {
        background-color: white;
        padding: 50px;
        list-style: none;
    }

    ul li:nth-child(even){
        background-color: #aaa;
    }
</style>

@OfTheDelmer
Copy link
Author

Exercise 2 left to you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment