Goudham's Blog

CSS Basics and Selectors

Goudham's photo
Goudham
·

4 min read

Table of contents

What is CSS?

CSS - Cascading Style Sheet is a stylesheet language used to describe the presentation of a document written in HTML

Let's check how to write CSS and its usage, first let us see how to write CSS as inline property to an element

I require to change the color of a paragraph then CSS would like below.

<body>
    <p style="color: red;">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML</p>
    <p>CSS is among the core languages of the open web and is standardized across Web.You might have heard about CSS1, CSS2.1, or even CSS3. There will never be a CSS3 or a CSS4; rather, everything is now CSS without a version number.</p>
</body>

Yes, my paragraph has been changed to red color, we have used RED as a value for color this might be different for every browser and a high chance of different shades, so instead of RED as the value we are going to use hexadecimal equivalent to color red

Now let us do the same thing but CSS as part of the head tag

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS - Basics</title>
    <link rel="stylesheet" href="style.css">
</head>

style.css a separate file has been created in the same folder of the project, we can change the paragraph into RED from style.css as a separate file

similarly, we can change the background color, font-size, and add tooltips then our learning will be a never-ending process and we will be in a rabbit hole.

The best way to learn CSS is: how to target specific elements for styling as per our requirement, using selectors we are targeting the elements

CSS Selectors: defines a pattern to select elements to which CSS styling rules are applied

there are various types of selectors available, we have built a hotel menu card, and by selecting our favorite dish we are learning CSS selectors, below code can be used for implementation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lists</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>We are going to Build hotel <b>XYZ</b> menu card using lists</p>
    <ol class="starters"><h3>Starters </h3>
        <li> Honey Glazed onion rings</li>
        <li class="nonveg">Smoked chicken quesadilla</li>
        <li>Fried Calamari</li>
    </ol>
    <ol class="soups" type="I"> <h3> Soups </h3>
        <li class="nonveg">Thai Lime Prawn </li>
        <li class="veg">Cream of wild Mushroom</li>
        <li type="A">French Onion</li>
        <li class="vegan" type="a">Carrot Apply ginger</li>
        <li type="1">Potato Leek</li>
    </ol>
    <ul> <h3>Small Plates</h3>
        <li>Shrimp with pesto</li>
        <li>Crispy noodle pancakes</li>
        <li>Lamb with apricot sauce 
            <ol> <h4>Ingredients</h4>
                <li>Lamb</li>
                <li>Spicy Peanut</li>
                <li>Apricot sauce</li>
            </ol>
        </li>
    </ul>
    <dl> <h3>Desserts</h3>
        <dt>Tres Leches Cake</dt>
        <dd>Strawberry compte , strawberry balsamic</dd>
        <dt>House Made Icecream</dt>
        <dd>Black rasberry</dd>
    </dl>
</body>
</html>

Universal Selectors:

from the name we can identify, it selects all elements on the current web page

* used to select all elements, CSS code below

* {
    background-color: #51E1ED;
}

Individual Selectors:

if you want to select specific elements or tags then individual selectors can be used

in our case, I want to apply styling only to the hotel name which is written inside bold then we can use the individual selector

b {
    color: #E21717;
}

Disadvantage: have the disadvantage of using individual selectors is, styling will be applied to all bold tags sometimes which is not required

Class & ID selector:

elements can be targetted based on class and ID defines to element

I want to view the menu which belongs to class starters and display in italic format

. - used to mention class

# used to mention ID

.starters{
font-style: italic;
}

ID selector: if you want to target an element uniquely then an ID selector can be used, as per WWWC standards ID should be unique but the web browser won't throw any error even if the ID is repeated

#brrry{
    background-color: yellowgreen;
}

Chained or 'and' Selector:

if you want to target an element only when all given conditions are satisfied

I plan to target a menu that belongs to small plates and any allergy ingredient

li#allergy{
   background-color:rgb(82, 84, 78);
}

it selected all <li> elements and with ID=allergy

Combines Selector:

to target more than one element using combined selectors

here I am targeting paragraphs and classes belonging to soups to be displayed in pink and bigger font

p, .soups{
    font-size: large;
    color: rgb(255, 0, 136);
}

Inside an element selector:

I want to target vegan menu item which is under the unordered list

ol .vegan
{
    background-color: #6A1B4D;
}

Direct Child Selector:

to target an element which is a child.

here you can select all menu items which is under the descriptive list which is nothing but desserts

dl>dt{
    color: #E07C24;
}

Sibling Selector:

this can be denoted as ~ or + sign, I want to know the ingredient which is added next to the allergic item then the sibling selector can be used as peanut and other items are siblings

#allergy + p{
    color: white;
}

#iwritecode #hiteshchoudhary #anuragtiwari #html