Interactive Design: Project 1
Eric Chang (0378298)
Bachelor Of Design in Creative Media
Interactive Design
Instruction:
Lecture:
ID Attribute: Every HTML element can carry an ID attribute that is used to uniquely identify the element from other elements on the page. It is important that no two elements have the same value for their ID attributes, otherwise the value is no longer unique. Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page. For example, you might want to assign one paragraph within the page a different style from all of the other paragraphs.
Class Attribute: Every HTML element can also carry a class attribute. Sometimes you will want a way to identify several elements as being different from the other elements on the page. For example, you might have some paragraphs that contain information that is more important than others and want to distinguish between these elements. The class attribute on any elements can share the same value or name.
CSS:
CSS (Cascading Style Sheet) allows you to create rules that specify how the content of an element should appear. For example, you can set the background of the page to cream, all paragraphs should appear in gray using the Arial typeface, or that all level headers should be in blue, italic, Helvetica typeface.
CSS STYLE RULES
How CSS Works: CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. A CSS rule contains two parts: a selector and a declaration.
CSS Rule Structure: Selector: Indicates which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.
Declaration: Indicates how the elements referred to in the selector should be styled. Declarations are split into two parts (a property and a value) and are separated by a colon.
METHODS TO EMPLOY CSS
External CSS Using <link>: The <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the page. It is an empty element and it lives inside the <head> element. It should use three attributes:
href: To specify the path to the CSS file type: This attribute specifies the type of document being linked to. The value should be text/css rel: Specifies the relationship between the HTML page and the file linked to. The value should be stylesheet when linking to a CSS file
Multiple CSS Files: An HTML page can use more than one CSS style sheet. To do this it could have a <link> element for every CSS file it uses. For example, one author might use one CSS to control the presentation (fonts and colors) and a second to control the layout.
Internal CSS Using <style>: You can also include CSS rules within an HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page. The <style> element should use the type attribute to indicate that the styles are specified in CSS. The value should be text/css.
Benefits of External CSS: When building a site with more than one page, you should use an external CSS style sheet because it:
- Allows all pages to use the same style rules (rather than repeating them in each page)
- Keeps the content separate from how the page looks
- Means you can change the styles used across all pages by altering just one file (rather than each individual page)
CSS Color:
- Set background color on text
- Set color on text
- Set border color
CSS Background:
- Set background color
- Set background image
- Set background repeat
- Set background attachment
- Background shorthand
CSS Text Formatting:
- Text Color
- Text Alignment
- Text Decoration
- Text Transformation
- Text Spacing
- text-indent
- letter-spacing
- word-spacing
- Text Shadow
CSS Fonts: Best Web Safe Fonts for HTML and CSS:
- Arial (sans-serif)
- Verdana (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
- Universal Selector (*): Targets all elements on a page, but should be used cautiously as it affects everything and can be inefficient
- Element Selector: The simplest type that targets HTML elements by their tag name (e.g., targeting all paragraph elements with "p")
- ID Selector (#): Targets elements with specific ID attributes, which must be unique within a document
- Class Selector (.): Targets elements with specific class attributes, allowing multiple elements to share the same class
- Descendant Selector: Selects elements that are descendants of other elements, enabling hierarchical targeting
- Child Selector (>): Selects only direct children of specific elements
- Pseudo-class Selectors: Target elements based on their state or position, including hover, active, visited, focus, and nth-child states
- Pseudo-element Selectors: Target parts of elements rather than whole elements, commonly using ::before and ::after.
Project 1:
Comments
Post a Comment