Selectors and Visual Rules
In this course, you will learn how to style individual and groups of elements using various visual CSS rules.
Start
Key Concepts
Review core concepts you need to learn to master this subject
<link> Link Element
Purpose of CSS
Class and ID Selectors
Write CSS in Separate Files
Groups of CSS Selectors
Write CSS in HTML File
Selector Chaining
!important Rule
<link> Link Element
<link> Link Element
<!-- How to link an external stylesheet with href, rel, and type attributes -->
<link href="./path/to/stylesheet/style.css" rel="stylesheet" type="text/css">The <link> element is used to link HTML documents to external resources like CSS files. It commonly uses:
hrefattribute to specify the URL to the external resourcerelattribute to specify the relationship of the linked document to the current documenttypeattribute to define the type of content being linked
- 1The basic structure of every web page, HTML, is very plain on its own. The beautiful websites that you see across the internet are styled with a variety of tools, including CSS. CSS, or Cascad…
- 2Although CSS is a different language than HTML, it’s possible to write CSS code directly within HTML code using inline styles. To style an HTML element, you can add the style attribute directly…
- 3Inline styles are a fast way of styling HTML, but they also have limitations. If you wanted to style, for example, multiple elements, you would have to add inline styling to each element manually…
- 4Developers avoid mixing code by storing HTML and CSS code in separate files (HTML files contain only HTML code, and CSS files contain only CSS code). You can create a CSS file by using the **.css…
- 5Perfect! We successfully separated structure (HTML) from styling (CSS), but the web page still looks bland. Why? When HTML and CSS code are in separate files, the files must be linked. Otherwise,…
- 7CSS is not limited to selecting elements by tag name. HTML elements can have more than just a tag name; they can also have attributes. One common attribute is the class attribute. It’s also possi…
- 8We can use CSS to select an HTML element’s class attribute by name. So far, we’ve selected elements using only one class name per element. If every HTML element had a single class, all the style …
- 10CSS can select HTML elements by their tag, class, and ID. CSS classes and IDs have different purposes, which can affect which one you use to style HTML elements. CSS classes are meant to be reused…
- 11Specificity is the order by which the browser decides which CSS styles will be displayed. A best practice in CSS is to style elements while using the lowest degree of specificity, so that if an ele…
- 12When writing CSS rules, it’s possible to require an HTML element to have two or more CSS selectors at the same time. This is done by combining multiple selectors, which we will refer to as chaini…
- 13In addition to chaining selectors to select elements, CSS also supports selecting elements that are nested within other HTML elements. For instance, consider the following HTML: … ….
- 14In the last exercise, instead of selecting all h5 elements, you selected only the h5 elements nested inside the .description elements. This CSS selector was more specific than writing only h5. Addi…
- 15In order to make CSS more concise, it’s possible to add CSS styles to multiple CSS selectors all at once. This prevents writing repetitive code. For instance, the following code has repetitive st…
- 16Throughout this lesson, you learned how to select HTML elements with CSS and apply styles to them. Let’s review what you learned: - CSS can change the look of HTML elements. In order to do this, …
- 1In this lesson, you’ll learn the basic structure and syntax of CSS so that you can start styling web page elements.
- 2To style an HTML element using CSS, you need to write a CSS declaration inside the body of a CSS selector. h1 { color: blue; } The example above selects the element. Inside of the selector’s…
- 3If you’ve ever used a formatted word processor, chances are that you probably also used a feature that allowed you change the font you were typing in. Font refers to the technical term typeface , …
- 5In CSS, the font-weight property controls how bold or thin text appears. p { font-weight: bold; } In the example above, all paragraphs on the web page would appear bolded. The font-weight …
- 6No matter how much styling is applied to text (typeface, size, weight, etc.), text always appears on the left side of the browser. To align text we can use the text-align property. The text-align…
- 9CSS has the ability to change the background of an element. One option is to make the background of an element an image. This is done through the CSS property background-image. Its syntax looks lik…
- 11Incredible work! You used CSS to alter text and images throughout a website. Throughout this lesson, you learned concepts including: - CSS declarations are structured into property and value pair…
What you'll create
Portfolio projects that showcase your new skills
Healthy Recipes
Using CSS selectors, you’ll give a recipe website style.
Olivia Woodruff Portfolio
It's time to build fluency in CSS Fundamentals. In this next Pro Project, we're going to practice Visual Rules in CSS so you can hone your skills and feel confident taking them to the real world. Why? It's important to have a good grasp on the basic styling principles of a webpage. What's next? A coffee lover, photographer, developer. You got this!
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
Selectors and Visual Rules
Start