You're reading for free via Christine Vallaure's Friend Link. Become a member to access the best of Medium.
Member-only story
CSS for UI Designers
HTML & CSS: a quick and easy introduction for total beginners
If you’ve ever wondered how websites are built, you’ve come to the right place. This guide is for total beginners, particularly UI designers wanting to understand the basics of HTML and CSS — the essential building blocks of every web page.
Video version of this article:
What is HTML?
HTML (HyperText Markup Language) is the backbone of a website. It provides the structure and tells your browser what each piece of content is. You can actually take a peek at a website’s HTML anytime. Just right-click on a web page (for example, in Chrome) and select Inspect.
This opens up the Developer Tools, where you can see the HTML structure of the page you’re viewing. You can even make temporary changes to the code just to experiment! Don’t worry. These changes only exist in your browser and will disappear as soon as you refresh.
HTML elements & tags
HTML consists of elements, essentially characters enclosed within angled brackets known as tags. Most HTML elements have an opening tag and a closing tag.
For example:<p> is the opening tag, and </p> is the closing tag. Tags like these define the type of content they enclose. The <p> tag, for instance, tells the browser to display the enclosed content as a paragraph. The tags themselves are not visible on the page.
HTML also has headings, like <h1> to <h6>, which provide different levels of headings. The <h1> tag is the most important (often used for the main title), while <h6> is the least important.
You can also add attributes to tags, which provide extra information, like using the class attribute to apply styles. I will tell you more about that in a minute.
Some tags, called self-closing elements, don’t require a closing tag. For example, the <img> tag is used to display an image and looks like this:
The src attribute specifies the image source, while alt provides a description of the image, which is useful for accessibility.
Setting Up an HTML Page
A basic HTML page has a simple structure:
In this example, the <head> section contains information for the browser that isn’t displayed, like the page title and meta descriptions for search engines. The <body> contains everything you see on the page—text, images, buttons, and more.
More than one html page
Usually, a website’s homepage is named index.html by convention. You can also create subpages, like an about page or projects. To link to those subpages, you can use the anchor tag, a. This creates a clickable link that you can place anywhere on your page. You can also link to external websites outside of your page.
To link different pages within your site, you can use the anchor (<a>) tag. This creates a clickable link that takes users to the about.html page when clicked. Note that you can link internally or to external pages using their URL.
I will just cover the total basics for a quick intro. Here is a list of tags you might find helpful to explore further:
However, if you open a pure HTML page, you’ll notice that it doesn’t look very nice while the content is there. And that is where CSS comes in.
What is CSS?
CSS (Cascading Style Sheets) controls the appearance of your HTML elements — it’s what makes your website look good. CSS allows you to apply styles like colors, fonts, spacing, and layout to your HTML elements.
To link a CSS file to your HTML, you add a link to the <head> section:
How CSS Works
Now imagine your HTML elements as invisible boxes. CSS allows you to create rules that control how each box and its content look and behave.
A CSS rule consists of two main parts, a selector, which targets one or more elements in your HTML, and a declaration, which defines how these elements should be styled. The declaration itself is composed of a property, such as color, and a corresponding value, like a hex code for the color.
- Selector: Targets an element or group of elements.
- Declaration: Defines how the element should look.
You can add multiple declarations within the curly brackets.
And you can also combine multiple selectors to apply the same style to several elements.
Classes
In CSS, selectors can target plain tags, but you’ll often see classes used instead.
Classes are assigned inside the HTML tag and then referenced in CSS, simply by adding a dot before the name.
Universal selector *: Classes are more flexible and reusable, as they can be applied to different elements for consistent styling. There are more ways to use selectors in CSS. Worth knowing are the Universal Selector, which is a star sign and targets the entire page.
Id: We also have IDs, and they are assigned pretty much like classes in HTML and then called in CSS by putting a hashtag before the name. However, IDs should only be used for styling one specific element, not multiple. While you can use them in CSS, they’re typically used in JavaScript for dynamic behavior.
The Cascade Effect
An important thing to remember about CSS is that it’s cascading. If multiple styles are applied to the same element, the last one takes priority. For example, if you write two conflicting rules for the color of a paragraph, the one written last will take precedence.
Getting Started
To start building your own web pages, you’ll need a code editor. Visual Studio Code is a popular choice, but for beginners:
I recommend trying out Cursor Code Editor, which includes an AI-powered assistant to help you write and understand code. This tool can really accelerate your learning and help you avoid common pitfalls.
I have a full course on how to get started coding with cursor as an UI designers for total beginners here:
Like this article?
Remember to subscribe to my articles here on Medium and follow me on moonlearning.io, my Newsletter or LinkedIn where I teach and talk about UI Design, Figma + Code.
