blog.noob.pro

Very learning, much smart, so motivation

Diving Into The Basics of CSS

My CSS study notes:

Getting Started

1996: CSS1

1998: CSS2

In Development: CSS 3

CSS 3 is now split up into modules, it is constantly being updated

Diving into the Basics of CSS

To add a selector, just write the HTML tag name. This will apply the below style to all section elements in the page.

In the below example ‘background’ is the property and ‘#ff1b68’ is the value

section {
    background: #ff1b68;
}

Applying Additional Styles and Importing Google Fonts

Setting the colour (e.g. for a h1 tag) use the color property

To change the font, use the font-family property

Browsers have default font types for:

  • Standard font
  • Serif font
  • Sans-serif font
  • Fixed-width font (typically used for code snippets)

So, when you do:

font-family: sans-serif;

You are setting the element to the font you have selected as the default sans-serif font.

To install a custom font (to make sure the user has the font), you can use Google Fonts. You will get a CSS link that you can import in your HTML page.

A HTML tag is just opening or closing entity. For example: <p> and </p> are called HTML tags

A HTML element encompasses opening tag, closing tag, content (optional for content-less tags). For example:

<p>This is the content</p> This complete thing is called a HTML element

Selectors

Tag selector:

h1 {
    color: red;
}

Classes (class selector): set equal style for elements within the same class (start with a dot)

.blog-post {
    color: red;
}

Universal selector: Same style for every element in the page (rarely used)

* {
    color: red;
}

ID (ID selector):

To make the main-title red:

<h1 id="main-title">My Title</h1>
#main-title {
    color: red;
}

Attribute selectors. Style HTML attributes by the attributes they have. For example, the disabled attribute:

[disabled] {
    color: red;
}

Set the color (text) to red for all HTML elements with the disabled attribute.

You can jump to an id that you defined in a HTML element by appending the # character followed by the id in the URL.

Class names: lowercase names separated with a dash

Multiple classes with a space between them

<h1 class="main-title title"></h1>

What if a specific selector type overrides a property set by another selector type:

The order of selectors in a CSS file matters (only if you use the same selector and basically override it; you wouldn’t really do this).

Inline styles have the highest priority (or the official term: CSS specificity).

Browser defaults have the lowest priority, they still apply however you can override them.

Multiple rules affect the same elements (this is the cascading in CSS; multiple rules/styles can apply to the same element).

CSS specificity order (highest to lowest):

Rules can override other rules, this is the order/priority:

In there are conflicts in the below items, whatever was defined lower in the CSS file wins:

  • Inline styles (try not to use them)
  • #ID selector
  • .class :pseudo-class and [attribute] selector
  • and :pseudo-element selectors
  • Universal selector

Inheritance

Instead of a universal selector you typically get styles on the HTML body, which wraps all other elements.

body {
    ...
}

You will typically set the font-family in the body tag selector

Adding combinators

To increase the specificity. Use the inherit keyword to specify that a property should inherit its value from its parent element

font-family: inherit; 

Don’t create a class for one thing (e.g. for the main title where we just want to change the font). Use a combinator to combine selectors.

So, we can do something like: Apply these styles to all tags with a certain ID what are inside another CSS class (a parent at any level/generation). The below code snippet only targets <h1> tags that are children of a HTML tag with an id of: #product-title

#product-title h1 {
    font-family: ...
}

The rules with more information (e.g. more combinated selectors) to it wins over rules with ‘less’ information.

Note: Combining selectors is not inheritance

Theory Time - Combinators

  • Adjacent sibling (you can have more than 2)
  h2 + p {
      color: red;
  }

Applied to all <p> tags that directly follow a <h2> tag (like the example below). Elements must share the same parent and the second element comes immediately after the first element.

  <div>
  	<h2>My title</h2>
  	<p>CSS applied</p>
  </div>	
  • General sibling
  h2 ~ p {
      color: red;
  }

Applied if there is a <h2> element in the same ‘level’ as a <p> tag

  <div>
  	<h2>My title</h2>
  	<h3>My secondary title</h3>
  	<p>CSS applied</p>
  </div>	
  • Child
  div > p {
      color: red;
  }

Any paragraph that is a direct child of a <div> will get the style (not nested <p> tags that are children of children).

  • Descendant
  div p {
      
  }

The level doesn’t matter, if there is a <div> somewhere above the <p> element then the style is applied.

Examples of selectors, properties and values:

image-20190126173551162

Properties have different values (values are specific to properties).

Comments

Loading comments...