Deekshith's TOP Dashboard - CSS

Introduction

CSS is Cascading Style Sheets. It is a style sheet language used for describing the presentation of a document written in HTML or XML.

CSS Syntax

CSS is made up of selectors and declaration blocks. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

                        selector {
                         property: value;
                         property2: value2;
                        }

As I'm starting out, I'm typing equals (=) in place of colon (:) in my CSS code. It might take a while to get accustomed to the syntax but hopefully I will get there sooner.

Selectors

There are different types of selectors in CSS:

  • Element Selector: Selects HTML elements based on their tag name. Example: p { color: blue; }
  • Class Selector: Selects HTML elements based on their class attribute. Example: .classname { font-size: 14px; }
  • ID Selector: Selects a single HTML element based on its ID attribute. Example: #idname { margin: 10px; }
  • Universal Selector:Selects all HTML elements. Example: * { box-sizing: border-box; }

Declarations

Declarations consist of a property and a value. The property is the aspect of the element you want to change, and the value is what you want to change it to. Example: color: red; changes the text color to red.

Multiple declarations are separated by semicolons within the declaration block.

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

In the above example, the selector is p, and the declaration block contains two declarations: color: red; and font-size: 16px;.

CSS rules can be combined to create more specific selectors. For example:

                        div p {
                         color: green;
                        }

In this example, the selector div p selects all <p> elements that are inside a <div> element and changes their text color to green.

Adding CSS in HTML

There are three ways to add CSS to HTML: Inline CSS, Internal CSS, and External CSS.

Inline CSS

Inline CSS is used to apply a unique style to a single HTML element. To use inline CSS, add the style attribute to the relevant element. The style attribute can contain any CSS property.

                        <h1 style="color:blue; text-align:center;">This is a heading</h1>

Internal CSS

Internal CSS is used to define a style for a single HTML page. To use internal CSS, add a <style> element inside the <head> section of the HTML page.

                        <head>
                         <style>
                           body {
                            background-color: lightblue;
                           }
                           h1 {
                            color: white;
                            text-align: center;
                           }
                           p {
                            font-family: verdana;
                            font-size: 20px;
                           }
                         </style>
                        </head>

External CSS

External CSS is used to define styles for multiple HTML pages. To use external CSS, you need to create a separate CSS file and link it to your HTML file using the <link> element inside the <head> section of the HTML page.

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

In the above code, "styles.css" is the name of the external CSS file.

CSS Comments

Comments in CSS are used to explain the code and make it more readable. Comments are ignored by browsers and do not affect the rendering of the document. In CSS, comments are written inside /* and */.

                        /* This is a comment in CSS */ 
                        body {
                         background-color: lightblue; /* This sets the background color */
                        }

Assignments

Some of the assignments will have their CSS code as internal CSS code.

Top Assignment on Selectors

here Im going to use some selectors (class selectors, id selectors, type selectors and universal selectors) to showcase the assignment here.

CSS Methods

I have attached an external css file to this project in the ~/css/styles.css file in the repo. Thats how external method works

I have also used internal css method in this file itself in the <head> section to set some styles for the body and h1 tags. I am assigning id="Top Assignment on Selectors" to the heading of this section. Now to target this id selector in the internal css method, I have used the following code:

                            #Top\ Assignment\ on\ Selectors { 
                             color: darkblue; 
                            }

As you can see the back slashes are used to escape the spaces in the id selector. Ideally one should never use spaces and use hyphens or underscores instead. Hyphens are more preffered. Now the heading of this section is dark blue colored because of the above internal css code.

Another method is the inline css method, which is used to apply a unique style to a single HTML element. To use inline CSS, add the style attribute to the relevant element. The style attribute can contain any CSS property.

This text is green and bold because of the inline css method used here in this <p> tag.

Here is the code snippet for inline css:

                        <p style="color: green; font-weight: bold;"> This text is green and bold because of the inline css method used here in this <p> tag.</p>

Class Id Selectors

