One place for hosting & domains

      Styles

      How To Apply CSS Styles to HTML with Cascade and Specificity


      Introduction

      Cascading Stylesheets, better known as CSS, is the language for visual style and design on the web. CSS has a long history on the web dating back to 1994 with the initial idea. In the time since, CSS has become a feature-rich language capable of laying out a webpage, creating complex animations, and much more.

      Since CSS is the web’s styling language, understanding how it works and how to use it is fundamental to web development. It is especially valuable to understand in order to work with Hypertext Markup Language (HTML) and JavaScript effectively. This tutorial will focus on applying CSS to HTML, cascade, and specificity, which are foundational aspects of CSS and will prepare you for using CSS effectively in your web projects.

      CSS is not a conventional programming language. While it does have some features found in other programming languages, such as variables and math, CSS is wholly dependent on HTML to work. CSS’s purpose is to provide visual modifications to HTML. The CSS language is more like a to-do list for the browser: You are saying to the browser, here is a list of things I want you to find. Once the browser finds those things, the CSS instructs the browser to go through the subset list and make changes to those things.

      The browser follows this list of instructions from top to bottom unquestionably, and CSS needs to be written with that in mind. The cascade part of Cascading Stylesheets speaks to how browsers read the list. Since the browser is impartial, it makes the style changes as it encounters them. If the CSS says to make some HTML elements red, then later down in the CSS it says to make those elements blue, the result is blue.

      Applying styles to an element gets a little complicated, as there are many ways to tell the browser to find an element in the HTML. Each element in HTML has a set of attributes which can be used to find a specific element. Because of the cascade where the browser reads the instructions from top to bottom with impartiality, the instructions provided must be specific. This is known as specificity, where the developer must write precise criteria for the browser to find the exact element they wish to apply the styles to.

      In this tutorial you will work through multiple hands-on examples to understand the different ways styles can be applied to HTML elements and how cascade and specificity affect how styles are written.

      Prerequisites

      Using the HTML Style Attribute

      In this first step, you will apply styles to an HTML element directly with the style attribute. This method, also known as inline styling, uses an HTML element attribute to accept a CSS property as a value, and then applies it directly to the element.

      To familiarize yourself with some concepts of CSS, start by opening the index.html file in your text editor. In that file, set up the base HTML structure of the <html>, <head>, and <body> tags. Inside the <body> tags add a <div> with a short sentence of text:

      index.html

      <!doctype html>
      <html>
          <head>
              <title>Sammy Shark</title>
          </head>
          <body>
              <div>Sammy is the greatest shark in the ocean.</div>
          </body>
      </html>
      

      Next, open index.html in your browser. You will see your text in the <div> in the top left portion of the browser window. Visually, the text should appear similar to the following image with black text on a white background using serif font, such as Times New Roman:

      Text rendered in black in a serif font–the browser default style.

      To begin styling, add an attribute with an empty value to the opening <div> tag:

      index.html

      ...
      <div style="">Sammy is the greatest shark in the ocean.</div>
      ...
      

      The style attribute is a special attribute for HTML that contains CSS properties and values. The browser will apply those styles to that element.

      In this case, change the color of your sentence to navy using the color property. The format for CSS property and values begins with the property name, followed by the colon symbol :, then the property value, and finally a semicolon symbol ; after the value to tell the browser that’s all for the value:

      index.html

      ...
      <div style="color: navy;">Sammy is the greatest shark in the ocean.</div>
      ...
      

      Save index.html, return to your browser, and refresh. The text has changed from the browser default color of black to navy, as seen in the following image:

      Text rendered in navy blue with the browser default serif font.

      There are many CSS properties you can try in the style attribute, such as background-color or font-family. Typically, a browser’s default font is a serif font, such as Times New Roman. To change the font to a sans serif font, such as Arial or Helvetica, add a space after the semicolon for the color property then type the font-family property, followed by a colon, with sans-serif as the value:

      index.html

      ...
      <div style="color: navy; font-family: sans-serif;">Sammy is the greatest shark in the ocean.</div>
      ...
      

      Save your file and refresh your browser to see how the font for your sentence has changed. The font will now be the browser’s sans-serif font, such as Helvetica or Arial, instead of the default font. The following image shows how the font-family property builds on the color change to navy.

      Text rendered in navy blue with a custom sans serif font.

      Now that you have written a couple of CSS properties, wrap a word in your sentence with the <strong> element and return to your browser:

      index.html

      ...
      <div style="color: navy; font-family: sans-serif;">Sammy is the <strong>greatest</strong> shark in the ocean.</div>
      ...
      

      In your browser, the word inside the <strong> tag will appear bolder than the other words in the sentence, as shown in the following image.

      Text rendered in navy blue with a normal font weight, except the word in the <strong> tag which is bold.

      The word with the <strong> element retains the color and font-family properties of the HTML element it is inside, also known as its parent. This is an example of inheritance, where a child element, an HTML element inside another element, inherits styles that are placed on the parent element. The <strong> element also adds a browser default style of font-weight: bold;, making the text bold. Additionally, the <strong> element can have a style attribute as well to give that element a custom look:

      index.html

      ...
      <div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
      ...
      

      Save the file and refresh you browser to see the difference, as the word in the <strong> element is now blue, in contrast to the navy of the rest of the sentence. This change is shown in the following image:

      Text rendered in navy blue with a normal font weight, except the word in the <strong> tag which is bold and a lighter blue.

      In this section you used HTML style attributes to apply styles to a <div> and a <strong> element. In the next section you’ll take the styles you wrote for those specific elements and apply them to all <div> and <strong> elements on the page.

      Using the <style> Tag to Write CSS

      Next you will take what was written in the previous section and apply the styles to all similar elements on the page. You will move from using the style attribute to using the <style> HTML element. <style> is a special element that allows you to write CSS within it and have those styles applied to the whole page.

      Using the style attribute on an HTML element can be very handy, but it is limited to only that element or its descendants. To see how this works add another <div> element with a new sentence:

      index.html

      ...
      <div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
      <div>They like to swim with their friends.</div>
      ...
      

      Go to your browser and reload the page. As you may notice in the browser or the following image, the first sentence gets all the styles you wrote earlier, but the new sentence uses the browser default styles instead:

      The first sentence text is rendered with custom styles while the second sentence is rendered with browser default styles. The first sentence is a navy blue sans serif font, except for the text in the <strong> tag, which is a lighter blue and bold. The second sentence is black and a serif font.

      You could apply the same style attribute on each individual element, but that becomes very cumbersome if you have many sentences that you want to look the same. What you need is a way to target many of the same kinds of elements simultaneously. This can be done with the HTML <style> element.

      The <style> element is most often placed in the <head> tag of an HTML document. This way the browser reads the styles before reading the HTML, causing the page to load already styled. The inverse can cause a flash as the browser loads the content with browser default styles and then loads the custom styles. However, keep in mind that the <style> tag is not limited to use in the <head> and can be placed anywhere within the <body>, which can be advantageous in some scenarios.

      Add <style> tags to the <head> of your index.html file:

      index.html

      <!doctype html>
      <html>
          <head>
              <title>Sammy Shark</title>
              <style>
              </style>
          </head>
          <body>
              <div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
              <div>They like to swim with their friends.</div>
          </body>
      </html>
      

      Inside the <style> element, you can define what kind of element you want to target with selectors, which identify which HTML elements to apply styles to. Once the selector is in place, you can then group the styles you wish to apply to that element in what is called a selector block.

      To begin setting that up, look at the example from earlier. Here there is a <div> with two properties, color and font-family.

      index.html

      ...
      <div style="color: navy; font-family: sans-serif;">...</div>
      ...
      

      To target all <div> elements on the index.html page, add what is called a type selector within the <style> attribute, followed by an opening and closing curly brace, which define the selector block. This tells the browser to find all the <div> elements on the page and apply the styles found within the selector block:

      index.html

      <!doctype html>
      <html>
          <head>
              <title>Sammy Shark</title>
              <style>
                  div {
                  }
              </style>
          </head>
          <body>
              <div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
              <div>They like to swim with their friends.</div>
          </body>
      </html>
      

      Next, take the properties from the style attribute and put them inside the curly braces of the selector block. To make it easier to read, it helps to put each property on an individual line:

      index.html

      <!doctype html>
      <html>
          <head>
              <title>Sammy Shark</title>
              <style>
                  div {
                      color: navy;
                      font-family: sans-serif;
                  }
              </style>
          </head>
          <body>
              <div>Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
              <div>They like to swim with their friends.</div>
          </body>
      </html>
      

      Once you have saved the file, return to the browser and refresh. Now both sentences have the same styles applied, all from a single selector in the <style> element:

      The text in both sentences are rendered navy blue and in a sans serif font, except for the text in the one <strong> tag, which is a lighter blue and bold.

      Add a new selector after your div selector block to apply the styles for the <strong> element in the same manner. Also, add a <strong> element around a word in your second sentence to see your new CSS on multiple elements:

      index.html

      <!doctype html>
      <html>
          <head>
              <title>Sammy Shark</title>
              <style>
                  div {
                      color: navy;
                      font-family: sans-serif;
                  }
                  strong {
                      color: blue;
                  }
              </style>
          </head>
          <body>
              <div>Sammy is the <strong>greatest</strong> shark in the ocean.</div>
              <div>They like to swim with their <strong>friends</strong>.</div>
          </body>
      </html>
      

      Save the file and refresh your browser, or look at the following image, to find that now both words using the <strong> element are the color blue:

      The text in both sentences is rendered navy blue and in a sans serif font, except for the text in both <strong> tags, which are a lighter blue and bold.

      In this section, you wrote CSS selectors within a <style> element, which applied the styles to all matching elements on the page. In the next section you will move these styles so that they can be applied on many pages of a website.

      Loading an External CSS Document into HTML

      In this section you will start working with a CSS file that is loaded on multiple HTML pages. You will move the styles from the previous section to the CSS file and create a new HTML page to see how one CSS file can style multiple pages.

      Just as the style attribute is limited to styling the single element, the CSS found in a <style> element are limited to styling a single page. Websites are most often a collection of many web pages that share the same styles. If you had multiple pages that all needed to look the same and you used the <style> element to hold your CSS, making changes to the styles would require a lot of repeat work on each page. This is where the CSS file comes in.

      Create a new file in your editor called styles.css. In that file, copy the contents of the <style> element from index.html and add them to your styles.css file. Be sure to exclude the <style> tags.

      styles.css

      div {
          color: navy;
          font-family: sans-serif;
      }
      strong {
          color: blue;
      }
      

      Now that you have an independent CSS file, it’s time to load that file on to the page so the browser can apply the styles. Start by removing the <style> tags from the <head>. Then inside the <head> tag, write a self-closing <link /> element with two attributes, href and rel. The href value contains the path to the style.css file so the browser can reference the CSS. The rel attribute should have a value of stylesheet as it defines the type of relationship between the page and the document being referenced:

      index.html

      <!doctype html>
      <html>
          <head>
              <title>Sammy Shark</title>
              <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
          </head>
          <body>
              <div>Sammy is the <strong>greatest</strong> shark in the ocean.</div>
              <div>They like to swim with their <strong>friends</strong>.</div>
          </body>
      </html>
      

      Now go to your browser and refresh index.html. In this case, you will not find anything changed since all you have done is change where the styles live.

      The text in both sentences remains rendered navy blue and in a sans serif font, except for the text in both <strong> tags, which are a lighter blue and bold.

      To demonstrate how useful a CSS file is, create a new HTML file called about.html. Copy and paste the HTML from index.html and then make changes to the sentences, or create new sentences:

      about.html

      <!doctype html>
      <html>
          <head>
              <title>About Sharks</title>
              <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
          </head>
          <body>
              <div>There are over <strong>500</strong> species of sharks.</div>
              <div>The great white shark can grow up to <strong>6.1 meters</strong> long.</div>
          </body>
      </html>
      

      Next, open about.html in a new browser window so you can view and compare both HTML files simultaneously. This results in about.html having the same styles for both div and strong elements, as shown in the following image.

      The text in both sentences on the new page are rendered navy blue and in a sans serif font, except for the text in both <strong> tags, which are a lighter blue and bold.

      Return to your text editor and open styles.css and change the div selector’s color property value to green:

      styles.css

      div {
          color: green;
          font-family: sans-serif;
      }
      strong {
          color: blue;
      }
      

      In your browser, refresh both index.html and about.html to see how changing the styles in the CSS file affects both HTML files. As the following image shows, the text changed from navy to green in both index.html and about.html:

      The text in both sentences on the about page are now rendered green and in a sans serif font, except for the text in both <strong> tags, which remains blue and bold.

      Each page has the same styles applied with the green text and blue <strong> elements, all from one central CSS file.

      In this section you created a CSS file and loaded that CSS file on multiple HTML pages. You moved your CSS from the <style> element into the CSS file, which applied the same styles to index.html and the new about.html page. Next you will start working with CSS cascade and specificity.

      Working With the Cascade and Specificity

      This section will get into the depths of the CSS features of cascade and specificity mentioned in the introduction. You will write CSS that exemplifies these concepts, starting with cascade and then specificity. Understanding cascade and specificity can help troubleshoot problems you may find in your code.

      With what you have accomplished so far, the cascade is short. As your CSS file grows in size, it is more and more necessary to be aware of the order of your CSS selectors and properties. One way to think about the cascade is to think of a water cascade and traversing rapids. It’s advisable to go with the current, as trying to go upstream will require extensive effort to make little progress. The same is true with CSS: if your code is not working as expected, it may be going against the flow of the cascade.

      To see this in practice, open up the files from earlier. Open styles.css in your text editor and index.html in your browser. The <div> elements in the browser will currently be green, with the bold text in blue. After the font-family property in the div selector, add another color property with a value of orange:

      styles.css

      div {
          color: green;
          font-family: sans-serif;
          color: orange;
      }
      strong {
          color: blue;
      }
      

      The browser traverses the cascade and hits the green style, turning the div green. Then the browser hits the orange style, and changes the color from green to orange. Refresh index.html in your browser to see the green text is now orange, as shown in the following image:

      The text in both sentences on the about page are now rendered orange and in a sans serif font, except for the text in both <strong> tags, which remains blue and bold.

      In this scenario the browser has been given two color properties, and due to the nature of the cascade, the browser applies the last color property to the element. When a property further down the cascade negates a previous property, this results in a situation called an override. As a CSS file grows in size and scope, overrides can be the source of bugs as well as the solution to problems.

      While the cascade deals with how the browser reads and applies styles to elements, specificity deals with what elements are found and styled.

      Open about.html in your browser. Right now both sentences have the same style. Next, you will change the color of the <strong> element in the second sentence to red, but keep the first <strong> color set to blue. To accomplish this change requires a higher specificity selector. Right now the selectors are what is called low specificity as they are targeting all <strong> elements on the page, regardless of their parent.

      Higher specificity can be achieved several different ways, but the most common and effective way is a class selector. On the second <strong> element, add a new attribute called class and give that attribute a property value of highlight:

      about.html

      <!doctype html>
      <html>
          <head>
              <title>About Sharks</title>
              <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
          </head>
          <body>
              <div>There are over <strong>500</strong> species of sharks.</div>
              <div>The great white shark can grow up to <strong class="highlight">6.1 meters</strong> long.</div>
          </body>
      </html>
      

      Next, open styles.css in you text editor to create a class selector. First, remove the color: orange; from the div you added earlier.

      In CSS, element selectors are written out without an identifier, but with class selectors a period (.) precedes the value found in the attribute. In this case, use the selector .hightlight to apply a color property with a value of red:

      styles.css

      div {
          color: green;
          font-family: sans-serif;
      }
      strong {
          color: blue;
      }
      .highlight {
       color: red;
      }
      

      Save the changes to both styles.css and about.html and refresh about.html in your browser. You will find that the second <strong> element is now red, as seen in the following image:

      The text in both sentences on the about page are now rendered green and in a sans serif font, except for the text in both <strong> tags, which is bold with the first <strong> text being blue and the second being red.

      To understand the robustness of specificity in regards to the cascade, swap the strong and .highlight selector blocks. Different kinds of selectors have higher specificity. In this case the class selector has a higher specificity than the element selector:

      styles.css

      div {
          color: green;
          font-family: sans-serif;
      }
      .highlight {
       color: red;
      }
      strong {
       color: blue;
      }
      

      Save and refresh about.html in your browser and you’ll notice no change. The following image shows that there is no visual change despite the reordering of the CSS.

      The text in both sentences on the about page remain rendered green and in a sans serif font, except for the text in both <strong> tags, which is bold with the first <strong> text being blue and the second being red.

      This is due to the low specificity of element selectors and the high specificity of a class selector. While the browser is reading the list from top to bottom without regard, you can tell the browser to pay more attention when applying a style by using higher specificity selectors.

      In this section you worked with the CSS features of cascade and specificity. You applied the same property twice to an element, which showed how the cascade works by using the last property in the list. You also created styles using a higher specificity selector called a class selector. Next you’ll learn about a special CSS rule that overrides both cascade and specificity.

      Using the !important Rule

      In this last section you will learn about the CSS !important rule and write an example of how to use it. This example uses a fictional scenario where you would not have control over the HTML and therefore must fix the problem only using CSS.

      Although CSS will often work with the cascade and have good specificity, there are times when a style needs to be forced. This is done by adding an !important flag at the end of a property value, before the semicolon. This is not a rule to be used lightly, and when used it is a good practice to include a code comment explaining the reason for using !important.

      Warning: Due to how the !important rule works, it should be used only if all other methods fail. Using the rule overrides the value on all matching elements, which makes it difficult or impossible to override further. This will make your code less legible to other developers.

      To see how this works, open up index.html in your editor and add a style attribute with a color set to red:

      index.html

      <!doctype html>
      <html>
          <head>
              <title>Sammy Shark</title>
              <link href="https://www.digitalocean.com/community/tutorials/styles.css" rel="stylesheet" />
          </head>
          <body>
              <div>Sammy is the <strong style="color: red;">greatest</strong> shark in the ocean.</div>
              <div>They like to swim with their friends.</div>
          </body>
      </html>
      

      Load index.html in your browser and you will find that the style attribute overrides the blue color with red, since a style attribute has higher specificity than the CSS selector. What is in the browser will look similar to the following image:

      The text in the sentence is green with sans serif, except for the text in the <strong> tag, which is red and bold.

      When working with websites it is common to have Javascript loaded that may apply inline styles like this. Elements with style attributes are at the bottom of the cascade, meaning that even with styles that turn all strong tags blue, this one will be red. In a scenario where Javascript creates the style attribute, it cannot be removed from the HTML.

      To force a style override, open up styles.css in your editor and after the blue property value in your strong selector, add !important:

      styles.css

      ...
      strong {
          color: blue !important;
      }
      

      Now return to your browser and refresh index.html. You will see the blue color again, as in the following image:

      The text in the sentence is green with sans serif font, except for the text in the <strong> tag, which is blue and bold.

      Despite the style attribute defining the color as red it is now blue, thanks to the !important rule telling the browser that this is the more important style to use. It is helpful to add a CSS code comment explaining the reason for the !important so future developers or future you understand why you are using it.

      styles.css

      ...
      strong {
          /* !imporant used here because of JavaScript applying a style attribute on the selector */
          color: blue !important;
      }
      

      In this section you learned about the !important rule and used it in a real-world scenario. You also learned that that the !important rule is a dangerous tool that should be used intentionally because of how drastic it overrides cascade and specificity. Additionally, you wrote a CSS comment, which is used to inform future developers looking at your code as well as a reminder to you when you return to your code later.

      Conclusion

      CSS is a versatile language made for manipulating and styling HTML. In this tutorial you styled HTML elements through various methods of applying styles. You now have the foundation to begin writing your own styles. If you want to dive further into understanding CSS and how it works, the World Wide Web Consortium (W3C), the governing body for CSS, provides all kinds of information about the language.

      If you would like to see more tutorials on CSS, check out our CSS topic page.



      Source link

      Angular – Shortcut to Importing Styles Files in Components


      In a typical Angular project, you’ll have many components. Each components has it own stylesheet (css, scss, less, etc). It’s quite often that you might need to include global styling files (especially variables file) in your component.

      We’ve talked on this a bit in our other Angular styles article: Using Sass with the Angular CLI

      Let’s explore another option for importing style files:

      A Sass Variables Sample

      Let’s say you have a _variables.scss in your src/stylings folder:

      // your folder structure
      - src
          - app
              - app.component.ts
                  - hello
                      - hello.component.html
                      - hello.component.scss
                      - hello.component.ts
              - ...
          - stylings
              - _variables.scss
      
      // your _variables.scss file
      $brand-color: #800000;
      

      Reference to the Variables file

      Below is our hello.component.html file, let’s style the header with our brand-color.

      <!-- hello.component.html -->
      <h1>
        Hello World!
      </h1>
      

      The $brand-color variable is in stylings/_variables.scss file. We need to import the file in order to use it:

      // hello.component.scss
      @import "../../../stylings/variables"; // this is not cool!
      
      h1 {
          color: $brand-color;
      }
      

      See the ../../../stylings/ syntax? Do you like it?

      Imagine you need to repeat this ../../../stylings/ in another tens or hundreds of components and you need to remember the relative path. This is not cool. Let’s fix this!

      Shortcut with Angular CLI configuration

      If your project is generated with Angular CLI, you can add a configuration stylePreprocessorOptions > includePaths in .angular.cli.json file. This configuration allows you to add extra base paths that will be checked for imports. It tells Angular CLI to look for styling files in the mentioned paths before processing each component style file.

      For example, in our case, let’s add ./stylings in the paths. Since the configuration accept an array, you can add multiple paths.

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    "./stylings"
                  ]
              }
      
          }]
      }
      

      With this, we can update our hello.component.scss to just @import "variables". Sweet!

      // hello.component.scss
      @import "variables"; // change to just variables, say goodbye to ../../../stylings/
      
      h1 {
          color: $brand-color;
      }
      

      What if you have duplicated file name in paths?

      Imagine you included two styling paths in .angular.cli.json, both have _variables.scss file. Guess what will happen? Will the CLI pick up both files or throw errors?

      Let’s test it out together!

      // your folder structure
      - src
          - ...
          - stylings
              - _variables.scss
          - stylings2 // add this
              - _variables.scss
      

      In stylings2/_variables.scss, you have the following styles,

      // stylings2/_variables.scss
      $brand-color: blue;
      $font-size-large: 40px;
      

      Update your .angular.cli.json configurations, to include styling2 folder path.

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    "./stylings",
                    "./stylings2"
                  ]
              }
      
          }]
      }
      

      Update your hello.component.scss file,

      // hello.component.scss
      @import "variables";
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
      }
      

      Restart your dev server. Wait for a while, and you should expect… Error!
      Error, Undefined variable

      Tell me why!

      Turn out, if there are multiple files with same name, Angular CLI will pick only the first file that match the name. In this case, it will pick the stylings/_variables.scss file. That’s why it could not get the variable $font-size-large, because it’s in styling2/_variables.scss file.

      But… I really need two files with the same name!

      Well, there are cases where you have multiple files with the same name and you really need it, and you would like to have shortcuts as well. The workaround would be including the parent path. For example, in our case, both stylings and stylings2 folders parent are src.

      We can update the .angular.cli.json configuration to the following:

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    "."
                  ]
              }
      
          }]
      }
      

      Then, in your hello.component.scss, you can refer to both variables file like the following,

      // hello.component.scss
      @import "stylings/variables";
      @import "stylings2/variables"; 
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
      }
      

      Well, it’s not perfect, slightly more words to type, but better than ../../../ right? Also, it might be rare scenario that you have multiple style files with same name in the same project, I guess?

      Another shorter workaround would be including parent path and one styling path:

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    ".",
                    "./stylings"
                  ]
              }
      
          }]
      }
      

      You can save a few lines in your hello.component.scss.

      // hello.component.scss
      @import "variables"; // shorter, don't need styling/ as it's one of the configured paths
      @import "stylings2/variables"; 
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
      }
      

      What about including paths in node_modules?

      The Angular CLI configuration is applicable to files in node_modules as well. Let’s say you are using your custom styling npm package, for example bootstrap-sass module.

      npm install bootstrap-sass --save
      

      Here is the folder structure of bootstrap-sass:

      - node_modules
          - bootstrap-sass
              - assets
                  - stylesheets
                      - bootstrap
                          - ...
                          - _grid.scss
                          - _variables.scss
      

      Let’s say you would like to use the bootstrap’s _variables.scss, you can update your .angular.cli.json file to include bootstrap path,

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    ".",
                    "./stylings",
                    "../node_modules/bootstrap-sass/assets/stylesheets"
                  ]
              }
      
          }]
      }
      

      Then, in your hello.component.scss, you can refer to the bootstrap variables file like the following,

      // hello.component.scss
      @import "variables";
      @import "stylings2/variables"; 
      @impoer "bootstrap/variables";
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
          font-family: $font-family-serif;
      }
      

      Summary

      Let’s remove the relative path hell (../../../) with this useful Angular CLI configuration!

      That’s it. Happy coding!



      Source link

      IT Pros Pick the Household Pets Most Representative of Their Work Styles in New INAP Survey


      Millions of us who have shifted to work from home situations during this challenging time find ourselves adjusting to new “coworkers”—some of whom are of the four-legged variety. Are the personalities of your new office colleagues affecting your work style? Do your pets remind you of any of your actual coworkers?

      It just so happens that INAP polled 500 IT pros to determine which household pets best replicate their on-the-job personas. Respondents were asked to choose their primary from a list of household and exotic pets and corresponding characteristics. Since most people don’t fit perfectly in a box, participants were given the option to select a secondary persona, as well. The results aren’t very scientific but are revealing, nevertheless.

      Pet Personality Types

      It’s easy for those outside of IT to lump the entire profession into one persona. Pop culture tropes are likely to blame. (Thanks, Jimmy Fallon.) But we know, like any discipline, there’s a spectrum.

      Have you ever met a sysadmin whose go-it-alone attitude is suspiciously cat-like? Or a network engineer who is as loyal and enthusiastic as a golden retriever? How about a hot-aisle-loving D.C. tech who can camouflage their emotions with iguana-like deflection?

      Check out the descriptions for the eight pets featured in the survey below and consider where you and your coworkers might fall.

      • Dogs

        IT dogs always appear happy. They thrive off positive feedback and incentives. They are loyal, but oftentimes to a fault.

      • Cats

        IT cats need little direction and prefer to work independently. They often come across as aloof or standoffish, despite a hidden soft side.

      • IGUANAS

        IT iguanas are experts at adapting to whatever the work environment throws at them. However, they often camouflage their true opinions during conflict, making them tough to pin down.

      • Fish

        IT fish are experts at swimming through the backlog. However, they tend to always sleep with their eyes open in anticipation of the next problem at work.

      • TARANTULAS

        IT tarantulas, with eyes on everything, never miss a chance to seize an opportunity at work. They are respected, but often intimidate colleagues and subordinates.

      • PARROTS

        IT parrots are highly intelligent and absorb knowledge fast. But they’re also commonly viewed as arrogant and are prone to occasionally sh***ing all over colleagues.

      • TURTLES

        IT turtles work slow and steady, but often get the job done better than anyone at the office. However, they would rather hide in their shell than engage in a workplace conflict.

      • HEDGEHOGS

        IT hedgehogs work diligently through the night. However, they can become reclusive and prickly if not managed to their liking.

      Results: Pet Personas in the Workplace

      The IT pros participating in the survey reviewed the choices and selected their primary and secondary pet personality types.

      Pet Persona Primary Secondary Table

      Dog took the No. 1 spot, with 34 percent of survey takers choosing it as their primary persona. In fact, 31 pros selected this as their only pet persona. Interestingly, senior IT leaders are 17 percent more likely to be dogs than non-senior leaders. Perhaps that loyal streak took them a long way.

      Optimism also abounds with these IT pros. IT Dogs are 41 percent more likely than IT Cats to think their infrastructure strategy deserves an “A” grade.

      Cat finished second, with 26 percent of IT pros selecting it as a primary persona. With an ability to work independently with little direction, 14 percent of respondents selected cat as their secondary persona, a statistic that might be heartening to managers.

      With dogs and cats ranking as the No. 1 and No. 2 “most popular pets in America,” it shouldn’t be surprising that we identify their traits in ourselves.

      Iguana took the No. 3 spot, with 12 percent of IT professionals identifying with the ability to adapt to whatever their work environments throw at them. That’s a terrific trait to have in an ever-shifting tech landscape where it’s challenging to predict what might come next.

      IT iguanas tied for the most common secondary persona, with 16 percent of respondents selecting it. Interestingly, non-senior IT leaders are 70 percent more likely to be Iguana primaries than senior leaders.

      Fish claimed the No. 4 spot overall, with 9 percent of IT professionals selecting it as their primary persona. And as a secondary persona, fish tied for No. 1 with 16 percent. It was also the most common secondary persona for non-senior IT infrastructure pros. This is good news, as the field needs pros who are experts at swimming through the backlog in order to move forward.

      At No. 5 overall, tarantula was selected as a primary persona by 8 percent of IT pros, and it tied with fish for the No. 1 spot as a secondary persona. With eyes on everything, ready to seize opportunities, Senior IT leaders are twice as likely to be tarantulas than non-senior leaders.

      Parrot claimed the No. 6 spot, with 5 percent of IT pros willing to admit that, at times, and despite their high intelligence, they can have a tendency to s**t all over their colleagues. That’s some high-level introspection and honesty in our book. As secondary personas go, 12 percent of survey takers selected parrot. Parrots are equally likely to be leaders as non-leaders.

      Known for quality work output at a slow and steady pace, turtle was selected as a primary persona by 4 percent of IT professionals, bringing it to the No. 7 spot. Only 6 percent selected turtle as their secondary persona, which ranks 8 out of 8. Interestingly, non-senior leaders were twice as likely to be turtles as non-senior leaders, which begs the question: Is conflict required to lead? Based on these survey results, it seems likely.

      And finally, hedgehog secured the last spot, at No. 8, with 2 percent of IT professionals selecting it as their primary persona. Hedgehog came in 7 out of 8 for secondary personas. These IT third-shifters work diligently through the night.

      Top Animal Persona Pairings

      Below is a breakdown of the top pet persona pairings across the entire sample. The primary persona is listed first in each pairing.

      Pet Persona Pairing Table

      Laura Vietmeyer


      READ MORE



      Source link