DEV Community

Chandan B S D
Chandan B S D

Posted on

How to design a beautiful website? CSS Super Simplified Explanation

What is CSS?

  • CSS stands for Cascade Styling Sheets
  • It is a set of rules that determine the look and feel of web pages.

How do we write CSS?

  • First we select the HTML element( or tag)
  • Then we provide key-value pairs that depict the element’s design.
    style-name: value;
Enter fullscreen mode Exit fullscreen mode


Where do we write CSS?

We can write CSS in 3 possible locations:

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

  • CSS rules are specified as values to the style attribute of the tags

  • Disadvantages:

    • Redundant Code: Say we have ten paragraphs whose text color we need to set to red, then we will have to specify the style ten times which is not a good approach

    • Hard to maintain: Suppose we need to update the style of all paragraph tags, then we would have to search and manually change every occurrence of the p tag.

    • Impacts page performance: Inline CSS often increases the HTML document's total size and the webpage's loading time.

    • Decreases Accessibility: The purpose of HTML is to only provide structure to content. Mixing style rules and HTML will make it harder for screen readers to interpret the webpage.

Internal CSS

  • Here too we write the CSS within the HTML document. However, all CSS instructions are grouped together and placed under a special HTML tag i.e, <style> </style>.

  • Advantages:

    • Allows CSS styles to be reused between elements
    • Improve the readability and maintainability of code.
  • Disadvantages:

    • It still increases the size of the HTML document
    • Code may be reused within the same webpage but cannot be shared between multiple web pages under the same website.

External CSS

  • Here we write all the CSS elements in its own .css file and then we use the <link> </link> HTML tag to connect the webpage to the CSS file, i.e. <link rel = "stylesheet" href = "{ Enter location of CSS file}" />

  • Advantages:

    • Complete Code Reusability
      • Similar elements in the same webpage can share the styles
      • We can have a shared CSS file between webpages (Ex: The header, navbar, and footer on any webpage under the same website may share the same styling)
    • Improves Code Readability and Maintainability
    • Web pages load faster since HTML files are not large due to CSS stylings.

<link rel = "stylesheet" href = "index.css">
        <p>This line is white but its background is black</p>
        <p>This line is also another white line but its background is black</p>
Enter fullscreen mode Exit fullscreen mode
    background-color: black;

p {
    color: white;   
Enter fullscreen mode Exit fullscreen mode

CSS Selectors

If we write internal or external CSS instead of inline CSS, we need to understand a CSS concept called selectors. There are three main types of selectors

  • Element Selectors
  • Class Selectors
  • Id selectors

Element Selectors

  • Here we use the name of the tag to define the styles.
  • The styling will be applied to all occurrences of that tag on the webpage

Class Selectors

  • Class selectors allow us to identify one or more elements and style them the same.
  • We do this by giving the selected tags a class attribute and a common value.
  • We then write the value prefixed with the. while specifying the CSS rule

ID selectors

  • ID selectors allow us to identify a single element uniquely
  • We can do this by using the id attribute
  • We then write the value prefixed with the # while specifying the CSS rule

How does CSS handle conflicts?

  • We saw multiple ways (element, class, and id) to select elements and give them style. We also visited the locations (inline, internal, and external) where the CSS rules may be specified.
  • If we use some or a combination of these, then there is a possibility that different styles are specified for the same element.
  • To handle such ambiguity, the browser uses a concept known as CSS Specificity. In the simplest terms, the style with the higher specificity takes precedence (or wins).
  • Precedence based on Location of CSS Rule:
    • Inline CSS has the highest precedence
    • Internal CSS comes next
    • External CSS is the least dominant.
  • Precedence based on Type of CSS Selector:
    • ID selector has the highest precedence
    • Class selector comes next
    • Element selector is the most minor
  • What if the same selector is used at the same level? What happens then?
    • In this case, the last rule takes precedence over the earlier rule.

Top comments (0)