In the previous section we saw how I selected id="Top Assignment on Selectors" using the internal CSS method. In this assignment we need to assign and understand how class and id selectors work. In heirarchy, id selectors have more specificity than class selectors. This means that if both an id selector and a class selector target the same element, the styles defined in the id selector will take precedence over those defined in the class selector.

This paragraph has both a class and an id selector. The text color should be red because of the id selector having more specificity than the class selector.

Here is the code snippet for the above paragraph:

                                <style>
                                 .example-class {
                                  color: blue;
                                 }
                                 #example-id {
                                  color: red;
                                 }
                                </style>  
                                <p class="example-class" id="example-id"> This paragraph has both a class and an id selector. The text color should be red because of the id selector having more specificity than the class selector.</p>

With class selector, we can select all the elements with same class at a time and write a single css syntax that applies to all the elements with that specific class. But this doesn't apply to id because we can assign a specific id to only one element.

now lets group some selectors

Im writing these next 4 list items with classes and ids named after themselves.

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

Now I will group the class selectors and id selectors separated by comma in the internal css method to apply same styles to them. The code snippet is as below: 

                        .list-item-1, .list-item-2, .list-item-3, .list-item-4 {
                         color: purple;
                         font-weight: bold;
                        }
                        #list-item-1, #list-item-2, #list-item-3, #list-item-4 {
                         font-size: 18px;
                        }

Chaining Selectors

Now lets look at chaining selctors

This is a list of elements with multiple classes defined as themselves.

  • class"chain class-one"
  • class"chain class-two"
  • class"chain class-three"

The code snippet is as follows:

                            .chain.class-one {
                             color: orange;
                            }
                            .chain {
                             color: green;
                            }

As you can see how the 1st one is in red color while the other two are in green color. If we write the classes assigned to an element with no space we are chaining the selectors to pick the element that contains specifically all those selectors.

Descending Combinators

This is similar to how you navigate through folders in a linux/ wsl command line with cd command. more or less like the folder tree. If you have more than 1 similar parent and child elements like <p class="paragraphs"> within <h2 class="subheading">tags and you want to target a specific <p class="paragraphs"> child element within a specific <h2 class="subheading"> element, we use descending combinators.

Here is an example: (observe the syntax, a single space between the classes defines descending combinator.)

                            h2.subheading p.paragraphs {
                             color: brown;       
                            }

In the above code snippet, we are targeting only the <p class="paragraphs"> elements that are descendants of <h2 class="subheading"> elements. Any <p class="paragraphs"> elements that are not within an <h2 class="subheading"> element will not be affected by this rule.

A more practical use case would be to target all the < p > elements within all < h3 > elements with a single command as follows:

   
                            h3 p {
                             font-style: italic;
                            }

Now this will format all the <p> elements within all <h3> elements with italic font style.

Cascade Assignment

I'm copying the html code directly from the assignments provided by the TOP here to finish my assignment.

Here is the assignment HTML code:

    
                            <p class="para">I'm just a paragraph with extra bold text!</p>
                            <p class="para small-para">I'm a smaller paragraph, also with extra bold text</p>
                            <button id="confirm-button" class="button confirm">Confirm</button>
                            <button id="cancel-button" class="button cancel">Cancel</button>
                            <div class="text">I'm a div with thin text!</div>
                            <div class="text">I'm a div with thin text and a child div!
                             <div class="text child">I'm a smaller child div with extra bold text.</div>
                            </div>

Rendered HTML from the above code with CSS modification:

I'm just a paragraph with extra bold text!

I'm a smaller paragraph, also with extra bold text!

I'm a div with thin text!
I'm a div with thin text and a child div!
I'm a smaller child div with extra bold text.

Here is the CSS Code for the above assignment HTML code:

                            .para {
                                 font-weight: bold;
                            }
                            .para.small-para {
                                 font-size: 0.7em;
                            }
                            #confirm-button {
                                 background-color:green
                            }
                            .button {
                                 font-weight:bold;
                            }
                            #cancel-button {
                                 background-color:red
                            }
                            div.text {
                                 font-weight: thin;
                            }
                            div .child{
                                 font-weight: bold;
                                 font-size: 0.7em;
                            }

