[techtalk] WEB DESIGN - What is CSS?

Tue Aug 30 15:52:44 PDT 2022

Welcome to the latest issue of Tech-Talk!
Reminder: When accessing resources at the Tech-Talk website<https://www.tech-talk.com/>, use ORLIBTECH
for both the username and password when prompted
The basics of what you need to know about CSS

[https://files.constantcontact.com/ee1208b4001/93006bb8-92de-4f95-a686-5d396417790e.png]

[back to school]<https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fr20.rs6.net%2Ftn.jsp%3Ff%3D001bjbFnltV40loHhP4gOaWJ7vEJm1S-Vdz33bG47M5-nw9cYeJoKnFe7WZ7m2CMa7VzXItF3inSnf8sVMtiWlc8wB1QDFgXwZlddFeQE0FpB4HxUeDrsdjwwgbNMsEei3AyIGpdDnFuOK_B6NNW_Hge7LC_iYcDZJtbfJRhUYQ4aU%3D%26c%3DMFEDGcku-_a_Lr3vnOedlrp9Z36jSx8HbhomILt6JWoXiwBPbrjcSQ%3D%3D%26ch%3DTo3ARAaDU_Y5Cu549pAjXEXrPasATpq3iUTfZOtQru8zYlqrjIAZsQ%3D%3D&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7C3d26655de2f54be90e9808da8ad062e8%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637974924862071658%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=b5zkWLJgeKIQXHB92TwFuO5%2FxzaE423EF4Zav2Escho%3D&reserved=0>

Photo by Scott Webb<https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fr20.rs6.net%2Ftn.jsp%3Ff%3D001bjbFnltV40loHhP4gOaWJ7vEJm1S-Vdz33bG47M5-nw9cYeJoKnFe7lqz37Zl_yZq2Mz_XQ8c-lTY0aQ6EKkkwXAO6FICc6PkWLmAgbXx2Z_AUz-a2BJnobifBx0ylr25gKt6m-E4V6FpFdARck-7jxZlUgKg_QKRqH_wJiHrOQH8ixlBQVaGqdtyW7gqVlkMzuCyCSqL1NrGJA5ljPQK9BfbpS3-6PJTkJx5odOpS2t_78ZonJUut2voaRUlxg4DuqVt-dpV-E%3D%26c%3DMFEDGcku-_a_Lr3vnOedlrp9Z36jSx8HbhomILt6JWoXiwBPbrjcSQ%3D%3D%26ch%3DTo3ARAaDU_Y5Cu549pAjXEXrPasATpq3iUTfZOtQru8zYlqrjIAZsQ%3D%3D&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7C3d26655de2f54be90e9808da8ad062e8%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637974924862071658%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=uIUsXspSXtD%2FHZmRjFOjhQq1q5XkrTmN2T%2BAOS%2BroGQ%3D&reserved=0> on Unsplash<https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fr20.rs6.net%2Ftn.jsp%3Ff%3D001bjbFnltV40loHhP4gOaWJ7vEJm1S-Vdz33bG47M5-nw9cYeJoKnFew9xQIs0mga5GqP1uif2H0P451U_1_jn17C4WqCnWQYQIzgNv_TpzjCdVuIgUsY4Sy1_2NvoE30tY2-XbCM3pvIqQ15sxCQtxdvvhgL0Bom-1ipV5TLfkqiC1G4WGaI7izJO1WZuKpsef3SVV9iO6_jhZFwyKMBokQZaSs9M0P1RlEQnwfV4mcresvmBayAAFO2xOBZpzb1HMnusf0MxThA%3D%26c%3DMFEDGcku-_a_Lr3vnOedlrp9Z36jSx8HbhomILt6JWoXiwBPbrjcSQ%3D%3D%26ch%3DTo3ARAaDU_Y5Cu549pAjXEXrPasATpq3iUTfZOtQru8zYlqrjIAZsQ%3D%3D&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7C3d26655de2f54be90e9808da8ad062e8%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637974924862227875%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=d6Icb9pYQGrM4zl0OEF8RSI5%2FhwHfq6iaT%2FJbE0QMZg%3D&reserved=0>

[https://files.constantcontact.com/ee1208b4001/e25f6bcf-26a8-4e59-91f2-cc248962042d.png]<https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fr20.rs6.net%2Ftn.jsp%3Ff%3D001bjbFnltV40loHhP4gOaWJ7vEJm1S-Vdz33bG47M5-nw9cYeJoKnFe7E6O-cXMtjlUk8v22iNgnfX0j_D0zFnuqvxontjATDcHj0Z7rQduRzxnxpQNvlHiQqzjtk2dvghIugNkydNvxbIjdsdey1GyJQo9ap2tdkv%26c%3DMFEDGcku-_a_Lr3vnOedlrp9Z36jSx8HbhomILt6JWoXiwBPbrjcSQ%3D%3D%26ch%3DTo3ARAaDU_Y5Cu549pAjXEXrPasATpq3iUTfZOtQru8zYlqrjIAZsQ%3D%3D&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7C3d26655de2f54be90e9808da8ad062e8%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637974924862227875%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=xXl88YKVHVu417%2BcJSRbPVcTVGdotG%2BuYPV3LLWQtKg%3D&reserved=0>

Webinars for You

·     Sep 14: [OFFICE] Transforming Ugly Duckling Documents Into Swans [3 pm ET for 1 hour]

·     Sep 28: [WEB TOOLS] Stop Explaining Over and Over, Create a Loom Video [3 pm ET for 1 hour]

See Webinar Descriptions and Register Here<https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fr20.rs6.net%2Ftn.jsp%3Ff%3D001bjbFnltV40loHhP4gOaWJ7vEJm1S-Vdz33bG47M5-nw9cYeJoKnFe3R41_ZW_EbRW3drveW0s8Vb_jROU71B1H4CycQBO60kyiCb1IJUmJFuBmsBvSwLK1lEz1vz3ABEnGMy7_6-kuqKLu8KYdK9_FtEsQph438g%26c%3DMFEDGcku-_a_Lr3vnOedlrp9Z36jSx8HbhomILt6JWoXiwBPbrjcSQ%3D%3D%26ch%3DTo3ARAaDU_Y5Cu549pAjXEXrPasATpq3iUTfZOtQru8zYlqrjIAZsQ%3D%3D&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7C3d26655de2f54be90e9808da8ad062e8%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637974924862227875%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=uxUlZbL1OQ6u%2Bi66tagCq1xsFZPyasTZgawqQ1dmtt0%3D&reserved=0>

WEB DESIGN - What is CSS?

ADVANCED

[websites]

Do you update your organization's website periodically with events or blog posts? Or maybe you manage a site, but don't have a lot of web design experience.

Website themes (or "do-it-yourself" platforms) make it much easier now for someone without specialty training to build a website. These tools allow you to not only add new content... but update your site's CSS (Cascading Style Sheets) without knowing website design "language." You may not realize it, but when you use the theme or a template's tool to designate details like font styles and background colors ... you're updating the CSS.

However, having some basic website "back-end" knowledge can be helpful when you need to make changes beyond what the website theme or platform allows.

So, if you're curious about more of the inner workings of a website, let's take a look at the special language called CSS – and how it can help you customize a website.

What is "CSS"?

[CSS]

CSS stands for Cascading Style Sheets. Make note that "style" is the keyword here.

Now, we can't talk about CSS without defining how it interacts with HTML and JavaScript – which are the core languages for building website pages.

Here are some big picture descriptions:

·     HTML (Hypertext Markup Language) is the language that is used to create the structure of a webpage. It uses tags to allow you to add headers, images, paragraphs, bullets, and other elements.

·     CSS (Cascading Style Sheet) is the language that specifies how your website pages look… the aesthetics, visual structure and layout. It determines the text and heading styles, size, color, etc. It also controls how the page style changes when viewed on a desktop versus a mobile device. Without CSS, websites would look pretty dull.

·     JavaScript is layered in to make the site interactive. It is used in features like animated graphics sliding in and out, interactive forms, or pop-up messages. JavaScript creates anything that is dynamic. For example, if you're viewing a product and you zoom in to see the image closer -- JavaScript makes that happen.

Here's a simplified analogy. Think about it in terms of building a house. HTML is the frame, the foundation, and the walls. CSS provides the paint, furnishings, and curtains to make it look nice. And JavaScript allows the doors and windows to open.

What are the Benefits of CSS?

Okay, now we know that HTML is used in building the website structure, CSS is layered on top for the look and feel of the site and JavaScript adds the fun movement.

Instead of defining the styles within each individual page, frequently used details can be defined once in a Cascading Style Sheet ... which is then used for every page that references the CSS file.

So let's look at why CSS is important and the benefits it adds to a website.

[https://files.constantcontact.com/ee1208b4001/512c8c4f-82fe-4159-8165-c598f592c5de.png]

1. CSS provides ease in formatting changes.

At the top of the list is that the CSS is a "one-stop shop." It contains all of the formatting for things like heading styles so you only need to change something in one place. The CSS updates the change on every page of your site. This way you don't need to go to each place to modify the heading.

For example, you've set up your main "H1" heading style as a certain font, size and color. Later, if you want to make it a little bit smaller, you only have to edit the font size in the CSS stylesheet one time to update it in each place used on your site.

NOTE: In many current platforms/themes you don't even need to edit the CSS stylesheet. Instead, you can make a change in the theme for that heading style, and then it dynamically updates the CSS for you.

2. Website consistency for a more uniform look and style.

CSS helps to keep your website easier for the viewer to interpret. If pages had different formatting on each, they would not appear cohesive and consistent. You wouln't maintain your brand and style.

3. Your pages will load faster.

CSS allows you to use less code on each page because the aesthetic variables are noted in the CSS file instead of on each page. Therefore, with fewer lines of code to load per page or post, the user will enjoy a faster page load experience.

4. Responsiveness across all devices.

Websites are viewed on large monitors, tablets, and smaller mobile devices. This means that a site needs to be compatible, or "responsive", on all sizes of screens so that the page content is viewed as it was meant to be. CSS (combined with HTML) makes responsiveness possible.

Making Changes to CSS

[css]

Many web platforms have built-in options to set the elements of CSS so that you don't need to learn the coding language. Instead, you can simply designate the main text font style, the header font style and color, the hyperlink color, and so forth for the entire site.

Then there may be times when you want to add or change something in the CSS that isn't part of the theme's functionality. For example, in Tech-Talk.com, we wanted to add a background color to the widget area (the items in the right margin of an article post). We had to make that addition to the CSS manually.

However, if you have not had training in updating files like CSS, it's best to put in a request to your IT department or a website developer as it is a whole "language" in itself.

[https://files.constantcontact.com/ee1208b4001/41d9a61c-7e5a-4de3-b0a4-4021dd05cea3.png]

Communications

Getting a Word In

There are times in a meeting, or in a one-on-one conversation, when you have trouble getting a word in. Perhaps it's because the other person won't stop talking or even pause for you to scoot in. Or it may be that you're trying to make a point, but an individual keeps interrupting you ... not letting you finish.

Here's a technique that you can use in these situations: hold up your hand, palm toward them. That movement catches the eye and registers. If they keep talking (or interrupting), move the hand a little more forward.

This technique is called the Bookmark.  It is one of a number of ideas found in the bestselling book Cues by Vanessa Van Edwards. I like it because you don't have to say a thing. Let your hand do it quietly, yet effectively.

[https://files.constantcontact.com/ee1208b4001/da1c6ee9-ba35-4af5-9c80-8e1b5781189e.png]

Leadership

Adding "fun" into your work

The more fun you have working, the more joy your colleagues will get out of their jobs as well.

Now, I'm not saying the job is always fun-worthy. Nor is it a leader's responsibility to ensure everyone enjoys what they do all the time.

But if you feel as if work is too much of a grind for too long, it probably means that there is a need to add an element of fun ... for your sake and that of the folks around you.

Fun doesn't have to be parties and cute hats. It's an attitude. It can simply mean a lightness of spirit as you approach daily activities. Put on a happy smile to share, knowing that both your joys and tribulations can end up with positive results.

Your attitude could be, "Hey, in all this turmoil we might as well have some fun, right?"

[http://files.constantcontact.com/ee1208b4001/b13a7a6a-7445-4d8e-b741-4b475385ef5b.png]<https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fr20.rs6.net%2Ftn.jsp%3Ff%3D001bjbFnltV40loHhP4gOaWJ7vEJm1S-Vdz33bG47M5-nw9cYeJoKnFe3OI_lPd8FsDDgV8yxwlmNOt85L0GeWbXdr3ldI-e1nbli99362AmThuIVACdAPodUah8pbrzeIi1GM_S7BQvxLXh3rK5BCqUfjLuveMgt71%26c%3DMFEDGcku-_a_Lr3vnOedlrp9Z36jSx8HbhomILt6JWoXiwBPbrjcSQ%3D%3D%26ch%3DTo3ARAaDU_Y5Cu549pAjXEXrPasATpq3iUTfZOtQru8zYlqrjIAZsQ%3D%3D&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7C3d26655de2f54be90e9808da8ad062e8%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637974924862227875%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=gEhs%2BWPtKmwirq5wN1Gasm1j%2FG3aC%2F2Y0%2FapMctzbZc%3D&reserved=0>
[Ask a question]<https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fr20.rs6.net%2Ftn.jsp%3Ff%3D001bjbFnltV40loHhP4gOaWJ7vEJm1S-Vdz33bG47M5-nw9cYeJoKnFewNxaRgZuuqjWNveXU9_eijfRDxYi-YY_m1Ni9IlzWqRsx2S1C7NVCmxoihjsMeutlbhozElTBvAh6-DLB6I14zSmmJzX4BAtOhHONCw0Z5e8GQnRfK3AMM%3D%26c%3DMFEDGcku-_a_Lr3vnOedlrp9Z36jSx8HbhomILt6JWoXiwBPbrjcSQ%3D%3D%26ch%3DTo3ARAaDU_Y5Cu549pAjXEXrPasATpq3iUTfZOtQru8zYlqrjIAZsQ%3D%3D&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7C3d26655de2f54be90e9808da8ad062e8%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637974924862227875%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=WMBIUD34NNddjjKBVVgkGA2CB0yFm5IuWAZdP%2FDAp6I%3D&reserved=0>

Copyright 1996-2022 Shared Results International. Published weekly. Distribution is limited by license. For information on how to include additional recipients, contact support at tech-talk.com<mailto:support at tech-talk.com> 941-355-2092.
Tech-Talk is a paid subscription service for staff of Oregon libraries and is supported in whole by the Institute of Museum and Library Services (IMLS) through the Library Services and Technology Act (LSTA), administered by the State Library of Oregon.

Darci Hanning, MLIS (she/her/hers)
Public Library Consultant / CE Coordinator
State Library of Oregon | Library Support and Development Services
971-375-3491 | darci.hanning at slo.oregon.gov<mailto:darci.hanning at slo.oregon.gov> | www.oregon.gov/library<https://gcc02.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.oregon.gov%2Flibrary&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7Cfce2c03b3a174bdeac5008da86af4cee%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637970384721228694%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=R%2Boup99zZs%2FyEu6AiDwg9FA%2BIU8oXo%2BpCMQDvh%2BkuiQ%3D&reserved=0>
Follow @StateLibraryOR: Facebook<https://gcc02.safelinks.protection.outlook.com/?url=http%3A%2F%2Ffb.me%2FStateLibraryOR&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7Cfce2c03b3a174bdeac5008da86af4cee%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637970384721228694%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=tvMukh7a6R6CHvl391CRP2y6rtbOi1X%2F%2FNm5r9DXl6o%3D&reserved=0> | Twitter<https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Ftwitter.com%2FStateLibraryOR&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7Cfce2c03b3a174bdeac5008da86af4cee%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637970384721228694%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=ViDRdIOCDbn9m8qMonWbeVWQzronSk8HvoPLhZuKDlI%3D&reserved=0> | Instagram<https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.instagram.com%2Fstatelibraryor%2F&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7Cfce2c03b3a174bdeac5008da86af4cee%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637970384721228694%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=jC%2FggbkJGRa7jVb2FTlW9TFyDiZQMOz%2FBQhZhBh3QJk%3D&reserved=0> | Pinterest<https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fpinterest.com%2Fstatelibraryor%2F&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7Cfce2c03b3a174bdeac5008da86af4cee%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637970384721228694%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=E8%2Bq6hW1XFGXh0S5CxWAjmamNjrMZlF%2FksImG7Ifc0M%3D&reserved=0> | YouTube<https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.youtube.com%2Fchannel%2FUC0-kU8Gu0jS_YcnXg-b_TRA%2Ffeatured&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7Cfce2c03b3a174bdeac5008da86af4cee%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637970384721228694%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=3bBuecaYChV0UwyJwRSQgRteepbGQC0tJRX1BuAet%2BE%3D&reserved=0>
Continuing Education Resources: https://libguides.osl.state.or.us/conted<https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Flibguides.osl.state.or.us%2Fconted&data=05%7C01%7CDarci.HANNING%40slo.oregon.gov%7Cfce2c03b3a174bdeac5008da86af4cee%7Caa3f6932fa7c47b4a0cea598cad161cf%7C0%7C0%7C637970384721228694%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=OGppXGoLfkpBQ4IcG0TxJy7R%2Ff%2BVkORi7FQZ7rhXnH4%3D&reserved=0>

[cid:image001.png at 01D8BC87.D8DCDE70]

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://omls.oregon.gov/pipermail/techtalk/attachments/20220830/4fe06810/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image001.png
Type: image/png
Size: 15548 bytes
Desc: image001.png
URL: <https://omls.oregon.gov/pipermail/techtalk/attachments/20220830/4fe06810/attachment.png>