introcssandhtml.notebook february 02, 2015 · 2015-02-02 · introcssandhtml.notebook 2 february...

introCSSandHTML.notebook

1

February 02, 2015

I am starting to include style in my pages using Cascading Style Sheets (CSS).


2

February 02, 2015

This page uses two types of style. The styleembedded in the head tag and the style embedded within tags in the body (not usually the preferred approach).

To embed in the head I use the style tag and specify that the type="text/css" and when I am finished with the style, I close it. Within the style I am only dealing with the body in this example so I write body as the tag I want to style. Then within curly bracesI write the property and the color I want to use for the properties. Properites have a colon, then the value and end with the semicolon.

Note that style within the body tags start out withstyle = and enclose the property and values in quotes.


3

February 02, 2015

Notice there are four <h2> tags that I styledifferently. The first one has no style. The second one is aligned to the center and the third is aligned to the left while the fourth is aligned to the right.Align to the left is the default if no textalign isstated.


4

February 02, 2015

There are three divisions. One just gives afont size and the other two give a font size anda color with a semicolon between the twoelements of the style. It is a good idea to endwith a semicolon as well, but that is notrequired.

Note that I have done color using the word for thatcolor and also using the hex code for the color.


5

February 02, 2015

This allows you to select a color and use it as a style. You canuse either the color name or the hex value.


6

February 02, 2015

Here I style the h1 header in the style inthe head instead of embedding it in the<h1> tag in the body.


7

February 02, 2015

In this one, the style is all in the head section of the page. See the code on the next slide.


8

February 02, 2015

All <h2> will be aligned to the right.

All paragraphs (tag <p>) will be 18pt andhave a color of #00dd00.All divisions will have a font size of 16pt and will be brown.

Note this is the way of writing the break tag <br /> in XHTML. Clearly I copied and pasted to this page in HTML5, but it works!


9

February 02, 2015


10

February 02, 2015

This uses style prior to CSS not the way things should be done today.

The bgcolor and text color are embedded in the body tag.

The h2 tags have align inside the tag to make the alignment and in one case there is instead a separate center tag which has been depricated and definitely should not be used.The font tags specify a size and a color with the font and are stand alone tags. You will no longer see those.All of this needs to be done with CSS.


11

February 02, 2015

This show three different ways you can docolor. All except the one that says redrely on the fact that there are threeparts to a color: RGB which stands forred, green and blue.The first one is the hex and it usesFF for red meaning full red and 00for both green and blue meaning nogreen or blue.Hex has numbers from FF to 00. TheFF stands for 255. In the thirdexample we see rgb(255,0,0) whichis the decimal way of expressing thecolor. The FF in hex equals the 255in decimal.The fourth way uses percent and gives100% to red and 0% to green and blue.My experience is that the first twoare most commonly used and the fourthone is rarely used.


12

February 02, 2015

I have set up two horizontal lineson my page and styledthem in the style in the head.


13

February 02, 2015

Another horizontal line example.


14

February 02, 2015

This time I put the style in the <hr> tags in the body.

Note the different ways that border is handled. In one I talk about border and listits elements and in the other I specifywhich is which, the width, the style and the color.Next we will look at border specs and then look at these specifications done in the style in the head.

Note there is one <hr> that is not styled.


15

February 02, 2015

continued on next slide


16

February 02, 2015


17

February 02, 2015

I suggest going to this page and reading more about how borders can be handled.


18

February 02, 2015

All the <hr> will be styled the same way.Notice that border has the width, the styleand the color all as values of border. In the next slide, I will break them out individually.


19

February 02, 2015

All the elements of the border are doneseparately.

introcssandhtml.notebook february 02, 2015 · 2015-02-02 · introcssandhtml.notebook 2 february...

Documents