Hierarchy/Cascade

I learnt this through this experimentation. Let's unroll this stuff!!

On my local machine, it was working fine. The issue was github.io pages was not interpreting my css properly and some of the code was not reflecting there.

I added CSS internally and I also made an external styles css sheet. I defined some stuff in the external sheet, but it was not reflecting in this page. I wondered what the reason would be?

Then I realised, Internal CSS takes precedence over External CSS when both are applied to the same element. BUT, BUT, BUT... I didn't define those classes in the internal CSS code. I wondered why it was conflicting with the external CSS file.

Then I made this simple fix. In the head element, Style code was written last and link tag was written first. I changed the order. cut the link tag line and paste it at the bottom of style element within the head element.

I remembered that the last line has more precedence in CSS hierarchy. So the external CSS file should be written last in the head element to take precedence over the internal CSS code.

And it worked!

I had to make couple of git commits to figure this out though! It did help me understand the CSS cascade better. (That itch to not make a git commit until there is a significant change was making me feel bad though LOL.)

The Box Model

The CSS box model is a fundamental concept in web design and development that describes how elements on a web page are structured and how they interact with each other. According to the box model, every HTML element is represented as a rectangular box that consists of four main components: content, padding, border, and margin.

  • Content: This is the innermost part of the box and contains the actual content of the element, such as text or images.
  • Padding: Padding is the space between the content and the border. It creates space around the content within the element.
  • Border: The border is a line that surrounds the padding (if any) and content. It can be styled with different colors, widths, and styles (solid, dashed, etc.).
  • Margin: Margin is the outermost layer of the box and creates space between the element and other elements on the page. It separates the element from its surroundings.

The total size of an element's box is determined by adding together the width and height of the content area, along with any padding, border, and margin. Understanding the box model is crucial for controlling layout and spacing in web design.

                        
                    +---------------------------+
                    |         Margin            |
                    |  +---------------------+  |
                    |  |      Border         |  |
                    |  |  +---------------+  |  |
                    |  |  |   Padding     |  |  |
                    |  |  |  +---------+  |  |  |
                    |  |  |  | Content |  |  |  |
                    |  |  |  +---------+  |  |  |
                    |  |  +---------------+  |  |
                    |  +---------------------+  |
                    +---------------------------+

Syntax for box model properties:

                        element {
                      box-sizing: content-box; /* or border-box */ 
                         width: 300px; /* Width of the content area */
                         height: 200px; /* Height of the content area */
                         padding: 20px; /* Space between content and border */
                         border: 5px solid black; /* Border around the padding */
                         margin: 10px; /* Space outside the border */
                        }

Block vs Inline Elements

In HTML and CSS, elements can be classified into two main categories based on their display behavior: block-level elements and inline elements. Understanding the difference between these two types of elements is crucial for effective web design and layout.

Block-Level Elements

Block-level elements are those that take up the full width available in their parent container and start on a new line. They create a "block" of content that is visually separated from other elements. Common block-level elements include:

  • <div>
  • <p>
  • <h1> to <h6>
  • <ul> and <ol>
  • <section>

Inline Elements

Inline elements, on the other hand, do not start on a new line and only take up as much width as necessary to fit their content. They flow within the surrounding text and do not create a separate block. Common inline elements include:

  • <span>
  • <a>
  • <strong>
  • <em>
  • <img>

Key Differences

  • Display Behavior: Block-level elements start on a new line and take up the full width, while inline elements flow within the text and only take up as much width as needed.
  • Box Model: Block-level elements respect all box model properties (width, height, margin, padding, border), while inline elements only respect horizontal properties (margin-left, margin-right, padding-left, padding-right).
  • Nesting: Block-level elements can contain other block-level and inline elements, while inline elements can only contain other inline elements.

Understanding when to use block-level versus inline elements is essential for creating well-structured and visually appealing web pages.

Go to top