Hypertext Markup Language (HTML) is the foundation for everything you see on the web. A link to the UCB Library looks like this in HTML:
<a href="http://lib.berkeley.edu">UCB Library</a>
While it can seem intimidating, the basic structure is quite simple. First there is a tag,
<a href="...">, followed by some content, UCB Library, and completed with a closing tag
</a>. Notice all of the opening <...> and closing </...> tags in these examples:
<h1>Title of the page</h1>
<p>These will put line breaks before and after the text.</p>
<ul><li>1st bullet point</li><li>2st bullet point</li></ul>>
What is it?
Cascading Style Sheets (CSS) are like a rulebook for the design of your website. CSS makes it easy to tinker with the look and feel of your site -- for example, change one line of code and all your text will turn blue. It also ensures consistency across your site; for example, with CSS you can be certain that all your page titles are the same size, color, and font.
How does it work?
There are three ways to add CSS to your site:
- Add CSS to your HTML tags ("inline") to control how an individual element looks.
- Add it to your page's Head section to make rules apply across the whole page.
- Or best, link to a separate CSS file to manage the design of an entire site.
Examples of Inline CSS
This text is blue.
<p style="color:#4437E0">This text is blue.</p>
This text bigger and in shouty caps.
<p style="font-size:16px;text-transform:uppercase">This text bigger and in shouty caps.</p>
<p style="padding:5px;background-color:#E0b937;border:1px #665314 solid">I created a box around this text.</p>
Learn More about CSS:
Have you ever wished you could see the code behind the webpage? You can!
Why inspect a webpage?
- Learn how other web developers create their pages.
- Troubleshoot your own pages.
Option 1: View Page Source
- Use to view the HTML behind a page.
- Option located in the menus of most browsers. (Note: In Safari, you will need to enable the Developer menu in your preferences.)
- Instructions for Chrome: From the View menu, go to Developer, then View Source.
Option 2: Web Inspectors
- Web inspectors and other developer tools give you a dynamic and interactive view into a webpage’s code.
- Find where the code corresponds to a specific part of the webpage.
- Preview how changes in the code will look in the browser.
- Web inspector tools are available in most browsers. (Note: In Safari, you will need to enable the Developer menu in your preferences.)
- Instructions for Chrome: From the View menu, go to Developer, then Developer Tools. An interactive sidebar will appear.
A What-You-See-Is-What-You-Get editor, or WYSIWYG (pronounced whizzywig), allows you to create content with a simple user interface, instead of manually writing out HTML and CSS. WYSIWYGs are surprisingly powerful tools for online writing, whether you're using email clients like Gmail, posting content to bCourses, blogging or posting on social media.
Let's take a closer look at a few common features of WYSIWYGs to help you create richer content and communicate more clearly online.
Using a Gmail Editor
What do all of the buttons do when you compose a Gmail (or Berkeley email) message? Most of us know how to add a link or an attachment to our emails, using the buttons at the bottom of a Gmail message you're composing.
But have you explored all of the formatting options by selecting the A button before?