DEV Community

Nanthini Ammu
Nanthini Ammu

Posted on

CSS Part 1

#webdev #css #beginners #tutorial

What is CSS?

  • It is used to style and design webpages.
  • HTML creates the structure(like headings, text, images) css makes it look beautiful(colors,layout,font,spacing).
  • Basic CSS structure consist of selector, Property, and value.
    • Selector - What to style.
    • Property - What to change.
    • Value - How to change.

Important Rule:

  • Each property ends with ;
  • Properties are inside { }
  • Selector comes before { }

In the below example

  • p → selector
  • color → property
  • red → value

Example:

<html>
    <head>
        <style>
/* css styling part */
        p {
        color: blue;
        font-size: 20px;
        }
        </style>
    </head>
    <body>

        <p>This is HTML</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Three main ways to add CSS to a HTML page:

  • Inline CSS.
    • CSS is written inside the HTML Tag. 
<p style="color: red; font-size: 20px;">This is HTML</p>
Enter fullscreen mode Exit fullscreen mode
  • Internal CSS.
    • CSS is written inside <style> tag in <head>. 
<head>
  <style>
    p {
      color: blue;
      font-size: 20px;
    }
  </style>
</head>
Enter fullscreen mode Exit fullscreen mode
  • External CSS.
    • CSS is written in a separate file.

Step 1 : Create a CSS file

p {
  color: blue;
  font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Link it in HTML

<head>
  <link rel="stylesheet" href="style.css">
</head>
Enter fullscreen mode Exit fullscreen mode

Element Selectors:

  • An Element Selector is used to select HTML elements by their tag name and apply styles to them.
  • It applies style to all elements of that tag type. 
p{
    color: green;
    font-size: 20px;
}
h1{
    color: blue;
    font-size: 30px;
}
Enter fullscreen mode Exit fullscreen mode

ID Selectors(#id):

  • An ID Selector is used to style one specific element using its unique id.
  • Starts with #. 
<p id="para1">This is a paragraph.</p>

<style>
    #para1{
        color: green;
        font-size: 20px;
    }
</style>
Enter fullscreen mode Exit fullscreen mode

Class Selector(.class):

  • It is used to style multiple elemets using the same class name.
  • Starts with .(dot). 
<p  class="text">This is a second paragraph.</p>
<h1 class="text">This is a heading</h1>

.text {
  color: blue;
  font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)