CSS - Basic CSS Part 3

Instructors: Jess, Carmen, and Eda

Basic CSS

Before this session, please:

• Read Styling Lists and Links: How Do You Space List Items Using margin or line-height? and take notes
• Read Styling Lists and Links: How Do the Different list-style Properties Work? and take notes
• Read Styling Lists and Links: Why Are Default Link Styles Important for Usability on the Web? and take notes
• Read Styling Lists and Links: How Do You Style the Different Link States? and take notes
• Complete Build a Stylized To-Do List over the next few days

During this session, we’ll:

• Review notes
• Review notes
• Review notes
• Review notes
• We’ll talk through Build a Stylized To-Do List to help prepare you to build your own creative approach on your own over the next few days

After this session, please:

• Read Working with Backgrounds and Borders: How Do Background Image Size, Repeat, Position, and Attachment Work? and take notes
• Read Working with Backgrounds and Borders: What Is a Background Gradient, and How Does It Work? and take notes
• Read Working with Backgrounds and Borders: What Are Some Accessibility Considerations for Backgrounds? and take notes
• Read Working with Backgrounds and Borders: What Are the Different Ways You Can Add Borders Around Images? and take notes
• Complete Design a Blog Post Card solo over the next few days. There’s a lot of space to be creative with this lab.
• Read Lists, Links, CSS Background and Borders Review and take notes
• Complete CSS Backgrounds and Borders Quiz solo to test your understanding of CSS backgrounds and borders

Instructor notes

Styling Lists and Links: How Do You Space List Items Using margin or line-height?

We can space list items using both margins and line-height.

For example, we can use margin-bottom for each list item:

1<link rel="stylesheet" href="styles.css">
2
3<ul>
4  <li>Item 1</li>
5  <li>Item 2</li>
6  <li>Item 3</li>
7</ul>

styles.css:

1li {
2  margin-bottom: 40px;
3}

With line-height, we can also adjust the vertical spacing between list items. It also affects the spacing between lines, if the list items contain multiple lines of text.

Note that it only applies a height to lines, not adjusting the spacing between items.

For example, to set the line height to be twice the size of the font size, we can do this:

1li {
2  line-height: 2;
3}

Styling Lists and Links: How Do the Different list-style Properties Work?

To customize how list items are displayed, we can use the list-style property. It’s a shorthand for three other properties:

• list-style-type
• list-style-position
• list-style-image

With list-style-type, we can define the type of bullet point (for unordered lists) or number (for ordered lists).

The types of bullet points include discs, circles, squares, etc.

The types of numbers include decimal, Roman numerals, alphabetical characters, etc.

With list-style-position, we can adjust the position of the bullet point or number in relation to the list item’s content. The possible values are inside and outside. The default value is outside. It can be useful when there are multiple lines of text in a single list item and we want to control the alignment of the text.

With list-style-image, we can use an image as the bullet point. If the image is unavailable, the fallback will be square bullet points.

Styling Lists and Links: Why Are Default Link Styles Important for Usability on the Web?

Default link styles are important for accessibility. Their purpose is to provide visual cues for users to distinguish them from other non-interactive elements.

For unvisited links, the default color is blue, and the text-decoration is set to underline. Visited links have the default color of purple. These make it easier for users to find links and keep track of the ones they’ve visited.

When we want to change these default styles, we should make sure that links are still distinct from other text and the colors use proper contrast with the background.

Links also have default hover and active states. We should also consider them when customizing styles for links!

Styling Lists and Links: How Do You Style the Different Link States?

The different states of links include:

• link
• visited
• focus
• hover
• active

These states have some default styles to make navigation more intuitive and improve the user experience.

They can be styled using pseudo-classes. Pseudo-classes allow us to style elements based on their state. They start with the colon (:) character, followed by the name.

For example, the unvisited link state can be styled with a:link:

1a:link {
2  color: darkblue;
3}

Similarly, other states can be styled as well:

 1a:visited {
 2  color: green;
 3}
 4
 5a:hover {
 6  color: green;
 7}
 8
 9a:focus {
10  outline: 2px solid orange;
11}
12
13a:active {
14  color: pink;
15}

Build a Stylized To-Do List

We’ll go through this exercise to practice what we’ve learned so far and style links based on their states!