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 yellow text.

Paragraph with

yellow
text.

Let's Develop It

Let's add some spans to our content to help highlight some text.

Add some interesting styles to those spans


Add some links to your text, too! Add several throughout your 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

Add links to your site.

And add psuedo classes to your style.css file - change how the link reacts to hover, active, etc.

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 boxes flow from left to right, wrapping to next line when needed.


<img src="images/cookie1.png"/>
<img src="images/cookie2.png"/>
<img src="images/cookie3.png"/>
...
<img src="images/cookie2.png"/>
<img src="images/cookie3.png"/>

Static Positioning

In normal flow, block boxes flow from top to bottom, making a new line after every box.


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

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: 80px;
    top: 20px;
    height: 100px;
    background-color: yellow;
  }
Hello, hi!

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).


  .top{
    position: absolute;
    top: -40px;
    right: 10px;
    background-color: yellow
  }

  .bottom{
    position: absolute;
    bottom: -40px;
    left:60px;
    background-color: green
  }
Up here
Down here

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

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.


  .bottom{
    position: absolute;
    bottom: 10px;
    left:60px;
    background-color: yellow;
  }

  .top{
    position: absolute;
    bottom: 15px;
    left:60px;
    background-color: green;
    z-index: 2;
  }
Bottom
Top

Let's Develop it!

Let's add some positioning.

Let's create a div that contains an image and a caption, and position the caption absolutely overtop the image.

Questions?

?