Web programming L4

Style Classes

● are preceded by a period (.). ● define styles that can be applied to any element.

font-weight property

- specifies the "boldness" of text -Possible values are: ● bold ● normal (the default) ● bolder (bolder than bold text) ● lighter (lighter than normal text) -Boldness also can be specified with multiples of 100, from 100 to 900 (e.g., 100, 200, ..., 900). -Text specified as normal is equivalent to 400, and bold text is equivalent to 700

HTML Block and Inline Elements

-Every HTML element has a default display value. -The default display value for most elements is block or inline. -A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). - An inline element does not start on a new line and only takes up as much width as necessary.

font-family property

-specifies the name of the font to use -Generic font families allow authors to specify a type of font instead of a specific font, in case a browser does not support a specific font

Structural elements

<header>Defines a header for a document or section <nav>Defines navigation links <article>Defines an article in a document <section>Defines a section in a document <main>Defines the main content of a document <footer>Defines a footer for a document or section

Example Inline Elements:

<img>, <a>, <b>, <strong>, <small>

Example Block Elements:

<p>, <pre>, <table>, <ul>, <ol>

time Element

<time>2012-01-17</time> ● does not need to be enclosed in a header ● enables you to identify a date, a time or both.

Inline Styles

An inline style declares an individual element's format using the HTML5 attribute style. -How would you change the color of all the paragraphs in your HTML file to red? -Add style attribute to all paragraph elements! Not very efficient

Conflicting Styles

Styles may be defined by a user, an author or a user agent. ● Styles cascade (and hence the term "Cascading Style Sheets"), or flow together, such that the ultimate appearance of elements on a page results from combining styles defined in several ways. ● Styles defined by the user take precedence over styles defined by the user agent. ● Styles defined by authors take precedence over styles defined by the user. Most styles defined for parent elements are also inherited by child (nested) elements.

font-size property

specifies the size used to render the font. ● You can specify a point size or a relative value such as xx-small, x-small, small, smaller, medium, large, larger, x-large and xx-large. ● Relative font-size values are preferred over points, because an author does not know the specific measurements of each client's display. ● Relative values permit more flexible viewing of web pages. ○ For example, users can change font sizes the browser displays for readability

extra credit

use internal styling at top of page or class

● Three ways to connect CSS with HTML

○ Inline Styles - Inside the element's tag (i.e., CSS rules are included in the .html file) ○ Embedded Style Sheets -A separate section in the html file (i.e., CSS rules are included in the .html file) ○ External Style Sheets -A separate file with the .css extions (i.e., CSS rules are NOT included in the .html file)

header Element

● creates a header for this page that contains both text and graphics ● can be used multiple times on a page and can include HTML headings (<h1> through<h6>), navigation, images and logos and more.

figure element

● describes a figure (such as an image, chart or table) in the document so that it could be moved to the side of the page or to another page. <figure> <img src= " " alt= "how to program"(title of img) /> <figcaption><em>hot to program(goes at bottom of image</em></figcaption> </figure>

article Element

● describes standalone content that could potentially be used or distributed elsewhere, such as a news article, forum post or blog entry. ● can nest article elements. ● For example, comments about a magazine may be nested as an article within the magazine article

summary Element (and the details Element)

● displays a right-pointing arrow next to a summary or caption when the document is rendered in a browser ● When clicked, the arrow points downward and reveals the content in the details element.

nav Element

● groups navigation links ● In this example: heading Recent Publications is used, and a ul element with seven li elements link to the corresponding web pages <section id ="1"> <nav> <h1>group of links</h1> <ul> <li><a href="website title"/a></li> <li><a href="website title"/a> </li> </ul> </nav> </section>

figcaption element

● provides a caption for the image in the figure element <figure> <img src= " " alt= "how to program"(title of img) /> <figcaption><em>hot to program(goes at bottom of image</em></figcaption> </figure>

CSS = Cascading Style Sheets

● used to specify the presentation of elements (i.e. style) separately from the structure of the document. ● works in conjunction with HTML, but is not HTML itself. ● CSS validator: jigsaw.w3.org/css-validator/ This tool can help you make sure that your code is correct and will work on CSS3-compliant