Introduction to HTML
Introduction to CSS
Having a basic understanding of HTML code enables you to build simple websites and edit or troubleshoot websites developed using other tools.
What is CSS?
CSS stands for Cascading Style Sheets. CSS is a set of rules that tell a web browser how to style content on the internet. The words you are reading right now have a designated font, color and size derived from cascading style sheets. CSS can be used to make words bold or italicized. One of the big advantages of CSS is the ability to centralize a website's style in one location in order to make it easy to create a uniform look for a large collection of content. Let's say you created a website a few years ago, and now want to make it easily accessible from mobile devices. CSS lets you do this by creating a new style without modifying any of your content.
Why should I learn CSS?
CSS is integral in creating all visual content online. Having an understanding of how content and style combine and inform one another can give you a more valuable understanding of each. CSS is widely used, so if you work collaboratively, proper CSS will make it easier for others to understand, modify and reuse your work. An understanding of CSS increases your technical literacy and knowledge of how CSS and HTML communicate helps you prepare to learn a programming language.
Where will I encounter CSS?
If you build a site from scratch, you will almost certainly use CSS. Even if this is an unlikely scenario for you, many pre-made web platforms allow you to tweak appearance and functionality through CSS. Template blogs like Wordpress or Tumblr allow users to modify style extensively through CSS. Knowledge of HTML is fundamental, but knowledge of CSS will unlock exponentially more use options for web pages.
How do I use CSS?
One type of CSS is in-line CSS. This means that the instructions for styling content are inserted directly in-line with the content itself. However, if you are repeating the style every time you use it you are not taking full advantage of the control and simplicity CSS allows. The other type of CSS is external. External CSS exists as a separate file that is referenced in-line in your HTML. Multiple references to a single external file saves time and space in your code, and grants consistency and control to your projects.
Below are a few examples of the types of style that can be applied with CSS. These are basic examples of manipulating text. CSS can also be used for more complicated tasks, such as layout.
Here is a piece of in-line CSS written directly into an HTML web page. Below that markup, we see an example of what that CSS looks like when rendered by a browser.
|HTML||font size="6"> span style="font-family: Arial; color: rgb(255, 0, 0);">This text is Arial, large, and red /span> /font>|
|Display||This text is Arial, large, and red|
Here is a piece of HTML with external CSS. The HTML does not contain specific instructions but refers to a class. The class is stored in a separate .css file, and this is where we find the style instructions for the newspaper class. Finally, we see a representation of what this will look like when rendered by a browser.
|HTML||p class=“newspaper”>Paragraph text will be gray and Courier New./p>|
|Display||Paragraph text will be gray and Courier New.|
While the external CSS way may not look easier, when scaled across any number of pieces of content, it can save you a lot of time and effort.
What are some useful resources and where can I learn more?
W3 Schools is a great reference for looking up he basics of CSS (as well as HTML and other related acronyms). Can't remember proper CSS for getting your margins just right? Chances are, W3 Schools has the answer.
CSS Tricks is a blog that covers news in the CSS/web development world. Are you comfortable with the basics and want to learn something new and fun? CSS Tricks is your next stop.
Chrome has a built-in "Inspect Element" feature, which allows you to quickly view the source (HTML) as well as the CSS applied to an element on a web page. When you right-click and select Inspect Element, a bar will appear at the bottom of the browser that shows the page's source (HTML) on the left, and the CSS on the right. Both the HTML and CSS can be edited, and you can check and uncheck CSS rules to see how each one is combined to create the finished visual effect.
Similarly, there is a Firefox extension, Firebug, which does the same thing and is very valuable to learn by dissecting others' implementations.
Types of HTML Editor
These are editors intended for HTML coding (and other coding languages) that will offer syntax highlighting and even keyboard shortcuts to make the coding process easier.
These are editors for HTML coding that feature an interface that previews how the page will look on a web browser. Most WSIWYG editors are cross-platform, as are all the ones listed here.
Never Microsoft Word
Please don't do it.
Word leaves behind extraneous bits of code that makes your web page look and behave strangely. This also happens when you cut and paste. If you use Word to create your webpage, you may have to start over from scratch if you want to make changes later. You can try a Word HTML cleanup program like Textism if you've already done the work in Word; however, it is strongly suggested that you avoid Word for any kind of HTML file.
How do I make my webpage more accessible or easy to read?
First, a few basics:
- Think about accessibility. Easy to read fonts and colors and simple navigation make a page better for all of your users, and greatly improves access to information. This is a worthy goal for librarians.
- Use text and backgrounds with high contrast. Black text on a white background is easy for most people to read, while yellow text on a white background is not.
- Use colors that make text pleasant to read. Bright orange and blue may be the UIUC colors, but that orange is not easy on the eyes when reading from a screen.
- Use alt tags for images that describe the image (learn more about how to do this on the websites below.)
- Use text links rather than images for navigation. This makes it easy for everyone to get around your website.
- Include text describing audio content if possible.
- Use blinking or scrolling text. This does not promote accessibility and is difficult to read.
- Optimally, you should not use tables for layout. This causes great confusion for those reading your page with a screen reader, and can cause confusion even between sighted users with different browsers. Tables are best left for displaying information in a tabular format. CSS is generally considered the proper way to do accessible page layout. In short, do NOT, use tables for layout.
For more information, see:
- W3C Web Accessibility Initiative Quick Tips to Make Accessible Websites
- Color Scheme Designer with Accessibility Testing (the dropdown menu on the bottom right will simulate various color vision deficiencies so you can see if most users will be able to easily read your page).
- Web Pages That Suck (everything you need to know about what NOT to do)
- UIUC Functional Accessibility Evaluator
Setting up WordPress on your cPanel Account
- Go to your cPanel home page.
- Under the Software section, select Site Software.
- Select WordPress.
- Under the Install tab, select Show Advanced Configuration.
- Under Installation URL, keep the path blank (delete "wordpress").
- Create an Admin User (This is just any username you want to use).
- Create an Admin Password (This is just a password you want to use).
- Input the same Admin Password again to confirm you typed it correctly.
- Input your Email Address.
- Create a Blog name (This can be changed within the WordPress interface later).
- Create a Blog description (This can be changed within the WordPress interface later).
- Select the blue Install button.
- On the new page click the link to access the site. If you scroll to the bottom of your site, under Meta you will be able to Log in to manage your site.
Accessing your WordPress in the Future
- Login to cPanel.
- Under Software, click on Site Software.
- Click on WordPress.
- Under Manage select the appropriate URL.
- Scroll to the bottom of your site, and Log in under the Meta heading.
Outside Web Resources
Something you may hear from other people in the IT world is that the best place you can go for information about IT is the Internet. So here is a list of some of the best website building resources we've found that could not be neatly fit under all these other categories.
- This site offers tutorials and resources on creating websites, including:
Other web development resources
- Color Scheme Designer
- Use the color wheel on this site to develop an appealing color palettes and the hex and RGB codes you need for those colors.
- This site offers hex codes, RGB and CMYK recipes for colors for free, as well as a series of web creator cheat sheets for sale.
General Technology Tutorials
- This free site offers hands on lessons to learn multiple coding languages.
- This site offers both free and paid courses on specialized skills, including free courses on HTML, CSS and web accessibility.
- LinkedIn Learning
- UIUC students can access this site with thousands of video tutorials for free, including tutorials on web development.
- LITA Blog
- This blog for the Libraries and Information Technology Associate includes posts about trends, jobs and discussions related to technology and libraries.
- Hacker News
- This news aggregator gives links to stories related to technology.
- Stack Overflow
- Members of this community of programmers can ask questions of the group and answer others' questions.