Hello CSS!

Friday, Jul 10, 2020
Frontend

While HTML provides structure to our document, CSS provides style. We write the style rules in a css file and link our html document to that file using <link> tag inside <head> section:

<head>
  ...
  <link href="css/style.css" rel="stylesheet">
  ...
</head>

In the above example, css styles are in style.css inside of css directory and its relationship to html is stylesheet.

CSS Selectors

While the styling syntax is simple, we need a way to tell CSS which element of html we want to style. This is done by using CSS selectors. We are just going to focus on two types to begin with:

Using element name

For <p>, use p; for <h1> use h1; its that simple:

p {
  color: red;
}

a {
  background-color: grey;
}

img {
  width: 400px;
}

Multiple elements can be styled in one go, for example, center-aligning text for both h1 and paragraph elements will be:

h1,
p {
  text-align: center;  
}

Using classes

If you want to target a specific element or a group of elements, classes come to rescue. You give a class name to the element you want to target in html and use ‘dot’ notation as css selector:

HTML:
...
<p class="intro">...</p>
...

CSS:
.intro {
  color: green;
}