When you want to set what font is used to display text you set the font-family property. The value for the font-family property is a comma separated list of fonts. Here is an example: Font Stack The list of fonts in the value for font-family is often referred to as […]
css
9 posts
While Chrome is a good overall browser it continues to lag behind Firefox in tools to inspect your CSS Grid. This plugin is a step to bridge the gap: Gridman: CSS Grid Inspector. Follow the link when in the Chrome browser to install. Once you install it to use it […]
Previously we showed some basic CSS to make an image responsive. All that does is allow the image to resize as the element that contains it resizes. This means that you have to add the image at the largest size it can possibly be. The techniques below allow you to […]
Links on a web page are made through an anchor (a) element: When we’re styling them in addition to styling the basic a element you can also style different states of the link: visited: what it looks like when someone has already cliked the link before hover: what it looks […]
CLASS 6 on Monday 9/16/2019 Today we are going to look into typography and how to implement it on the web using CSS. Typography Basics We will start with looking at typography basics. This post covers that and more. Don’t worry if you don’t pick it all up right away. […]
These are some of the more commonly used properties for typography and creating typographic hierarchy. Font (Typeface): This controls the font that is used. Also see the information on fonts in the CSS section of the Web Design Resources. CSS Property: font-family Example: font-family: "pt sans", sans-serif; https://developer.mozilla.org/en-US/docs/Web/CSS/font-family Font Weight This controls the weight (boldness […]
CSS Fundamentals As you come in to class today visit this post and start trying to play the CSS game it links to. We will play a little in class and talk about CSS basics. Files at the END of class: Here is a zip of the HTML and CSS […]
Files From Class: DOWNLOAD: Here are the files we created in class based on our sketch: https://www.dropbox.com/s/q5n75j2ffp1bxxp/Bonobos-inClass-9.9.19.zip?dl=0Wireframe Sketch: here is a pic of the wireframe from the board. I converted it to a PDF. https://www.dropbox.com/s/vpsbsbs5mvhzvnw/Bonobos-Wireframe-Sketch-.pdf?dl=0 For the homework you would upload two files like these, the HTML and a Sketch […]
Play Game: https://flukeout.github.io/ This is a web game that requires you to write CSS Selectors. It’s a fun way to test your knowledge of writing selectors for CSS. It also explains the selectors so it can be a good learning tool as well. By the end of this class you […]
