Syntax and Selectors
Learn how to add styles websites with CSS and how to use selectors to apply styles to specific elements.
StartKey Concepts
Review core concepts you need to learn to master this subject
<link>
Link Element
Purpose of CSS
Write CSS in Separate Files
Write CSS in HTML File
Inline Styles
Separating HTML code from CSS code
Class and ID Selectors
Groups of CSS Selectors
<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:
href
attribute to specify the URL to the external resourcerel
attribute to specify the relationship of the linked document to the current documenttype
attribute to define the type of content being linked
Setup and Syntax
Lesson 1 of 2
- 1While HTML is the fundamental structure of every web page, it can be visually unappealing on its own. Cascading Style Sheets or CSS is a language we…
- 2The diagram on the right shows two different methods, or syntaxes, for writing CSS code. The first syntax shows CSS applies as a ruleset, while the second shows it written as an inline style….
- 3Although 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 …
- 4As previously stated, inline styles are not the best way to style HTML elements. If you wanted to style, for example, multiple elements, you would have to add inline styling to each element manua…
- 5Developers 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 an external stylesheet by usin…
- 6Perfect! We successfully separated structure (HTML) from styling (CSS), but the web page still looks bland. Why? When HTML and CSS codes are in separate files, the files must be linked. Otherwise…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory