Test 1

html:

CASCADING STYLE SHEETS

INLINE CSS

Inline Cascading Style sheets are written inside an HTML document, directly inside an elements tag using a Cascading Style Sheets property or attribute. Note that the styles must be directly applied to HTML tags and hence there is no need for

the Cascading Style Sheets open and close tags.

This is one of the easiest ways to add CSS to HTML elements by writing them along with them. It is a single element based process i.e, Inline CSS Style.

Here the "style" attribute is used in combination with HTML tags to add CSS values to them. This starts with tag name then a = equal sign then double quotes with values inside them.

So Style: property:value; is the right way to represent Inline CSS style. This can be added to any element HTML tag. And you can add multiple property values within any element. Also dont forget to add semi-colon in

the end otherwise some browsers might not render it all.

Advantage of using Inline CSS

The main advantage of Inline CSSs are:

• They are a single element based.

• Helps in fixing bugs while testing process for design elements

• Better for targeting single elements through Single objects in JavaScript

• Emails are scripted with Inline CSS Style values for all elements.

Disadvantages of using Inline CSS

There are several disadvantages associated with the use of Inline CSS in general.

• Inline CSS Style requires a lot of manual changes so it is not recommended to use within web structure. External CSS with class names is the best way forward for HTML development. For instance, if the web pages are long there can be a

thousand inline elements creating a lot of issues in the process.

• Once written these inline styles cannot be reused anywhere.

• The use of a quotation or blockquotes is not applicable if used the browser interprets it as the end of your style.

• Also, you cant write pseudo-classes style with inline CSS as they are single element based only.

• With Inline CSS you also lose the browser cache benefits.

INTERNAL/EMBEDDED CSS

Internal Cascading Style Sheet is normally embedded in the head section of the HTML document just before the closing head tag and enclosed inside the open and close style tags. It is also usually applied to HTML elements but not

directly.

To embed and apply an Internal Style Sheet:

• Write the CSS open tag i.e.

EXTERNAL CSS

External Cascading Style Sheet is a Style Sheet saved as a style sheet document. This implies that it is saved as a .css file. The style sheets call-up link that will call upon the external CSS is then placed at the head section of

the HTML

document and its properties will then be applied to all HTML tags in the web page that has a defined class and div id definition included in the external style sheet file.

CSS Selectors

• The CSS element Selector

• The CSS id Selector

• The CSS class Selector

• The CSS Universal Selector

The CSS element Selector

The element selector selects HTML elements based on the element name.

Example

Here, all 
 elements on the page will be center-aligned, with a red text color:

p {

text-align: center;

color: red;

}

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Note: An id name cannot start with a number!

Example

The CSS rule below will be applied to the HTML element with id="para1":

#para1 {

text-align: center;

color: red;

}

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example

In this example all HTML elements with class="center" will be red and center-aligned:

.center {

text-align: center;

color: red;

}

You can also specify that only specific HTML elements should be affected by a class.

Example

In this example only 
 elements with class="center" will be red and center-aligned:

p.center {

text-align: center;

color: red;

}

HTML elements can also refer to more than one class.

Example

In this example the 
 element will be styled according to class="center" and to class="large":

This paragraph refers to two classes.

Note: A class name cannot start with a number!

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example

The CSS rule below will affect every HTML element on the page:

* {

text-align: center;

color: blue;

}

HTML Color Names

		Alice Blue
		AntiqueWhite
		Aqua
		Aquamarine
		Azure
		Beige
		Bisque
		Brown
		Black
		BlueViolet
		Coral
		Cyan

For more HTML color namaes visit: w3schools

NOTE: No css, still have errors and internal css. I want css and solve the error

• First create an html page with your student id/last name(use fake)
• Paste all code from the txt file
• Run the page
• Fix any errors
• Remove all inline CSS and move it to INternal/Embedded style.
• The page should keep the same look-and-feel after the change.
• Check that all elements are compete (opening tag, content, closing tag)

Check that all elements are properly nested.