Learn more

Basics of CSS

Whats’s CSS? Cascading Style Sheet, popularly known as “CSS” defines the look and feel of pages by adding styles to HTML elements. CSS Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes…

Whats’s CSS?

Cascading Style Sheet, popularly known as “CSS” defines the look and feel of pages by adding styles to HTML elements.

CSS Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

CSS is among the core languages of the open web and is standardized across Web browsers according to W3C specifications.

Like HTML, CSS is not a programming language. It’s not a markup language either. CSS is a style sheet language. CSS is what you use to selectively style HTML elements. For example, this CSS selects paragraph text, setting the color to red:

p { color: red; }

Steps:

  1. Inside your first-website folder, create another new folder called styles.
  2. Using a text editor, paste the three lines of CSS shown above into a new file.
  3. Save the file inside your styles folder with a filename of style.css.
  4. To make the code work, we still need to apply this CSS (above) to your HTML document. Otherwise, the styling won’t change the appearance of the HTML. Open your index.html file. Paste the following line inside the HTML head (between the <head> and </head> tags):
    “<head> <link href="styles/style.css" rel="stylesheet" /> </head>“
  5. Save index.html

Why CSS may seem frustrating?

Other LanguageCSS
Hey Computer,
1. Do this
2. Then do this
3. In this order
4. Like I said.		Hey Computer,
Here’s a list of properties.
Can you apply them to this element, please?
Provides instructions to the computer describing exactly what you want it to do and how to do it.Provide requests to the browser about what properties to apply to an element in addition to existing properties (generally by the browser)

Key Learning Outcomes

  1. How is CSS applied to an element?
  2. How the browsers pick what rules to apply?
  3. How CSS properties work and interact.

CSS:

  1. Declarative: It applies optional styles.
  2. Fault-tolerant: And the browser understand this.
  3. Contextual: Properties can relate to one another.

CSS is a scripting style language.

Concept: Declarative Vs Imperative

ImperativeDeclarative
Provide instructions to the computer describing exactly what you want it to do and how to do it.Provide descriptions to the computer explaining the desired outcomes without providing step-by-step instructions.
The computer executes those instructions, faults and all.The computer decides how to produce the result.
.container {
background-color: purple;
width: 75%;
}
//We leave it on the browser to decide the width of other part.
Active Commands:
JavaScript tells the browser exactly what to do and how to do it.		Passive Request:
HTML & CSS are requests for how we want the browser to render elements.

Therefore, CSS is fault-tolerant. If the CSS contains an error or the browser can’t interpret it, the browser ignores the code and moves on, ensuring that the page’s content still reaches the visitor.

Websites are a mix of languages from a variety of sources.

  1. HTML- Declaratve
  2. CSS- Declarative
  3. JavaScript-Imperative

Browser Rendering Sequence

  1. Processes HTML markup and build a DOM tree. (DOM means Document Object Model)
  2. Processes CSS markup and build a CSSOM tree.
  3. Combine DOM & CSSOM into a render tree.
  4. Compute each node and calculate the layout of the render tree.
  5. Paint individual nodes in the viewport.

Note: JavaScript can intervene at any point of time to make changes to DOM & CSSOM.

Thus, Rendering (Stops, Restarts, Recalculate)

What’s Cascade Algorithm

It factors in the various parts of the rule set and assign weights to each of them. The algorithm continues to cascade down until it finds a winner; which it to say the rule with most weight .

Origin & Importance

Specificity

Source Order

Inheritance

Origin & Importance

Note:

  1. User-agent style (*)
  2. User-style (**)
  3. Developer Style (***)

!important – moves to front of cascade algorithm.

Specificity

Selector Specificity Best Practices.

  • Use the lowest specificity possible that gets job done.
  • Use IDs in CSS only when absolutely necessary.
  • General Rule: Inline Style > IDs > Classes > Elements

Checkout Polyplane.app/

Let’s Understand Syntex First

.selector{
property: property value;
}

Here:

  1. Selector:
  2. Declaration: “Property + Property Value”
    • Parameter:
    • Values:

Note the other important parts of the syntax:

  1. Apart from the selector, each ruleset must be wrapped in curly braces {}.
  2. Within each declaration, you must use a colon (:) to separate the property from its value or values.
  3. Within each ruleset, you must use a semicolon (;) to separate each declaration from the next one.
  4. Selecting multiple elements: Select multiple elements and apply a single ruleset to all of them. Separate multiple selectors by commas (,). For example:
p,
li,
h1 {
  color: red;
}

Different Ways of Commenting on CSS:

/* 1. This is just a CSS Comment*/
// 2. This is another comment

Different types of selectors

There are many different types of selectors. The examples above use element selectors, which select all elements of a given type. But we can make more specific selections as well. Here are some of the more common types of selectors: 

1. Element/tag/type Selector: All HTML elements of the specified type. p selects <p>
2. ID selector: The element on the page with the specified ID. On a given HTML page, each id value should be unique. #my-id selects <p id="my-id"> or <a id="my-id">
3. Attribute selector: The element(s) on the page with the specified attribute. img[src] selects <img src="my-image.png"> but not <img>
4. Pseudo-class selector: The specified element(s), but only when in the specified state. (For example, when a cursor hovers over a link.) a:hover selects , but only when the mouse pointer is hovering over the link. Understand the different States here.
5. Universal selector: The universal selector is indicated by an asterisk (*). It selects everything in the document. If * is chained using a descendant combinator, it selects everything inside that ancestor element. For example, p * selects all the nested elements inside the <p> element.

