Beginning HTML and CSS

Class 2

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

Anatomy of an HTML element

Attribute-Value Pairs are used to tell the browser more information about a particular html element.

  • Attribute
    • A set collection of terms we can use to tell the browser what type of information we are giving it.
    • Ex: class, id, language, style, identity, source
  • Value
    • The actual information we are giving the browser, as associated with the attribute.
    • Values must be contained inside quotation marks.
<div id="copyright">© GDI 2013</div>
<img src="my_picture.jpg" />
<a href="http://girldevelopit.com">GDI</a>

Element: Link

The link element is the tag <a>link text</a>

On its own, it doesn't do much. For that link to take the user somewhere when they click on it, we need to provide the browser with more information using attributes.

  • Attribute: href. The value tells the browser where the file is that the browser should show the user next.
  • Attribute: title. The title attribute contains text describing the link (accessibility)
<a href="http://www.girldevelopit.com" title="GDI Homepage">
  GDI
</a>

GDI

Link Attributes

There are more attributes to customize a link's behavior:

To open the link in a new tab, use the target attribute with the value _blank.


<a href="home.html" target="_blank">Link Text</a>


To have the link launch the user's mail program and open a new email to a specific address, update the href value.


<a href="mailto:info@girldevelopit.com">E-mail us!</a>

Element: Image

Like links, images use attribute/value pairs to provide necessary information to the browser.

  • Tag: <img>
  • Src attribute: where should the browser go to get the image file
  • Alt attribute: Text describing the link. This shows up if the image file isn't found and is an accessibility feature.

<img src="https://www.girldevelopit.com/assets/gdi-logo.png" 
     alt="Girl Develop It Logo">
Girl Develop It Logo

* Notice: This tag is our first example of a stand-alone or "self-closing" element.

Paths: Giving The Browser Directions

For elements like links and images, we need to give the browser paths to files. For a link, it's a path to another website page. For images, it's a path to an image file.

We can either include those files in our own website or we can tell the browser to access those files from outside of our website.

Relative Paths: files must be included in our website.

Absolute Paths: files can be on another site. Can also use absolute paths for files within our own site, but generally shouldn't.

Relative Paths

Relative paths tell the browser where a file is by describing that file's location relative to the file the browser is currently reading code from.

For example, if we want to tell the browser how to get to a file filename.png in our /images directory, and we're writing that instruction in our index.html file, we would give it a path of: images/filename.png

That tells the browser - look for a directory named "images", then go inside of it and grab the file "filename.png"

If we were to rearrange our website, like changing the name of our "images" directory, or placing all of our .html files into their own directory, we would have to rewrite all those paths.

Absolute Paths

Absolute paths tell the browser where a file is by using that file's actual location on the internet. We use this for external resources, but can use absolute paths to link to resources within your own website.

If we want to use the Girl Develop It logo from the GDI website, we would give the browser the following path: "https://www.girldevelopit.com/assets/gdi-logo-a3d9fa0d479a3951ad642db0bd12f310.png".

No matter what website we put that in, no matter where in that website it goes, the path will always be the same.

But the browser has to go out to a server to get that file, which takes more time that getting a file that is part of your website.

Relative vs. Absolute paths for links & images

  • Relative
    • Change depending upon the page the link is on.
      • Links within the same directory need no path information. "filename.jpg"
      • Subdirectories are listed without preceding slashes. "images/filename.jpg"
  • Absolute
    • Refer to a specific location of a file, including the domain. "http://www.girldevelopit.com/chapters/detroit"
    • Typically used when pointing to a link that is not within your own domain.

Let's Develop It

Make some more updates to your site, in the index.html file

  1. Add links that open in the same window, a new window and link to an e-mail address.
  2. Take an image from your computer, or download one from the internet, and save it to your /images folder for your site.
  3. Using a relative path, add that image to your site.
  4. Find another image on the internet and add it to your page using an absolute path (hint: do not save this one to your /images directory)

As always, save frequently and keep refreshing Chrome at each step to catch errors early.

Comments

Comments are not displayed by the browser. They are visible when you view source from the browser.

<!-- Comment goes here -->

Comments organize your code into sections to make it more readable. They can also be used to 'comment out' large chunks of code to hide it from the browser.


