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.
- 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
- Ice Cream Style
- The Origins of Ice CreamNo StyleThe origins of frozen desserts are obscure, although se...
- Week 5
- "Week 5 Project gradient backgroundhere's a header (imported font: courier...
- Sloths!
- "leafSloths!One of my favorite animals is the sloth! I think they're very cute...
STYLING
- CSS styling text - Learn web development | MDN
- the essentials behind styling HTML text content.Fundamental text and font styling In this article we go through all the basics of text/font styling in detail, including setting font weight, fami...
- 28 outstanding examples of CSS | Creative Bloq
- 28 great examples of CSS sites that will provide a burst of web design inspirationBuilt using Ruby on Rails with HTML5, SCSS, CoffeeScript and jQuery, the platform has the ability to let travellers...
- 25 cool CSS animation effects and how to create them | Creative Bloq
- Delivering thoughtful, fluid animations that contribute meaningful depth to your site doesn’t have to be difficult. Modern CSS properties now hand you nearly all of the tools you’ll need to cre...
TEXT
- Formatting Text Using CSS - Tutorial Republic
- CSS text properties allow you to define several text styles such as color, alignment, spacing, decoration, transformation etc. very easily an effectively.CSS has several properties for defining the...
- Lorem Ipsum - All the facts
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of...
- Variable Fonts
- Variable fonts are coming. How will it change the web design and development process? Tim Brown and Bram Stein explain how variable fonts will work and what you can do with them now."
...
Design Thinking
- How to apply a design thinking, HCD, UX or any creative process from scratch | by Dan Nessler | Digital Experience Design | Medium
- "The Double Diamond is a structured design approach to tackle challenges in four phases: Discover /Research— insight into the problem (diverging) Define/Synthesis — the area to focus...
- Practice Guide to Solve Problems with TRIZ
- the principal that somebody, sometime, somewhere has already solved your problem or one similar to it and creativity means finding that solution and adapting it to the current problem; and the pri...
- SWOT Analysis: Exploring Innovation and Creativity within Organizations
- " SWOT analysis is one of the methods that is used to evaluate strength (S), weakness (W), opportunities (O) and threats (T) involved in innovative ideas and strategies. It can be applied to p...
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#
- Getting started | micro:bit
- "The BBC micro:bit is an award-winning programmable device that allows students to get hands-on with coding and digital making. Use it to inspire your students to recognise the power of techno...
- BBC micro:bit v2 : ID 4781 : $17.95 : Adafruit Industries, Unique & fun DIY electronics and kits
- "BBC micro:bit v2Product ID: 4781$17.95There are multiple versions of this item. Please select one from the options below: Single BBC micro:bit v2 $17.95 Single micro:bit v2 Go Bundle -...
USE
- Ditch Your To-Do List and Do This Instead | Sam Corcos | The Tim Ferriss Show - YouTube
- A different way to schedule your time based on your calendar and realistic times for tasks to do.
<p class="diigo-tags"><strong>Tags:</strong>... - Switching Between Skimming and Focusing | Edutopia
- kimming allows learners to broaden their horizons to a wide range of subjects and ideas without committing excessive time to any single one. This breadth of knowledge can lead to serendipitous disc...
- How to Excel at Self-Directed Learning in 5 Steps | Fuse Classroom
- Self-directed learning allows students to become independent learners, helping them not just obtain skills but also practice of independent learning. Students have the freedom to create their own c...