In the following example, we use the universal selector to remove the margins on all elements. Instead of the browser’s default styling, which spaces out headings and paragraphs with margins, everything is close together.

This kind of behavior can sometimes be seen in “reset stylesheets”, which strip out all of the browser styling. Since the universal selector makes global changes, we use it for very specific situations, such as the one described below.

Using the universal selector to make your selectors easier to read

One use of the universal selector is to make selectors easier to read and more obvious in terms of what they are doing. For example, if we wanted to select any descendant elements of an element that are the first child of their parent, including direct children, and make them bold, we could use the :first-child pseudo-class. We will learn more about this in the lesson on pseudo-classes and pseudo-elements:

article :first-child {
  font-weight: bold;
}

However, this selector could be confused with article:first-child, which will select any <article> element that is the first child of another element.

To avoid this confusion, we can add the universal selector to the :first-child pseudo-class, so it is more obvious what the selector is doing. It is selecting any element which is the first-child of an <article> element, or the first-child of any descendant element of <article>:

article *:first-child {
  font-weight: bold;
}

Although both do the same thing, the readability is significantly improved.

CSS selectors

The CSS selectors module defines the patterns to select elements to which a set of CSS rules are then applied along with their specificity. The CSS selectors module provides us with more than 60 selectors and five combinators. Other modules provide additional pseudo-class selectors and pseudo-elements.

In CSS, selectors are patterns used to match, or select, the elements you want to style. Selectors are also used in JavaScript to enable selecting the DOM nodes to return as a NodeList.

Selectors, whether used in CSS or JavaScript, enable targeting HTML elements based on their type, attributes, current states, and even position in the DOM. Combinators allow you to be more precise when selecting elements by enabling selecting elements based on their relationship to other elements.

Reference

1. Combinators and separators
+: Next-sibling combinator)
> : Child combinator)
|| : Column combinator
~ : Subsequent sibling combinator
" " : Descendant combinator
| Namespace separator

2. Selectors

:active 
:any-link 
:autofill
:blank
:buffering 
:checked
:current
:current()
:default
:defined
:dir()
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:future
:has()
:hover
:indeterminate
:in-range
:invalid
:is()
:lang()
:last-child
:last-of-type
:link
:local-link
:matches() (obsolete legacy selector alias for :is())
:modal
:muted
:not()
:nth-child()
:nth-of-type()
:nth-last-child()
:nth-last-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:past
:paused
:picture-in-picture
:placeholder-shown
:playing
:read-only
:read-write
:required
:root
:scope
:seeking
:stalled
:target
:target-within
:user-invalid
:user-valid
:valid
:visited
:volume-locked
:where()
:-webkit- pseudo-classes
Attribute selectors
Class selector
ID selectors
Type selectors
Universal selectors

3. Terms

Pseudo-class glossary term
Functional pseudo-classes
Combinators
Simple selector
Compound selector
Complex selector
Relative selector
Selector list
Specificity

Guides

  • CSS selectors and combinators: Overview of the different types of simple selectors and various combinators defined in the CSS selectors and the CSS pseudo modules.
  • CSS selector structure: Explanation of the structure of CSS selectors and the terminologies introduced in the CSS selectors module, ranging from “simple selector” to “forgiving relative selector list”.
  • Pseudo classes: Lists the pseudo-classes, selectors that allow the selection of elements based on state information that is not contained in the document tree, defined in the various CSS modules and HTML.
  • Learn: CSS selectors: Part of CSS building blocks, includes tutorials on Type, class, and ID selectors, Attribute selectors, Pseudo-classes and pseudo-elements, Combinators, Handling conflicts, and Cascade layers.
  • Using the :target pseudo-class in selectors: Learn how to use the :target pseudo-class to style the target element a URL’s fragment identifier.
  • Learn: UI pseudo-classes: Learn the different UI pseudo-classes available for styling forms in different states.
  • Locating DOM elements using selectors: The selectors API enables using selectors in JavaScript to retrieve element nodes from the DOM.

Elements Nesting in CSS & Specificity

Understanding Length Units in CSS

There are two types of length we use in CSS.

  1. Absolute (px)
  2. Relative (em, rem, vw, vh)

Pixel (px)

Its absolute unit value.

%

Relative to parent element.

.main-content {
    width:75%;
}

.sidebar {
    width:25%;
}

em

Relative length (relative to the font size of parent elements)

.parent {
    font-size: 20px;
}
// 1em= 20px
// 2em= 40px
// 3em= 60px

rem

Root element: Relative value (relative to the font size of the root element <html> )

html {
    font-size: 16px;
}
// 1rem= 16px
// 2rem= 32px
// 3rem= 48px

vw

vh

ch

Represent the width of the glyph 0 (Zero) in the current font.

.example {
max-width: 100vh;
}

Sectors in CSS

Selector Group 

.alert, .error {
     background-color: red;
}
// Here we are using (,) to select groups together.

At(@) Rules

  • @media-defines media query
  • @support-checks browser support
  • @import- imports an external stylesheet
  • @keyframes- defines steps in an animation

budgeting financial freedom Lemmony personal finance

More posts