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 a website

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

The "stuff" in your site: Content
+ HTML: Structure
+ CSS: Presentation
= Your Website

A website is a way to present your content to the world, using HTML and CSS to structure that content & make it look good.

In 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

<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 in the same index.html file and directory structure from last week

  1. Open a new file in Sublime Text. Save it to your "styles" folder, and name it "styles.css".
  2. Add the following code to the file, and save:
     body {
      color: purple;
    }
  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
  5. 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 is used to apply styles (appearance) to a webpage, instead of structure. So our syntax is now organized around visual concepts instead of content. (What??)

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

CSS Syntax: The CSS Rule

selector {
  property: value;
}

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: The CSS Selector

The CSS Selector tells the browswer what "thing" on your site you plan to apply a style to.

The CSS Rule

CSS Syntax: The CSS Declaration

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

Declarations end with a semicolon

Declaration groups 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

Selector: Element


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

Just like the Element selector we learned about, "positioning" is another way to target HTML elements.

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

However, if you add in 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 should 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 Selector: Class

A class is another way of targeting parts of your HTML so that you can assign styles to them.

With a class, you no longer have to assign a style to all elements of the same type - you have more control over where a style is applied.

Unlike the Element selector, however, use of the Class selector requires making a change to your HTML as well as the CSS.

The CSS Rule you give a class selector to is applied to any HTML elements that you assign that same class to: they don't have to all be the same type of element.

CSS Selector: Class

.warning {
  color: red;
}

Selects all elements with a class of "warning".



<p class="warning">Run away!</p>
<h3 class="warning">No, really. RUN AWAY!<h3>


Run away!

No, really. RUN AWAY!

CSS Selector and HTML Attribute: Class

HTML Attribute:

  • Add the "class" attribute to all HTML elements in our page that we want targeted for a particular CSS rule.
  • The value of the "class" attribute is the class name.
  • Just like other attribute-value pairs, the syntax is: class="className"


CSS Selector:

  • In the selector, we tell the browser that the selector is a class by starting with a "."
  • This is followed immediately by the class name. The class name is case sensitive - it must match the value we gave to the "class" attribute in our HTML.

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;
}

Let's develop it

  1. Open up your styles.css and index.html files again in Sublime Text
  2. Add a few different class attributes and values to some elements in your HTML page. Reuse some classes!
  3. Create rules for those classes in your .css file. Don't forget - spelling and case matter.
  4. Use our 5 new font properties to change the look of your text through those classes. These slides don't include all the values for the font properties - Google what you don't know.
  5. 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 Selector: ID

An ID is another way of targeting a part of your HTML so that you can assign styles to it.

With an ID, you can target a specific HTML element, instead of all HTML elements of a particualr type.

Like the Class selector, using an ID requires making a change to your HTML as well as your CSS.

Like a Class, the CSS Rule associated with your ID is applied to the element in your HTML that has that same ID.

Unlike a Class, an ID can only be used once on an HTML page.

CSS Selector: ID


#footer {
  background-color: orange;
}

Selects all elements with an id of "footer".




<p id="footer">Copyright 2015</p>

Copyright 2015

CSS Selector and HTML Attribute: ID

HTML Attribute:

  • Add the "id" attribute to the single HTML element in our page that we want targeted for the CSS rule.
  • The value of the "id" attribute is the ID name.
  • Just like other attribute-value pairs, the HTML syntax is: id="idName"


CSS Selector:

  • In the selector, we tell the browser that the selector is an ID by starting with a "#"
  • This is followed immediately by the ID name. The ID name is case sensitive, and spelling counts. It must match the value we gave to the "id" attribute in our HTML.

IDs vs. Classes

ID -- Should only apply to one element on a webpage. I.E. A webpage only has one footer.

The "#" is how you tell the browser that "this is an id."

Class -- Many elements can have the same class. I.E. There can be many warnings on one webpage.

The "." is how you tell the browser that "this is a class name."

CSS Syntax: Properties

So far we've looked at properties that were fairly simple, with only a few values.

Now we'll look at a CSS property family that has much more flexibility in the number of values, including some location information!

CSS Properties: Borders

You can specify each property separately...

#myID {
  border-width: 10px;
  border-style: dashed;
  border-color: #666666;
}

#myID {
  border: 10px dashed #666666;
}

...or all three together.

CSS Properties: Borders

Borders can be applied to all 4 sides of an element.

CSS allows us to choose which of those sides are styled - we don't have to style them all!


This paragraph has a style of
border:10px dashed #666666;



This paragraph has a style of
border-left:10px solid red;

CSS Properties: Borders

You can also apply different values to each side of a border.


This paragraph has a style of
border-color: red;
border-style: solid;
border-width: 10px  5px  1px  20px;

Border

A solid red border

border: 4px solid #ff0000;


A thick dotted black top border

border-top: 6px dotted #000000;


Two different border styles

border-top: 4px solid #ff0000;
border-bottom: 6px dotted #000000;

Let's develop it

  1. In your styles.css and index.html files ...
  2. Add an ID or two to some elements
  3. Give those elements borders using the ID selector
  4. 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 Concepts

IDs vs Classes

Cascading

CSS Concepts: IDs vs. Classes

ID -- Should only apply to one element on a webpage. I.E. A webpage only has one footer.

The "#" is how you tell the browser that "this is an id."

Class -- Many elements can have the same class. I.E. There can be many warnings on one webpage.

The "." is how you tell the browser that "this is a class name."

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. Add 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.
  2. Open/refresh your html file in Chrome - see which elements are changed by your new CSS rule, and which aren't.
  3. If you have time, now that we've gone over IDs vs Classes again, change how you are using those selectors in your website so they match how they *should* be used

HTML Syntax: Linking CSS to HTML

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

  1. Inline CSS
  2. Embedded CSS

HTML Syntax: Inline CSS

With inline CSS, we're using another HTML attribute-value pair. It just has a more complicated value than we've seen before:

<p style="color:green; background-color:orange;">
  Some content!!
</p>


Some content!!

HTML Syntax: Embedded CSS

Here we take advantage of the <head> section of our page. The styles look the same as in our external style sheet, but they're nested inside of a <style> tag:

<head>
  <style>
    p {
      color:green;
      background-color:orange; }
  </style>
</head>
<body>
  <p>Some content!!</p>
</body>

Some content!!

Connecting CSS to HTML

3 ways

"Inline"

"Embedded"

"External"

Connecting CSS to HTML: Inline

<p style="color:red">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?

?