Beginning HTML and CSS

Class 4

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Element: Span

  • Inline element. Each new span is rendered next to each other & only wraps when it reaches the edge of the containing element.
  • Can be used to apply styles to text inline so as not to break the flow of content.

Span

Span is used to apply a specific style inline


.yellow{
  color:yellow;
}

<p>Paragraph with <span class="yellow">yellow</span> text.</p>

Paragraph with span containing yellow text.

Paragraph with

div containing yellow
text.

Pseudo-classes, more CSS for links

Changing the format of a link when you hover over it is accomplished by using pseudo-classes.


CSS pseudo-classes are used to add special effects to some selectors.

Syntax:

selector:pseudo-class
{
  property:value;
}
Example:

a:link
{
  text-decoration: none;
}

Pseudo-classes, more CSS for links


  a:link  {color:#FF0000;} /* unvisited link */
  a:visited {color:#00FF00;} /* visited link */
  a:hover {color:#FF00FF;} /* mouse over link */
  a:active  {color:#0000FF;} /* selected link */

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!

Let's Develop It

  1. Add some links to your page.
  2. Add pseudo-classes for the links so they can have different styles for each state
  3. Add some spans to your content to help highlight text - or individual links.
  4. Add interesting styles to those spans

Specifying Location for Elements

Float

Static Positioning

Absolute Positioning

Relative Positioning

Float

  • "Floating" an element takes it in the normal flow, as far to the left or right of it's containing element as possible.
  • Any other elements, such as paragraphs or lists, will wrap around the floated element.
  • Always specify a width when floating an element, otherwise the element is likely to take up the whole page and not appear floated.
  • You can specify a) whether an element is floated or not, and b) which side it floats on.

Float: Example

Below a <blockquote> is floated to the left, allowing text to wrap around it on the right

example float

Float


.float{
  float:left;
  width:200px;
  background:yellow;
}
Hi, I'm a yellow box with black text.
I like to hang out on the left side.

Not floating element
Not floating element
Not floating element with wrapping Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Using floats to place elements side by side

If you want two block level elements to be side by side, you need to float both elements. One left, and one right.

Clear

  • Clearing tells the element on which side (right, left, both) other elements cannot appear.
  • If you had an image floated left, and you did not want the paragraph to appear next to it, you would add clear: left; to the paragraph.
  • Clearing both sides makes sure floats don’t flow past the clear element.

	clear: right;
	clear: left;
	clear: both;

Clear


	 .float{
		 float:left;
		 width:200px;
		 background:yellow;
	 }
	 .clear-left{
		 clear:left
	 }
 
Div with
class of
.float
Not floating element
Not floating element
Non-floating element with a class of .clear-left

Let's Develop It

  1. Use float to position your header, content, sidebar, and footer
  2. Update the width/height, padding, and margin of those divs if needed.

Static Positioning

HTML elements are positioned static by default.

Static elements are positioned in the normal flow of the page

Static elements ignore top, bottom, right or left property specifications.

Static Positioning

In normal flow, inline elements flow from left to right, wrapping to next line when needed.


<div class="container">
  <img src="images/1.png"/>
  <img src="images/2.png"/>
  <img src="images/3.png"/>
  <img src="images/4.png"/>
  <img src="images/5.png"/>
  <img src="images/6.png"/>
  <img src="images/7.png"/>
  <img src="images/8.png"/>
  <img src="images/9.png"/>
</div>

Static Positioning

In normal flow, block elements flow from top to bottom, each appearing on a new line.


 <p>Greetings</p>
 <div>Hello</div>
 <h4>Hi there!</h4>

Greetings

Hello

Hi there

Relative Positioning

  • Takes the element out of the normal flow, allowing it to be moved to the top, left, right or bottom.
  • Does not affect the elements surrounding it.
  • Makes an element a "positioning context" in which to position other elements relative to it.
  • Relative positioning and absolute positioning are used together.

Relative Positioning

The "relative" value will still put the element in the normal flow, but then offset it according to top/left/right/bottom properties.


.relative{
  position: relative;
  left: 40px;
  top: 90px;
  background-color: aqua;
}

Absolute Positioning

  • Positions element outside of the normal flow.
  • An absolutely positioned element is offset from its container block, positioned relative.
  • Its container block is the first element that has a position other than static.
  • If no such element is found, the container block is <html>.
  • Other elements act as if it's not there.
  • Determined by its offset values in the properties top, bottom, right and left.

Absolute Positioning

The "absolute" value will take the element out of the normal flow and position it in relation to the window (or the closest non-static element).


.absolute {
 position: absolute;
 left: 40px;
 top: 90px;
 background-color: aqua;
}

Absolute & Relative

Absolutely positioned number without relatively positioned container div



Example: Absolute Positioning

Here's an example of an image with a caption absolutely positioned over top of it.


The containing div has a position of relative, and the caption has a position of absolute.

Z-index

Location on the 3rd axis, the z-axis, is determined by the order in which items are listed in the HTML file.


<div>
  <img src="images/1.png" style="position:relative;">
  <img src="images/2.png" style="position:relative; left:-80px;">
  <img src="images/3.png" style="position:relative; left:-180px;">
</div>

Z-Index

When you use positioning to move elements out of the normal flow of content, elements can overlap. You can change the order of overlapping with z-index.

The element with highest z-index goes on top.


<div>
  <img src="images/1.png" style="z-index:2; ...">
  <img src="images/2.png" style="...">
  <img src="images/3.png" style="...">
</div>

Let's Develop it!

  1. Add an image with a caption over it. Rememer: you'll need to use relative and absolute positioning as well as z-index.
  2. Take a look at your code. See if there are things that you would do differently now that we're through all the main course content. Make changes for readability, formatting, etc. We call this refactoring

What Next?

You can continue learning with GDI-Columbus.

Classes:

  1. Intermediate HTML/CSS - HTML5
  2. Javascript
  3. PHP or other languages as available


Community:

Code & Coffee

Hack Nights

• GDI Columbus Slack

What Next?

There are also many online resources, for free and for fees:

CodePen.io

CodeCademy

Code School

Mozilla Developer Network Learn

MDN Docs

Questions?

?