CIS89A - 5. CSS Styling
From WikiEducator
CSS Styling
- Fonts are important design elements and can be included via the CSS embed function. Pages can be designed to be printed as documents. Although they may not be used often, there are several more CSS display tricks worth knowing.
Learning outcomes
- include specific fonts within the page
- format web pages for printing
- explore additional CSS presentation features
Keywords
- transition, transformation, animation, filter
- readability, text style, .PDF, paragraph, line break, quotation block, box, alignment, page layout, column, fluid, layer
Reading guide
- Where do fonts come from?
- How are fonts included in the page information
- Why would anyone want to print a web page?
- What are some of the additional display options available with CSS?
Assignments
Coding project required elements
- text formatting, include additional font families
- use css .class selector, ID, div
- demonstrate transitions, transformations, animations
- error free coding, css for styling, comments in html and css code
- Review the Keywords and Reading guide questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module. Review the Media section (below - scroll down) for links to resources for this module. For additional online resources, search for the keywords.
- Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 13 Styling Text . Chapter 14 Color in CSS . Chapter 18 CSS Transformations and Animations
- Design Thinking - Designing entails identifying and clarifying problems, making thoughtful responses and then creating and testing your solution. Designing is an activity which involves the use of a wide range of experiences, knowledge and skills to find the best solution to a problem within certain constraints. Review several resources that describe design thinking and the design process. How does this relate to the web development process? Post a link and brief summary of the inclusion of the design process in web development to the Design Process discussion. Review 2 others and comment.
- Web application (app) vs display - The primary purpose of some web sites is just providing and displaying information. The information may be static - historical records or the information may be updated frequently like weather forecasts. Other sites are primarily web-based applications. What is displayed depends on interaction with the user - social media, e-commerce, code validation. Find an example of each - an information display and a web application. Look at the source code for each. Are there noticeable differences? Post a brief comparison of the major differences between these along with the link to each to the Web Application vs Display discussion.
- Web Design - There are plenty of guides for designing great web sites. Some advice will apply only to specific content. Others are universal (UI/UX). Review the article 10 Principles of Good Web Design. How will these improve your web site designs? Pick 2 important components and post a brief summary of each to the Universal Web Design discussion. Review and comment on the post of 2 others.
- CSS Styling - There are so many different effects available with CSS, select some to explore and use as you wish. This is an opportunity for you to apply CSS Styling and your own creativity. Provide a demonstration of several of the Font and Text Properties and Color and Background Properties.
* In a new coding project, demonstrate requirements using all the appropriate elements and property tags within your project. For this coding project - Make your styling really visible. Make it standout so it is clear what you have added.
* In the top portion of your project page, include some text and images without any styling, just using the browsers defaults.
* In the bottom portion of your project page, add the same text and images and add styling using style coding in your css file.
Some browsers and user preferences may not display your styling. It is helpful to include information about the requirement being demonstrated in the page display as well as in the comments. - Submit the web address of your coding project to the CSS Styling assignment.
- Post a link to your coding project and any comments or questions about the assignment to the CSS Styling discussion.
- AND get feedback and provide feedback ... Review 2 other projects and REPLY with a comment to point out something that you learned or you liked. Ask one question about the work.
- Writing for the web - Pick one of the articles listed in Writing for the Web. Write a short review of the article you selected and post it along with a link to the article in the Writing for the Web discussion.
- ChatGPT interactive response software - What do you know about ChatGPT? Have you used it? Post your comments and a link to a resource that describes some important information about the software, how it can be used and any cautionary comments to the Talking with ChatGPT discussion. Review the comments of 3 others.
- Educational videos - There are thousands of great educational videos on the web. TED Education, Two Minute Papers and TeacherTube series are the best known sources but there are many others. Find an example of a educational video. In the Educational videos discussion, post a link to the video you selected and a brief description. Be sure to include the length of the video in minutes:seconds.
Review the selections of 2 others.
- Success Skills - Use it - how technologies are woven into daily living. Review 2-3 of the articles from Success skills USE list in the Media section below. Pick one article you would recommend from the selection list. Find another article online that would be appropriate to add to the selection list. Post a link and a brief summary of the reasons for each of your selections to the Success Skills - Use it discussion. Review 2 others.
- Programming - the functionality of a web site can be extended by adding some programming, usually in Javascript.
* If you are new to programming, write your first computer program. Hour of Code - Learn the basic concepts of Computer Science with drag and drop programming. This is a game-like, self-directed tutorial. Learn repeat-loops, conditionals, and basic algorithms.
* If you have some programming experience, learn the basics of JavaScript programming while creating fun drawings with your code. An introduction to JavaScript by Khan Academy - Video, step-by-step tutorials.
In the Programming discussion, write a brief description (2-3 sentences) of your programming experience. Which tutorial did you do? Do you have any prior programming experience? Would you recommend this activity to others?
- H5P Project - HTML5 has enabled new ways to create content for the web. H5P authoring tools developed by MIT and developers from around the world, make extensive use of HTML5 for creating interactive elements. Read About H5P project. Explore several of the H5P examples. Select one of the H5P interactive teaching game or quiz. Some suggestions - counting, adding numbers up to 10, easy reading storybook, ... How is HTML5 functionality being used? Is it effective? Post a link to your selection and HTML5 observations to Test drive H5P discussion. Review the work of 3 others.
- Code validation - there are a number of tools available free online that will check your HTML code and highlight errors. Find one and have it check your code for the project. How did you do? Did it find errors that you missed? Do you understand what is wrong? Were you able to fix the problem? Did you re-check your code to see that you fixed the problem? Post a link to the HTML checker you used and a brief descriptions of your experience using it in the HTML Code Checker discussion. Review the post of 2 others.
- Group Project groups discussions - Text - What is something important and interesting that you learned about using text in your web design? When designing a page or a site with a lot of text, what should be considered? Do you have questions about good web design? How would you apply these design ideas to your own work? Do you read long text articles online? Why / why not? Share with your group in the Group discussion. Are there outstanding questions? Contribute one or more posts to the discussion for the group. If you have a question about working as a group, please ask.
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 13 Styling Text . Chapter 14 Color in CSS . Chapter 18 CSS Transformations and Animations
Examples
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x5styling: Error parsing XML for RSS
STYLING
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/styling: Error parsing XML for RSS
TEXT
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/text: Error parsing XML for RSS
Design Thinking
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/designthinking: Error parsing XML for RSS
Coding, programming
- Write your first computer program Code.org - Learn the basic concepts of Computer Science with drag and drop programming. This is a game-like, self-directed tutorial starring video lectures. Learn repeat-loops, conditionals, and basic algorithms.
- write code and see the results right away.
- for web development – JavaScript, Python, Java, PHP, Ruby, C#
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/coding: Error parsing XML for RSS
USE
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/useit: Error parsing XML for RSS
