CIS89A - 6. CSS Formatting

From WikiEducator
Jump to: navigation, search
Mathematical bridge,  Cambridge

CSS Formatting

Fonts are important design elements and need to 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 title and required elements

  • more css * page layout * text formatting * include additional font families * use ID selector * demonstrate transitions, transformations, animations and filters * error free coding, css for styling, comments in html and css code


  1. 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.

  2. Textbook - Willard - Chapters 4. Working with Text

  3. CSS Formatting - 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 Formatting 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. It is helpful to include information about the requirement being demonstrated in the page display as well as in the comments.
  4. Submit the web address of your coding project to the CSS Formatting assignment.
  5. Post a link to your coding project and any comments or questions about the assignment to the CSS Formatting discussion.

  6. 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.

  7. 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.

  8. 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.

  9. HTML Coding 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 assignment. How did you do? Did it find errors that you missed? Did you understand what was 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.

  10. 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.

  11. Modules 1-6 Midterm Review - This is about the middle of the course. We have covered a lot in a relatively short time. Now stop for a few minutes and think about the CIS89A Web Development course so far. In the first 6 modules of the course, what was one pleasant surprise? What is one question that didn't get answered? What is something that you can do that will improve your course participation? Submit your comments and questions as the Modules 1-6 Midterm Review assignment.


Icon multimedia.gif

Media



CSS

Learning CSS by Parkour Ninja on Prezi
With CSS, this entire task can be accomplished with three rules. All I need to do is set a rule for the entire document that the font is "Times New Roman" and a rule for headings that the...
Appendix B: CSS Reference - HTML5 & CSS3 Visual Quickstart Guide (Eighth Edition)
CSS reference tables:Table B.1—CSS Properties and Values: Designed as a quick reference to many common or useful CSS properties, their default value, allowed values, where the value is inherited,...
Advantages and Drawbacks of Inline Styles in CSS
Inline styles are CSS styles that are applied directly in the page's HTML. There are both advantages and disadvantages to this approach.they can over-ride things you didn't intend them to....
HTML vs CSS - 6 important Comparisons You Must Learn
HTML provides the structure of web pages whereas CSS is mainly used to control the styling and layout (visual and aural) of web pages. HTML provides tags that are surrounding the content of any web...


FORMATTING

CSS3 Animations with Transitions & Transforms - Kirsten Swanson - Medium
transitions act as the foundation of animations because they specify the duration of an element changing its state smoothly over time. Without a transition this state change would be abrupt and tak...
Transitions & Animations - Learn to Code Advanced HTML & CSS
With CSS3 transitions you have the potential to alter the appearance and behavior of an element whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted.Anim...
CSS | Text Formatting - GeeksforGeeks
"CSS text formatting properties:1.Text-color2.Text-alignment3.Text-decoration4.Text-transformation5.Text-indentation6.Letter spacing7.Line height8.Text-direction9.Text-shadow10.Word spacing&qu...
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...


TEXT

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."
...
F-Shaped Pattern For Reading Web Content
Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe. F for fast. That's how users read your precious con...
CSS Text
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between cha...
Fundamental text and font styling - Learn web development | MDN
text styling with CSS. Here we'll go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other...


Coding, programming

  • Hour of Code - 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.
  • CodeAcademy - write code and see the results right away.
  • Eloquent JavaScript A Modern Introduction to Programming - an introduction to the JavaScript programming language and programming in general. Originally written and published in digital form, includes interactive examples and a mechanism for playing with all the example code. This version is released under an open license.
Girls Who Code at Home - Download Curriculum!
Girls Who Code at HomeIn response to the COVID-19 pandemic, Girls Who Code is making CS educational activities available for download free of charge. They will release activities weekly. Each activ...
Beyond an Hour of Code
Loved the Hour of Code but want more? Learn basic computer science with our suite of classroom-ready courses for different ages (even kindergarten). Lessons blend game-like tutorials with unplugged...
Learn | Code.org
Hour of Code ActivitiesTry a one-hour tutorial designed for all ages in over 45 languages. Join millions of students and teachers in over 180 countries starting with an Hour of Code. "
...
Unruly Splats - Coding For Kids | Active STEM Learning
Unruly Splats are programmable devices that light up, make sounds, and sense when they’re stomped on. Students program Splats to create active games using the Unruly block coding app on a tablet...


USE

27 Awesome Tech Tips That Will Save You Time | Tom's Guide
From making quicker Google searches to changing the ways we interact with our smartphones, there are countless ways to speed things up using tech. Use these shortcuts on your PC, Mac, iPhone or And...
iTest
identify these technologies and recognise how they may be of benefitComplete this short quiz to reveal a personalised profile spanning six different genres, which suggests ways you can improve how...
Tips for studying online and at home for university students | Times Higher Education (THE)
not be easy to regulate your own studying and to utilise online lectures and seminars to their full potential but here are some ways in which you can do so. This is a general overview for all stude...
27 People Share The One Cool Internet Or Computer Trick They Know | Thought Catalog
An easy way to browse photos on a subreddit hands-free. When viewing picture based subreddits, add a “p” into the url like so: redditp.com/r/subreddit to get a picture slideshow of the posts...