CSS – basic introduction

Adding style using CSS

After creating our markup, its time to add some styling to it using CSS or Cascading Style Sheets.

 

Understanding selectors and properties

A CSS style contains a selector and has its own properties. A selector is a pattern that is used to select element in an HTML markup.

 

Id’s and Class

The most common selectors are id and class. ID is used to define the uniqueness of an element whereas class is used for grouped elements.

The HTML tag

<div id='box' class='red'>This is a red box</div>

The CSS Style

#box {
    height:100px;
    width:100px;
}

.red {
    background-color: red;
}

 
In the above example, you can see that the div element has an id of ‘box’ and a class of ‘red’. You can now define the properties of those selectors.

Adding style to HTML

There are 3 ways to add style to your HTML:

  • Internal
  • External
  • Inline

Internal – you can add style inside the HTML file using style tag inside the head tag.

<style>
.red {
    background-color: red;
}
</style>

External – you can add style by using an external file that is referenced in the link tag inside the head tag.

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

Inline – you can add style directly inside the HTML tag using the style attribute.

<div style='background:red'>This is a red box</div>

 

Conclusion

By understanding the basic concept of selectors and properties, you can now explore different ways on how to style your HTML markup. Here’s a good place to look for selectors and properties.

Also, by choosing a way to add your style to your HTML depends on what kind of project you are going to create. As much as possible don’t use inline styles as this is difficult to maintain. If you are creating a small single file HTML use internal style.

Responses

eighteen + eighteen =

This site uses Akismet to reduce spam. Learn how your comment data is processed.