Web Design My Hobby : How to Style an HTML Tag Directly

External Stylesheet

Developers typically keep all of their CSS in an external stylesheet. In your HTML file, use the <link>element to link to your external stylesheet, which contains your CSS.

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

p {
    color: red;
    font-size: 20px;
}

Internal stylesheet

Another option for styling CSS is using an internal stylesheet. This means defining your CSS rules inside the <style> element in your HTML file.

<head>  
   <style>
       p {
           color: red;
           font-size: 20px;
       }
   </style>
 </head>

Inline Styles

Less frequently, you’ll find yourself reaching for inline styles. But they’re still important to know about because there are certain occasions when they come in handy.

With inline styles, you’ll add the styleattribute to an HTML tag followed by your CSS to style an element.

<p style="color: red; font-size: 20px;">This is my first paragraph.</p>
<p>This is my second paragraph.</p>

So in our case, the text of the first paragraph is red with a font-size of 20px. The second one, however, remains unchanged.

Let’s take a closer look at how and when to use inline styles. We'll also uncover why only one of our paragraphs is styled.

What’s an HTML Tag?

With inline styles, you apply CSS to the style attribute in the opening HTML tag.

Here, we have an element of text.

<p>This is my first paragraph.</p>

We can use inline styles to style this element by adding the style attribute to the opening tag, followed by CSS property-value pairs.

<body>
   <p style="color: red; font-size: 20px;">This is my first paragraph.</p>
   <p>This is my second paragraph.</p>
</body>

Let’s walk through how we used inline styles.

How to Use Inline Styles

Add thestyle attribute to the tag you want to style, followed by an equals sign. Start and end your CSS with double quotation marks.

<p style="....">

Add property-value pairs to the style attribute. Add a semicolon after each property-value pair.

color: red; font-size: 20px;

So when we put everything together, it looks like this:

<p style="color: red; font-size: 20px;">This is my first paragraph.</p>

Key Points to Know

Unlike internal and external stylesheets, inline styles don’t contain curly braces or line breaks. That is, write your CSS all on the same line when using inline styles.

Also, keep in mind that inline styles only affect the specific element that you add the style attribute with CSS property-value pairs to.

For example, in the code below only the first paragraph is styled red with a font-size of 20px.

<body>
   <p style="color: red; font-size: 20px;">This is my first paragraph.</p>
   <p>This is my second paragraph.</p>
</body>

If we want to style the text of both paragraphs with inline styles, then we need to add CSS to the style attribute to the second <p> as well.

<body>
  <p style="color: red; font-size: 20px;">This is my first paragraph.</p>
  <p style="color: red; font-size: 20px;">This is my second paragraph.</p>
</body>

However, if we used an external stylesheet, for example, we could easily style both paragraphs without duplicating our code by using a single CSS selector.

p {
    color: red;
    font-size: 20px;
}

<html>
  <head>
      <title>My New Webpage</title>
      <style>
       p {
           color: pink;
       }
   </style>
  </head>

<body>
   <p style="color: blue;">A blue paragraph.</p>
   <p style="color: blue;">Another blue paragraph.</p>
</body>
</html>

Web Design My Hobby

Pages

Tuesday, 10 March 2020

How to Style an HTML Tag Directly