Minimum Requirements: Your program should at least cover the following minimum required features with respect to the aforementioned different lectures/chapters that we have covered in the CSS module (Lecture/Chapter 10~16). 1. Introducing CSS: • using external CSS, that is one or multiple separate CSS file(s) which is/are used/shared by your HTML code files based on the tag. • in your HTML code create appropriate and different types of CSS selectors, which at least including examples of class and ID selectors. • style (at least assigning font, color, and layout for) all the block level and inline elements in your HTML code using CSS. Since this is an overall requirement, it is better to check it after you finish all the required items listed in this section. 2. Color: • contain at least one distinctive (means for different HTML element) example coming from each of the three common ways (RGB), HEX code, and color name to represent colors. • set different background colors for a whole page, and its different sections. Make sure that the contrast between the foreground and the background is big enough to guarantee good readability. 3.Text: • Size and typeface of text: (1) cover examples from all the three typefaces (Serif, Sans-Serif, and Monospace); (2) cover at least one example for each of the three ways to specify font size (pixels), percentages, and EMS; (3) cover an example that uses a font downloaded from / directly linked to a website that provides open source fonts / its URL (i.e., if using Google’s Font website: https://fonts.google.com/). • Bold, italics, capitals, underlines: cover at least one example for each of the following (bold, italic, oblique, uppercase, lowercase, capitalize, underline, and line-through). • Spacing between lines, words, and letters: cover at least one example for each of the following: (1) change the line spacing of a paragraph of text; (2) change the letter-spacing of a heading; (3) change the word-spacing of a heading; (4) right alignment example for a heading or paragraph; (5) add text indentation for a paragraph/heading; (6) add text shadow; (7) change the style (i.e., its size) for the first letter of a paragraph; (8) change the color for all the links after visited. 4. Boxes: cover at least one example for each of the subitems listed below in the following items: • Control the size of your boxes: set the width, height, min-width, max-width, min-height, max-height, overflow (using ‘scroll’), and rounded corner property values for a tag. • Create borders around boxes: create a border for a HTML element by setting its width, style, and color (i.e., add a “thick”, dashed, and blue border to the box of a paragraph). • Set margins and padding for boxes: (1) set different values for the four margins and four paddings of a box; (2) center the content in the box by using “auto”. • Hide boxes: hiding an element by setting its box to be “hidden”. 5. List, Tables & Forms • Specifying bullet point styles: (1) specify the shape of the bullet points in an unordered or ordered list based on predefined values (i.e., “disc”, and “lower-roman”); (2) specify an image to act as a bullet point. • Adding borders and backgrounds to tables: set width, assign cells padding, differentiate table headings using “text-transform”, shade alternative rows using “background-color”, highlight a table row when a user’s mouse goes over it by using “:hover”, and collapse the default distances between cells. • Changing the appearance of form elements: (1) style text inputs/areas and submit buttons to make them appear consistently across different browsers; (2) style labels on forms to align them. 6. Layout: • Controlling the positions of elements: (1) demonstrate at least one example for each of the following three ways to position an element: relative positioning, absolute positioning, and floats, and at the same time use z-index to handle overlapping elements; (2) use floats to create a multi-column layout, i.e., 2-column or 3-column layout (need to be implemented individually from the following item, that is cannot use the CSS framework mentioned below to fulfill this requirement). • Creating site layouts and designing for different sized screens: design a liquid (preferred) or fixed width layout for your website; if you choose fixed width layout, you could use the available CSS framework/template “960.gs”, but do not use it to replace all the required work listed before. That is, if necessary, please provide two versions for your project’s implementation.
Minimum Requirements: Your program should at least cover the following minimum required features with respect to the aforementioned different lectures/chapters that we have covered in the CSS module (Lecture/Chapter 10~16). 1.
Introducing CSS:
• using external CSS, that is one or multiple separate CSS file(s) which is/are used/shared by your HTML code files based on the tag.
• in your HTML code create appropriate and different types of CSS selectors, which at least including examples of class and ID selectors.
• style (at least assigning font, color, and layout for) all the block level and inline elements in your HTML code using CSS. Since this is an overall requirement, it is better to check it after you finish all the required items listed in this section.
2. Color:
• contain at least one distinctive (means for different HTML element) example coming from each of the three common ways (RGB), HEX code, and color name to represent colors.
• set different background colors for a whole page, and its different sections. Make sure that the contrast between the foreground and the background is big enough to guarantee good readability.
3.Text:
• Size and typeface of text:
(1) cover examples from all the three typefaces (Serif, Sans-Serif, and Monospace);
(2) cover at least one example for each of the three ways to specify font size (pixels), percentages, and EMS;
(3) cover an example that uses a font downloaded from / directly linked to a website that provides open source fonts / its URL (i.e., if using Google’s Font website: https://fonts.google.com/).
• Bold, italics, capitals, underlines: cover at least one example for each of the following (bold, italic, oblique, uppercase, lowercase, capitalize, underline, and line-through).
• Spacing between lines, words, and letters: cover at least one example for each of the following:
(1) change the line spacing of a paragraph of text;
(2) change the letter-spacing of a heading;
(3) change the word-spacing of a heading;
(4) right alignment example for a heading or paragraph;
(5) add text indentation for a paragraph/heading;
(6) add text shadow;
(7) change the style (i.e., its size) for the first letter of a paragraph;
(8) change the color for all the links after visited.
4. Boxes: cover at least one example for each of the subitems listed below in the following items:
• Control the size of your boxes: set the width, height, min-width, max-width, min-height, max-height, overflow (using ‘scroll’), and rounded corner property values for a tag.
• Create borders around boxes: create a border for a HTML element by setting its width, style, and color (i.e., add a “thick”, dashed, and blue border to the box of a paragraph).
• Set margins and padding for boxes:
(1) set different values for the four margins and four paddings of a box;
(2) center the content in the box by using “auto”.
• Hide boxes: hiding an element by setting its box to be “hidden”.
5. List, Tables & Forms
• Specifying bullet point styles:
(1) specify the shape of the bullet points in an unordered or ordered list based on predefined values (i.e., “disc”, and “lower-roman”);
(2) specify an image to act as a bullet point.
• Adding borders and backgrounds to tables: set width, assign cells padding, differentiate table headings using “text-transform”, shade alternative rows using “background-color”, highlight a table row when a user’s mouse goes over it by using “:hover”, and collapse the default distances between cells.
• Changing the appearance of form elements:
(1) style text inputs/areas and submit buttons to make them appear consistently across different browsers;
(2) style labels on forms to align them.
6. Layout:
• Controlling the positions of elements:
(1) demonstrate at least one example for each of the following three ways to position an element: relative positioning, absolute positioning, and floats, and at the same time use z-index to handle overlapping elements;
(2) use floats to create a multi-column layout, i.e., 2-column or 3-column layout (need to be implemented individually from the following item, that is cannot use the CSS framework mentioned below to fulfill this requirement).
• Creating site layouts and designing for different sized screens: design a liquid (preferred) or fixed width layout for your website; if you choose fixed width layout, you could use the available CSS framework/template “960.gs”, but do not use it to replace all the required work listed before. That is, if necessary, please provide two versions for your project’s implementation.
Trending now
This is a popular solution!
Step by step
Solved in 4 steps with 4 images
