CSS stands for Cascading Style Sheets. CSS is used to give style and change the appearance of your structured HTML. CSS can be added to HTML in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file.
It’s best practice to store your styles in an external stylesheet, linked to from your HTML document’s head. For the purpose of this class, all your styles will be stored using the external method.
Let’s work on the index.html file of your interview directory that we created last week.
This is how you link to an external style sheet:
<!DOCTYPE html>
<html>
<head>
<!-- You link to the CSS here -->
<linkrel="stylesheet"href="assets/main.css">
<title>Interview</title>
</head>
<body>
<h1>My structure</h1>
</body>
</html>
This is what CSS looks like
body {
background-color: lavender;
}
h1 {
color: blue;
}
Let’s create the missing css file. First, look at the path in our HTML and then match the folder structure. Then paste the above into a new text editor window and save it as“main.css”
Folder structure should look like this
see what happens ✨
So, what’s going on? In CSS, you target something by using a selector. In our example, we used body and H1 as our selectors. Then, you write code following it.
CSS Selector Example
In addition to selectors, which are inherent to HTML, you can also create your own targets using IDs and classes.
CSS Introduction
CSS stands for Cascading Style Sheets. CSS is used to give style and change the appearance of your structured HTML. CSS can be added to HTML in 3 ways:
It’s best practice to store your styles in an external stylesheet, linked to from your HTML document’s head. For the purpose of this class, all your styles will be stored using the external method.
Let’s work on the index.html file of your interview directory that we created last week.
This is how you link to an external style sheet:
<!DOCTYPE html><html><head><!-- You link to the CSS here --> <link rel="stylesheet" href="assets/main.css"> <title>Interview</title></head><body> <h1>My structure</h1></body></html>
This is what CSS looks like
body { background-color: lavender;}
h1 { color: blue;}Let’s create the missing css file. First, look at the path in our HTML and then match the folder structure. Then paste the above into a new text editor window and save it as “main.css”
see what happens ✨
So, what’s going on? In CSS, you target something by using a selector. In our example, we used body and H1 as our selectors. Then, you write code following it.
In addition to selectors, which are inherent to HTML, you can also create your own targets using IDs and classes.