{"id":1302,"date":"2023-11-14T18:56:27","date_gmt":"2023-11-14T23:56:27","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/?p=1302"},"modified":"2023-11-14T18:56:33","modified_gmt":"2023-11-14T23:56:33","slug":"css-typography","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/2023\/11\/14\/css-typography\/","title":{"rendered":"CSS Properties for Typography"},"content":{"rendered":"\n<p>These are some of the more commonly used properties for typography and creating typographic hierarchy.<\/p>\n\n\n\n<p>Properties Required to style for Web Design Module Project have * after them<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Color<\/strong> *<\/h3>\n\n\n\n<p>Changes the color of the text. The color can be specified in a number of ways from named colors (red, green, blue) to hexadecimal numbers #FF8800 to&nbsp;rgba&nbsp;values&nbsp;rgba( 34, 12, 64, 0.3)<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><span style=\"color: var(--nv-secondary-accent);\" class=\"stk-highlight\"><strong>CSS Property:<\/strong>\u00a0color<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>Example<\/strong>:\u00a0color: #ff4400;<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color<\/a><\/p>\n\n\n\n<div class=\"wp-block-stackable-divider stk-block-divider stk-block stk-a245563\" data-block-id=\"a245563\"><hr class=\"stk-block-divider__hr\"\/><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Background Color *<\/h4>\n\n\n\n<p>This changes the color of the background. This combined with color defines the contrast of the color of the text and the background color. It can take the same values as color.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>CSS Property<\/strong>: background-color<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>Example<\/strong>:\u00a0background-color: #ffffff;<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/background-color\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/background-color<\/a><\/p>\n\n\n\n<div class=\"wp-block-stackable-divider stk-block-divider stk-block stk-c2e6908\" data-block-id=\"c2e6908\"><hr class=\"stk-block-divider__hr\"\/><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Font Family (Typeface)\u00a0<\/strong>*<\/h4>\n\n\n\n<p>This controls the font that is used.&nbsp;Also see the information on fonts in the CSS section of the Web Design Resources.&nbsp;<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>CSS Property<\/strong>:\u00a0font-family<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>Example:<\/strong>\u00a0font-family:\u00a0\"pt sans\",\u00a0sans-serif;<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-family\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-family<\/a><\/p>\n\n\n\n<div class=\"wp-block-stackable-divider stk-block-divider stk-block stk-3e17867\" data-block-id=\"3e17867\"><hr class=\"stk-block-divider__hr\"\/><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Font Size<\/strong> *<\/h4>\n\n\n\n<p>This is how big the font is. When designing responsive sites generally it&#8217;s better to specify fonts in em or rem units. More on that in another section.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>CSS Property<\/strong>: font-size<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>Example<\/strong>:\u00a0font-size: 2em;<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-size\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-size<\/a><\/p>\n\n\n\n<div class=\"wp-block-stackable-divider stk-block-divider stk-block stk-3169301\" data-block-id=\"3169301\"><hr class=\"stk-block-divider__hr\"\/><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Font Weight<\/strong><\/h4>\n\n\n\n<p>This controls the weight (boldness and lightness) of the font. The possible values are 100, 200, 300, 400, 500, 600, 700, 800, 900. You can also specify bold, normal, light but it is better to be specific and use the numbers. 100 is extra light, &nbsp;and 400 is normal,&nbsp;and 900 is extra bold.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>CSS Property<\/strong>: font-weight<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>Example<\/strong>:\u00a0font-weight: 700;<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-weight\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-weight<\/a><\/p>\n\n\n\n<div class=\"wp-block-stackable-divider stk-block-divider stk-block stk-43e68d8\" data-block-id=\"43e68d8\"><hr class=\"stk-block-divider__hr\"\/><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Font Style<\/strong><\/h4>\n\n\n\n<p>This allows you to make text italic.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>CSS Property:<\/strong>\u00a0font-style<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>Example<\/strong>:\u00a0font-style: italic;<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-style\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-style<\/a><\/p>\n\n\n\n<div class=\"wp-block-stackable-divider stk-block-divider stk-block stk-4618b29\" data-block-id=\"4618b29\"><hr class=\"stk-block-divider__hr\"\/><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Line Height<\/strong><\/h4>\n\n\n\n<p>This controls the space between lines of text. This is one of the few properties where you can give a&nbsp;unitless&nbsp;value. If you just write a number it will multiply that by the font-size that has been set.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>CSS Property<\/strong>: line-height<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>Example<\/strong>:\u00a0line-height: 1.5;<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/line-height\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/line-height<\/a><\/p>\n\n\n\n<div class=\"wp-block-stackable-divider stk-block-divider stk-block stk-75baa41\" data-block-id=\"75baa41\"><hr class=\"stk-block-divider__hr\"\/><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Alignment<\/strong><\/h4>\n\n\n\n<p>Here you control if the text is aligned left, right, centered or justified.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>CSS Property<\/strong>: text-align<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>Example<\/strong>:\u00a0text-align: justify;<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-align\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-align<\/a><\/p>\n\n\n\n<div class=\"wp-block-stackable-divider stk-block-divider stk-block stk-b003f71\" data-block-id=\"b003f71\"><hr class=\"stk-block-divider__hr\"\/><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Text Transform (<strong>Case<\/strong>)<\/h4>\n\n\n\n<p>This allows you to force your text to be uppercase or lower case or capitalize (like a title or name)<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>CSS Property:<\/strong>\u00a0text-transform<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>Example<\/strong>:&nbsp;text-transform: uppercase;<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-transform\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-transform<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>These are some of the more commonly used properties for typography and creating typographic hierarchy. Properties Required to style for Web Design Module Project have * after them Color *&hellip;&nbsp;<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/2023\/11\/14\/css-typography\/\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">CSS Properties for Typography<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":1307,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_themeisle_gutenberg_block_has_review":false,"openlab_post_visibility":"","footnotes":""},"categories":[27,23],"tags":[48,49],"class_list":["post-1302","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-web-design-module","tag-css","tag-typography"],"uagb_featured_image_src":{"full":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2023\/11\/Screenshot-2023-11-14-at-6.55.26\u202fPM.png",1654,896,false],"thumbnail":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2023\/11\/Screenshot-2023-11-14-at-6.55.26\u202fPM-150x150.png",150,150,true],"medium":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2023\/11\/Screenshot-2023-11-14-at-6.55.26\u202fPM-300x163.png",300,163,true],"medium_large":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2023\/11\/Screenshot-2023-11-14-at-6.55.26\u202fPM-768x416.png",768,416,true],"large":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2023\/11\/Screenshot-2023-11-14-at-6.55.26\u202fPM-1024x555.png",1024,555,true],"1536x1536":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2023\/11\/Screenshot-2023-11-14-at-6.55.26\u202fPM-1536x832.png",1536,832,true],"2048x2048":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2023\/11\/Screenshot-2023-11-14-at-6.55.26\u202fPM.png",1654,896,false],"neve-blog":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2023\/11\/Screenshot-2023-11-14-at-6.55.26\u202fPM-930x620.png",930,620,true],"gform-image-choice-sm":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2023\/11\/Screenshot-2023-11-14-at-6.55.26\u202fPM.png",300,163,false],"gform-image-choice-md":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2023\/11\/Screenshot-2023-11-14-at-6.55.26\u202fPM.png",400,217,false],"gform-image-choice-lg":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2023\/11\/Screenshot-2023-11-14-at-6.55.26\u202fPM.png",600,325,false]},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/author\/cstein\/"},"uagb_comment_info":0,"uagb_excerpt":"These are some of the more commonly used properties for typography and creating typographic hierarchy. Properties Required to style for Web Design Module Project have * after them Color *&hellip;&nbsp;Read More &raquo;CSS Properties for Typography","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/posts\/1302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/comments?post=1302"}],"version-history":[{"count":3,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/posts\/1302\/revisions"}],"predecessor-version":[{"id":1306,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/posts\/1302\/revisions\/1306"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/media\/1307"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/media?parent=1302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/categories?post=1302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/tags?post=1302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}