DEV Community

Nanthini Ammu
Nanthini Ammu

Posted on

CSS Part 1

#css #tutorial #beginners #webdev

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

Attribute Selector:

  • Attribute selectors target HTML elements based on the presence or value of their attributes.

[attribute] :

  • Selects all elements that contain that attribute 
<input type="text" id="name" name="name">
<input type="age" id="age" name="age">

input[type] {
    color: blue;
    border: 2px solid;
    font-size: 20px;
}     

------------

<input type="text" required>
input[required] {
  border: 2px solid red;
}

------------
<input type="text" placeholder="Enter name">
input[placeholder] {
  border: 1px dashed blue;
}
Enter fullscreen mode Exit fullscreen mode

[attribute="val"]:

  • Selects elements where the attribute exactly matches the value. 
<input type="text">
<input type="password">

input[type="text"] {
  border: 2px solid blue;
}
input[type="password"] {
  background-color: #f5f5f5;
}
---------------
<a href="https://google.com">Google</a>

a[href="https://google.com"] {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

[attribute~="val"]:

  • Selects elements where the attribute contains a word (space-separated) that exactly matches the value. 
<p class="box red"> This is a paragraph.</p> <!-- Only this line gets styled -->
<p class="boxred"> This is a paragraph.</p>

p[class~="red"]{
    color: red;
    font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

[attribute^="val"]:

  • Select elements where the attribute starts with a specific value. 
<a href="https://google.com">Google</a> <!-- Only this line gets styled -->
<a href="http://example.com">Example</a>

a[href^="https"] {
  color: green;
}
Enter fullscreen mode Exit fullscreen mode

[attribute$="val"]:

  • Select elements where the attribute ends with a specific value. 
<a href="https://google.com">Google</a> <!-- Only this line gets styled -->
<a href="https://example.org">Example</a>

a[href$=".com"] {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

[attribute*="val"]:

  • Select elements where the attribute contains a specific value anywhere inside. 
<a href="https://google.com">Google</a>
<a href="https://mygooglepage.com">My Page</a>

a[href*="google"] {
  color: green;
}
Enter fullscreen mode Exit fullscreen mode

[attribute|="val"]:

  • It selects elements where the attribute value is:
    • exactly equal to the value, or
    • starts with the value followed by a hyphen (-) 
<p lang="en">Hello</p> <!-- this line gets styled -->
<p lang="en-US">Hello (US)</p> <!-- this line gets styled -->
<p lang="en*UK">Hello (UK)</p>

p[lang|="en"] {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)