Jan. 23, 2017 | Lesson 7 (HTML Essentials)

Now I’ve begun Lesson 7 for HTML Essential Training and here I’m dealing with CSS, or Cascading style sheets. While HTML deals with more structure and organization of pages, CSS handles the appearance and design.

Now, this single lesson did not give me an in-depth look at CSS, rather a quick intro and basic rundown of CSS, which is important to have knowledge with HTML.

To start my basic intro to CSS, I learned about creating inline styles. Most CSS styles are created on sheets then referenced to with the anchor tag, but inline styles is created directly in the HTML file.

In this basic HTML document, I want to change the color of the h2 heading to red, so I create the style in the h2 tag.

screen-shot-2017-01-24-at-8-49-55-pm

While HTML has attributes and values, CSS as their properties and values. The color is the property, red is the value, and the semicolon indicates the line is over.

I went further to change the font style, and instead of being bold, the h2 headings is now normal.

Now, while this is a correct way of applying styles, it isn’t the most efficient way. The problem with inline styles is that if you want all of your h2 headings to have the same style, you would need to go through every h2 heading and apply this. Now you can simply copy and paste, but if you have a client that likes the heading but wants it to be green instead, you would have to go through every heading and change the color to green.

Inline styles do have a place. If you’re going to do an HTML email, inline styles are one of the only ways that you can apply styling to certain email clients. Another way is in scripting. Let’s say your going to build a widget dynamically. A lot of people will in their JavaScript write inline styles that go in to style their specific elements.

Instead of referencing a CSS style in a separate file, it is just as efficient to apply a style element to the head of the HTML document. So in this lesson I’m going to take the style I applied to the h2 heading and move it to the head of the document, that way it can be applied to every h2 heading if I want.

To do this, I first applied a style tag underneath the title then indicated my selector (which tells the browser, or user agent, this is the element, or elements, that I want to style). In this case that is the heading 2, so all I do is type “h2”. Next, I type in my properties, which are grouped together using curly braces “{“. And finally, I type in the same style I used in the h2 tag between my two curly braces.

To show that this style works with all h2 headings, I added another below.

lesson-7-style-element6lesson-7-style-element7

I now can make my CSS styles more selective to only apply to my first h2 heading by applying a class attribute with a value of alert to that particular h2 heading. To make sure my CSS style only applies to this I then delete “h2” then add “.alert”. What that means is that the “.” tells my browser to look for a “class” attribute with the value of “alert”.

I can now also apply this style to the h1 heading by giving it a class attribute with an “alert” value.

lesson-7-style-element12lesson-7-style-element13

This would cause me to be even more descriptive with my selector by adding h2 to tell my browser that I want it to find an h2 that has a class of alert applied to it.

Next, I worked with controlling typography of CSS styles. The HTML file I used already had one CSS style for the body with a width of 70% and a margin of 0 and auto. What these two is essentially center all of content on the page even when I resize the browser.

I then moved onto create a style of the h1 heading starting with the font-family using Georgia font, which is installed on almost every computer out there when it ships. It’s important to use a font that is also on the client machines, but we’ll also use “fall-back” fonts like Times New Roman and then finally “serif”.

I then indicate the font size with 2em. I could use pixels, but 16 pixels looks larger on a desktop than it does on a phone. So using 2em is called a relative unit of measurement saying whatever the default font-size is on the user agent, give me twice that size.

I then tell the browser I want the font-weight to be normal, so it’s no longer bold and finally change the style to italic.

For the paragraph selector I’ve used Arial, Helvetica and sans-serif for the font-family while using 1em in font-size. There are two different properties that I’ve used called line-height and text-align. Line-height is the space between the individual lines like double spacing. For this I used 1.6. In text-align (how the edge of the paragraph should be aligned) I’m using justify. I could also use left align, right align and center.

I can use the margin property to control the spacing of the elements on the page. Here I change the margins to 1em space, 0 space, .4em. This is shorthand notation and margins are set in a clockwise fashion starting at the top. So this is saying that for the top I want 1em, for the left and right I want 0, and for the bottom I want .4em.

One last thing I can do is that if I want all of my font to be the same as what I set the paragraph (Arial, Helvetica, sans-serif). I could take care of this globally by moving all of this to the body, adding a font property. I tell the browser 100% Arial, Helvetica, sans-serif. Now 100% is essentially the same as 1em. I’m saying, give me your default font size. All I would need to do then is delete the “font-family” from paragraph since I no longer need it there.

Aside form controlling the formatting of typography, controlling the color of elements on the page is probably the most common part of basic page styling. So first,I’m going to add a color to the html selector using the property background-color and the value of #777 to get a gray color.

This is called hexadecimal notation. Essentially, color is defined on the screen as RGB (red, green, blue), and you can go from zero to 255 for each of those values.

Next I want to change the background color of the body element, which only has a width of 70% of the entire page (which is the HTML). Instead of a color I could also use a graphic image, but I’m just going to use white. To apply color to things like borders I could use a property “border-bottom” that’s 10px thick, solid, and gold color.

Instead of hexadecimal values for color, I could also use an RGB notation, which is what I used for the h1 heading. To that for the background color I used rgb(44, 45, 140) to get a blue background. since the black text color of the h1 heading is too dark, I want it to be lighter, so I used a color property with a hexadecimal value of #ddd for a light gray.

Finally, I’m working with creating external stylesheets and linking them to the html document to make them “site-wide.” Now, I could continue to adding styles to the head of the document, but this ultimately inefficient. Whenever I make a change to one page, I would have to go to every page and make the same changes for consistency. This way I could make changes to the css and it would change across pages.

To do this I created a new file and save it in the “07_06” folder under the name “styles.css”.

Next, I returned to the html document, select all the css and cut it from the document and paste it to my css file I created.

Now, this takes away all the styles that have been added because I do not actually have a link between the html document and css file yet. To do that I created a link tag that doesn’t need a closing tag. I also needed to add this to “Page Two” document as well so that the css will apply to that as well.

To show that changing anything to styles.css will also apply to both the external.htm and page2.htm, I added style changes to the anchor tags on both documents. By changing the text-decoration to “none” the link will no longer have a hyperlink underline. I also changed the color to red. I also wanted to have a hover style using the selector “a:hover” and changing the color to black.

Advertisements

One thought on “Jan. 23, 2017 | Lesson 7 (HTML Essentials)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s