<!-- Beginning of header -->
  <div id="header">Header Content </div>
<!-- End of header -->

<!--
 <ol>
    <li>List Item</li>
    <li>Another List Item</li>
 </ol>
-->
					

Character codes

There are character codes for many different characters in many different languages

  • Delta: &delta; δ
  • Copyright symbol: &copy; ©
  • Grave: &grave; `
  • An grave a: &agrave; à
  • A full list is available at htmlandcssbook.com

Let's Develop It!

  1. Add a copyright statement, with the proper copyright symbol, to the bottom of your site
  2. Find an element in your page and add a comment above it stating how you would like to style it when we learn CSS next week.

Ex:


  <!-- Make this h1 content red and underlined -->
  <h1>This is a header!</h1>
	

Anatomy of a website

A website is made up of three components: your Content, the Structure, and the Presentation.

  • The actual information you want on your site is the Content

  • Putting that content into an HTML <p> element because it is a paragraph is Structure

  • Making the font of that paragraph blue and 18pt is Presentation

For the rest of today's class, we'll focus on CSS - the presentation of your site

CSS: What is it?

CSS = Cascading Style Sheets

CSS is a "style sheet language" that lets you style the elements on your page.

CSS works in conjunction with HTML, but is not HTML itself.

CSS: What can it do?

All colored text, position, and size

CSS: What does it look like?

Connecting CSS to HTML: Linked

For this class, CSS is included in a separate file (styles.css) from our html. The browser is reading the HTML file, so we need to include an instrution in index.html that tells the browser to use our styles.css file as well.

<head>
  <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>

You need to tell the browser what it is looking for, and where to find it.

Let's develop it

NOTE: We are still working on the files from last week

  1. In SublimeText, open styles/styles.css
  2. Add the following code to the file, and save:
     body {
      background: purple;
      color: orange;
    }
  3. In Sublime Text, open index.html and add a link to styles.css in the <head>
    <head>
      <link rel="stylesheet" type="text/css" href="styles/styles.css">
    </head>
  4. Open index.html in Chrome to see your changes

Finished early? Google "css styles" and see if there are other things you can do to your page!

CSS Syntax vs HTML Syntax

"Syntax" is the rules of how we express ourselves in a language. In English, this is grammar and spelling. In HTML, it's elements and tags.

In CSS, we also need to communicate instructions to the browser in a language it can understand. We use a different syntax, because it is a different language.

CSS Syntax vs HTML Syntax

In HTML, our tags were organized around content and how it should be structured.

In CSS, our blocks of code are visual units - a "sentence" that says how a particular thing should look.

This "sentence" is called a CSS rule

CSS Syntax: The CSS Rule

The CSS Rule

A block of CSS code is a rule.

The rule starts with a selector.

It has sets of properties and values.

A property-value pair is a declaration.

CSS Syntax:

Selector: We have to tell the browser how to connect the CSS to your HTML. The selector tells the browser what element(s) in your site the style should apply to.

Declarations: Property and value of style you plan use on HTML element.

Declarations end with a semicolon

Groups of declarations are surrounded by curly brackets.

selector {
  property: value;
  property: value;
  property: value;
}

CSS Properties

Many CSS properties have self-explanatory names:

  • background-color
  • font-family
  • font-size
  • color
  • width
  • height

Comprehensive list of all CSS properties

CSS Selector: Element

The element selector allows you to apply a particular style or styles to all elements of a specific type.


p {
  property: value;
}

Selects all paragraph elements.




img {
  property: value;
}

Selects all image elements.

Property Values

Each property can have one or more comma separated values.

A property is the name of the style you want to apply to the selector, and the value is the actual version of that style you want applied.

The following rule gives all paragraphs text that is white and a background color of red.

p{
  color: white;
  background-color: red;
}

 Just like this!

Property: Background-color

The background-color property changes the color of the background.

p {
  background-color: black;
  background-color: #000000;
  background-color: rgb(0,0,0);
}

Colors can be expressed as hexadecimal values, rgb values, or as human-readable names (from an approved list of color names):

The 17 standard colors are:
aqua, black, blue, fuchsia, gray/grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow (black background added solely for readability).

Property: Color

The color property changes the color of the text.

p {
  color: #ff0000;
  color: rgb(255, 0, 0);
  color: red;
}

Let's develop it

  1. Open up your styles.css file again in Sublime Text
  2. Create at least 3 new CSS rules in your styles.css file:
    • Assign a background color to an element
    • Assign a text color to an element
    • Assign *both* to another element
  3. Open the index.html file in Chrome and see what happens!
  4. Finished early? Google "css styles" and see if there are other things you can do to your page!

CSS Selector: Position

  • Like the Element selector we just learned about, "positioning" is another way to target HTML elements.
  • Adding in the element's position gives us more control over what parts of our web page get a style applied to them.
  • Using an element selector, you can target all <em> elements in your page.
  • By using positioning you can target ONLY the <em> elements that are in a paragraph, so <em> used in a heading can have a different style.

CSS Selector: Position

p em {
  color: yellow;
}

p em tells the browser to look for all <p> elements, then each time it sees a paragraph element to look inside of it for an <em> element. Only those <em> elements will then have the following style applied to it.


<p>This is <em>important</em>.</p>

<h4>This is not so <em>important</em>.</h4>

This is important.

This is not so important.

Property: Text-Decoration

The text-decoration property allows you to assign various features to text content.

h4 {
  text-decoration: underline;
}

h5 {
  text-decoration: line-through;
}

p {
  text-decoration: overline;
}

<h4>This is the underline</h4>
<h5>This is the line-through</h5>
<p>This is the overline</p>

Property: Text-Decoration


This is the underline


This is the line-through

This is the overline

Let's develop it

  1. Open up your styles.css file again in Sublime Text
  2. Add an <em> tag to one of your headlines, and give it a text-decoration
  3. Add an <em> tag to a few of your paragraphs, and give it a different text-decoration
  4. There is a fourth value for "text-decoration" - "none". Create another CSS rule for your <a> tags that assigns "none" to the text-decoration property. See what happens!
  5. Add the text-transform and text-align properties to your css. Don't know what they are? Google them!
  6. Don't forget to open index.html in Chrome (or refresh the page if it is already open) to see what you've done!

CSS Syntax: Property Values

Each property can have one or more comma separated values.

p{
color: white;
background-color: red;
font-family: Arial, sans-serif;
}

Property: Font-family

The font-family property defines which font is used.

p {
font-family: "Times New Roman";
font-family: serif;
font-family: "Arial", sans-serif;
}

Specific font name

Generic name

Comma-separated list

Property: Font-size

The font-size property specifies the size of the font.

p {
font-size: 12px;
font-size: 1.5em;
font-size: 100%;
}

Pixels

"em"

Percentage

Property: Fonts (shorthand)

p {
font-style: italic;
font-weight: bold;
font-size: 10px;
font-family: sans-serif;
}
OR
p {
font: italic bold 10px sans-serif;
}

CSS Concepts: Cascading

Styles "cascade" down until changed

p{
  color:blue;
  font-family: 'Helvetica';
  font-size: 24px;
}
.red{
  color:red;
}
#special{
  font-family: Times;
  font-size: 44px;
}
<p>Paragraph 1</p>
<p class="red">Paragraph 2</p>
<p class="red" id="special">Paragraph 3</p>

Paragraph 1

Paragraph 2

Paragraph 3

Let's Develop It

  1. Use our new propery styles to update your page
  2. Play with the cascade by adding a rule for the <body> tag at the very top of your .css file. In this rule, set a property that you have used in another rule, but give it a different value.
  3. Open/refresh your html file in Chrome - see which elements are changed by your new CSS rule, and which aren't.

HTML Syntax: Linking CSS to HTML

We have done this entire class using an external style sheet, but there are actually three ways to apply CSS to your HTML:

  1. Inline CSS
  2. Embedded CSS
  3. External Stylesheet

While we won't use the other two methods in this class, it is important that you know they exist and what they look like.

Connecting CSS to HTML: Inline


<p style="color:red; font-size:18px;">
  Some text.
</p>

Uses the HTML attribute style.

Difficult to use in large projects

Not preferred.

Connecting CSS to HTML: Embedded

<head>
  <style type="text/css">
    p {
      color: blue;
      font-size: 12px;
    }
  </style>
</head>

Inside <head> element.

Uses <style> tag.

Can only be used in one html file

Questions?

?