Microsoft css

Microsoft css DEFAULT

DevTools for beginners: Get started with CSS

In this tutorial, you learn how to use CSS to style a web page. You also learn how to use Microsoft Edge DevTools to experiment with CSS changes.

This article is part of a series of tutorials that teaches you the basics of web development and Microsoft Edge DevTools. You gain hands-on experience by actually building your own website. You don't have to complete the previous tutorials before doing this one. Set up your code shows you how to get set up.

Note

This tutorial is designed for absolute beginners and focuses on both the fundamentals of web development and the basics of using DevTools to experiment with CSS. If you want a tutorial that only focuses on DevTools, navigate to Get Started with Viewing and Changing CSS.

At the beginning of the tutorial, your site should look like the following figure.

What your site currently looks like

What your site currently looks like

After you complete the tutorial, your site should look like the following figure.

What your site should look like at the end of the tutorial

What your site should look like at the end of the tutorial

Goals

Follow this tutorial to better understand the following concepts and tasks.

  • How to use CSS to style a web page.
  • How to use Microsoft Edge DevTools to experiment with CSS.
  • The difference between CSS and CSS frameworks.

You're building a real website.

Prerequisites

Complete the following prerequisites before doing this tutorial.

  • Complete Get Started with HTML and the DOM or make sure that you have understanding of HTML and the DOM already.
  • Download the Microsoft Edge web browser. The following tutorial uses a set of web development tools, called the Microsoft Edge DevTools, that are built into Microsoft Edge.

Set up your code

To create your site, first do the following steps to set up your code.

Note

If you have already completed the first tutorial in the series, skip to the next section. Continue using your code from the last tutorial, Get Started with HTML and the DOM.

  1. Open the source code. The tab of your browser that's currently selected is called the editing tab.

    The editing tab

  2. Select cooked-amphibian. A menu pops up.

    The Project Options menu

  3. Select Remix Project. Glitch creates a copy of the project that you can edit.

    Note

    Glitch generates a random name for the new project.

  4. Select Show and then select In a New Window. Another tab opens with a live view of your site. The tab of your browser that's currently selected is called the live tab.

    The live tab

Understand CSS

CSS is a computer language that controls the layout and styling of web pages. The following figure is a paragraph with a border.

The text has been styled with CSS

The text has been styled with CSS

The following code snippet is the HTML and CSS code used to create the paragraph in the previous figure.

The HTML attribute might look new to you. The rest should look familiar. If not, complete Get Started with HTML and the DOM before attempting the following sections.

Add inline styles

You can use inline styles to apply styles to a single element.

  1. Go back to the editing tab and open .

    index.html

    Open in the editing tab

  2. Add the attribute in your element. In the code block below, the fourth line of code is the only one you need to change. The other lines of code are shown here to help you put the new attribute in the right place.

  3. To display the changes, navigate to the live tab. The background of the section is now blue.

    The background color behind the Home and Contact links is now blue

    The background color behind the Home and Contact links is now blue

Reuse styles on a single page with internal stylesheets

In a previous code snippet, an inline style applied a style to a single tag.

What if you wanted all of the elements on your webpage to be styled the same way? You would have to copy and paste the code into every single tag on your site, which would require a lot of time and effort. If you needed to make an edit, you would have to change every tag again. Instead, in the next steps, you use an Internal stylesheet to write your CSS once, so that it applies to multiple elements.

  1. In the live tab, select Contact to navigate to the contact page. Notice the font of the Home and Contact links.

    The Contact page

  2. In the editor tab, open .

  3. Add the following code to . Remember, the lines starting with and ending with are what you need to add. The other code is shown here so you know where to put the new code.

  4. Go back to the live tab.

  5. Select Contact to go back to the contact page. Notice the font of the Home and Contact links has changed.

    The font of the Home and Contact links has changed

    The font of the Home and Contact links has changed

Understand internal stylesheets

Internal stylesheets apply styles using selectors. Selectors are patterns that may apply to one or more HTML elements. The previous code snippet added the following style.

is a selector that translates to "any element that contains an element". The browser changes the font of the Home and Contact links because each of the tag groups match the pattern.

is a declaration. A declaration is made of following two parts.

The property describes which style of the element should be changed.

The value describes exactly how the style of the element should change.

For example, gives the browser the following instruction: "Set the font of elements that match the pattern to . If that font isn't available, use . If that isn't available either, use ."

Add multiple selectors to a ruleset

The following CSS code snippet is called a ruleset.

The following steps describe how you can use commas to add multiple selectors to a ruleset.

  1. In the editor tab, open .

  2. After type .

    The previous code snippet tells the browser to style elements the same way that it styles elements that match the pattern .

  3. Navigate to the live tab.

  4. Select the Contact link to go back to the contact page. Now, Contact Me! has the same font as the navigation links.

    The text Contact Me!  now has the same font as the Home and Contact links

    The text Contact Me! now has the same font as the Home and Contact links

Experiment with DevTools

As you continue your journey to become an expert in web development, you may find that CSS is tricky. You might write some code that doesn't display what you intended. Microsoft Edge DevTools makes it easy to experiment by displaying your changes in the page in real time.

Add a declaration to an existing ruleset in DevTools

To add a declaration to an existing ruleset

  1. Hover on the Home link, open the contextual menu (right-click), and select Inspect.

    Inspect the Home link

    DevTools opens up alongside your page. The code that represents the Home link, is highlighted blue in the DOM Tree. The code snippet and preview should be familiar from Get Started with HTML and the DOM.

    In the following figure, the declaration that you previously added to is displayed in the Styles tab below the DOM Tree.

    The Styles tab is below the DOM Tree

    The Styles tab is below the DOM Tree

  2. Select the empty line below to add a new declaration.

    Add a new declaration

  3. Type and select . The autocomplete UI suggests options as you type.

    Type color

  4. Type and select . All of the text on the contact page is now magenta.

    Type magenta

Edit a declaration in DevTools

To edit existing declarations in DevTools

  1. Select the magenta square next to . A color picker pops up.

    The Color Picker

  2. Use the color picker to change the font text to a color that you like.

    Change the font color to purple with the Color Picker

    Change the font color to purple with the Color Picker

Add a new ruleset in DevTools

To add new rulesets in DevTools

  1. Select New Style Rule (New Style Rule) which is next to .cls. An empty ruleset appears with as the selector.

    Add a new rule

  2. Replace with .

    Replace a with a:hover

    is a pseudo-class. Use pseudo-classes for style elements that may enter special states. For example, the style only takes effect when you're hovering over an element.

  3. Select the empty area between the brackets to add a new declaration.

  4. Type for the declaration name and select .

    Type background-color

  5. Type for the declaration value and select .

    Type green

  6. Hover your mouse over the Home link. The background of the link turns green.

    Hover on the Home link to reveal its green background

    Hover on the Home link to reveal its green background

Reuse styles across pages with external stylesheets

In a previous step, you added the following code snippet as an internal stylesheet to .

What if you wanted to style the same way? What if you had a large number of pages to which you wanted to apply your styles? You would have to copy and paste the internal stylesheet into every single web page on your site. The following steps describe how to add an External stylesheet to allow you to write your CSS once and apply it to multiple pages.

  1. First, refresh the live tab to remove the changes that you made in DevTools.

     After you refresh the page, the changes that were made in DevTools are gone

  2. Go back to the editor tab and open .

    contact.html

  3. Delete everything between and , including and .

    The style tag has been removed

    The style tag has been removed

  4. Open and remove from the tag. You have now removed all of the CSS that you previously added to your site.

    The inline style has been removed from the nav element

    The inline style has been removed from the nav element

  5. Select New File.

    The new file dialog

  6. Replace with and select Add File.

    Type style.css

  7. Add the following code snippet to your file.

    Add code to style.css

    Ensure that you have created an external stylesheet. Your HTML isn't aware that it exists.

  8. Open .

  9. Add to your HTML.

    Link to style.css

  10. Open the file and add the link there.

    Link to style.css in contact.html

    Link to in

  11. Navigate to the live tab. The home page now has the same font from the last section and a blue navigation section.

    The home page

  12. Select the Contact link to navigate to the contact page. The contact page has the same formatting as the home page.

    The contact page

Use a CSS framework

CSS frameworks are collections of styles built by other developers that make it easier to create attractive web sites. Instead of defining styles yourself, a framework provides you a collection of styles that you are able to use on your page elements.

Do the following steps to add the Bootstrap CSS framework to your page.

  1. Copy the following code:

  2. Open the editing tab and paste the code into .

    Link to the framework in contact.html

    Link to the framework in

  3. Open the file and add the code there.

    Link to the framework in index.html

    Link to the framework in

  4. Go back to the live tab to view your changes. While the background color of the element and the font of the and elements are the same, the font of the other elements has changed.

    Some of the font on the home page changed because of the framework

    Some of the font on the home page changed because of the framework

Use a class

In the last section, you added Bootstrap to your web pages, which changed the fonts of some of the elements on your site. CSS frameworks help you make major changes to your page with very little code. Go through the following steps to use one of Bootstrap's classes to change your header.

  1. Copy the following code snippet.

  2. Add the previous code snippet to your tag in .

    Add classes in index.html

    Add classes in

  3. Add the code to your tag in .

    Add classes in contact.html

    Add classes in

  4. View your changes in the live tab. There is a large, grey box around your header.

    The header now has a large, grey box around it

    The header now has a large, grey box around it

Understand classes

Classes let you assign collections of styles to arbitrary elements. Use the following code snippet to apply several styles to the element after you set the attribute to .

One advantage of a class is that it lets you apply styles to whatever elements you want. For example, suppose you want to set the background color of some elements to purple, but not all elements. Use the following code snippet to define the style in a class.

Next, apply the class to only the elements that you want to style.

Align elements

Complete the following steps to use other Bootstrap classes that are useful for aligning elements.

  1. Go back to the editor tab and open .

  2. Add to your tag.

    Add the container-fluid class

    Add the class

  3. Wrap your and elements in . Make sure to put after to properly close the new tag.

    Add a row

  4. Add to your tag and to your tag.

    Add the col-3 and col-9 classes

    Add the and classes

  5. View your changes in the live tab.

    The nav content is now to the left of the main content

    The nav content is now to the left of the main content

Next steps

Congratulations, you're done!

  • The best way to get better at web development is to build more sites. Don't worry about breaking stuff. Just have fun and learn as much as possible along the way.
  • To learn more about styling web pages, navigate to Introduction to CSS.
  • To learn more about how to experiment with CSS in DevTools, navigate to Get Started with Viewing and Changing CSS.

Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 International License.

Sours: https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/beginners/css

Get started with viewing and changing CSS

Complete these interactive tutorials to learn the basics of viewing and changing the CSS for a page using Microsoft Edge DevTools.

Open CSS Examples

  1. Hold (Windows, Linux) or (macOS) and choose CSS Examples to open in a new window.

    CSS Examples

    Note

    If you want to dock your DevTools window to the right of your viewport (displayed in the following figure), choose Customize and control DevTools. On the Customize and control DevTools drop-down menu, in the Dock side section, choose Dock to right.

View the CSS for an element

  1. Open CSS Examples.

  2. Hover on the text, open the contextual menu (right-click), and choose Inspect.

    1. In DevTools, on the Elements tool, in the DOM Tree panel, the element is highlighted.

      The inspected element is highlighted in the DOM Tree

      The inspected element is highlighted in the DOM Tree

    2. In the element, find the value of the attribute and copy it.

  3. On the page, in the Value of : textbox, enter the value.

  4. Hover on the text, open the contextual menu (right-click), and choose Inspect.

    1. In DevTools, on the Elements tool, select the Styles panel.

    2. In the Styles panel, the element is highlighted.

    3. In the element, find the class rule.

      Note

      This rule is displayed, because it is being applied to the element.

    4. In the class, find the value for the style and copy it.

      CSS classes is applied to the inspected element are highlighted in the Styles panel

      CSS classes is applied to the selected element, such as , are displayed in the Styles panel

  5. On the page, in the Value of : textbox, enter the value.

Add a CSS declaration to an element

Use the Styles panel when you want to change or add CSS declarations to an element.

  1. Open CSS Examples.

  2. Hover on the text, open the contextual menu (right-click), and choose Inspect.

  3. Choose near the top of the Styles panel.

  4. Type and select .

  5. Type and select . In the DOM Tree, an inline style declaration applied to the element is displayed.

    Add a CSS declaration to the element using the Styles panel

    The declaration is applied to the element using the section of the Styles panel

Add a CSS class to an element

To display how an element looks when a CSS class is applied to or removed from an element, navigate to the Styles panel.

  1. Open CSS Examples.

  2. Hover on the text, open the contextual menu (right-click), and choose Inspect.

  3. Choose .cls. DevTools reveals a text box where you may add classes to the selected element.

  4. Type in the Add new class text box and then select . A checkbox appears below the Add new class text box, where you may toggle the class on and off. If the element has any other classes applied to it, you are also able to toggle each from here.

    Apply the color_me class to the element

    The class is applied to the element using the .cls section of the Styles panel

Add a pseudostate to a class

Use the Styles panel to permanently apply a CSS pseudostate to an element. DevTools supports , , , and .

  1. Open CSS Examples.

  2. Hover on the text. The background color changes.

  3. Hover on the text, open the contextual menu (right-click), and choose Inspect.

  4. In the Styles panel, choose :hov.

  5. Check the :hover checkbox. The background color changes like before, even though you are not actually hovering over the element.

    Toggle the hover pseudostate on an element

    Toggle the pseudostate on an element

Change the dimensions of an element

Use the Box Model interactive diagram in the Styles panel to change the width, height, padding, margin, or border length of an element.

  1. Open CSS Examples.

  2. Hover on the text, open the contextual menu (right-click), and choose Inspect.

  3. In the Box Model diagram in the Styles panel, hover on padding. The padding of an element is highlighted in the viewport.

    Note

    Depending on the size of your DevTools window, you may need to scroll to the bottom of the Styles panel to display the Box Model.

  4. Double-click the left margin in the Box Model, which currently has a value of meaning that the element does not have a left-margin.

  5. Type and select . The Box Model defaults to pixels, but it also accepts other values, such as , or .

Debugging Media Queries

Media Queries are a way to make your web product react to changes in the configuration settings for each user. The most significant use case is to provide your product a different CSS layout depending on the dimensions of the viewport. Using separate layouts allows for a one-column layout for mobile devices and multi-column layouts when there is more screen estate available.

If you want to debug or test the Media Queries you defined in your CSS, use the following steps.

  1. Open the developer tools and select the Toggle device toolbar icon second on the top-left, or select ++ (++ on macOS).

    Open the device toolbar

  2. With the device toolbar open, select the menu on the top-right and choose View Media Queries. The colored bars displayed above the webpage represent the different media queries.

    Show Media Queries in Device Toolbar

    Show Media Queries in Device Toolbar

  3. Hover on the boundaries in the bars to display the values of the different media queries. Choose each to resize the web page to match.

    Choose Media Query from preview bar

    Choose Media Query from preview bar

  4. To debug media queries and open the CSS file in the editor; hover on any of the bar segments, open the contextual menu (right-click), and select .

    Reveal Media Queries in Sources Editor

    Reveal Media Queries in Sources Editor

Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 International License.

Feedback

View all page feedback

Sours: https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/css/
  1. The gatherer advanced
  2. Hye sun mun
  3. Eyewitness books for kids

CSS features reference

Discover new workflows in the following comprehensive reference of Microsoft Edge DevTools features related to viewing and changing CSS.

To learn the basics, navigate to Get Started with Viewing and Changing CSS.

Choose an element

The Elements tool of DevTools lets you view or change the CSS of one element at a time. The selected element is highlighted in the DOM Tree. The styles of the element are shown in the Styles pane. For a tutorial, navigate to View the CSS for an element.

Note

In the following figure, the element that is highlighted in the DOM Tree is the selected element. On the right, the styles of the element are shown in the Styles pane. On the left, the element is highlighted in the viewport, but only because the mouse is currently hovering over it in the DOM Tree.

An example of a selected element

An example of a selected element

Use one the following actions to select an element.

  • In your viewport, hover on the element, open the contextual menu (right-click), and choose Inspect.
  • In DevTools, choose Select an element (Select an element) or select ++ (Windows, Linux) or ++ (macOS), and then choose the element in the viewport.
  • In DevTools, choose the element in the DOM Tree.
  • In DevTools, run a query like in the Console, hover on the result, open the contextual menu (right-click), and choose Reveal in Elements panel.

View CSS

View the external stylesheet where a rule is defined

In the Styles pane, choose the link next to a CSS rule to open the external stylesheet that defines the rule. The stylesheet opens in the Editor pane of the Sources tool.

If the stylesheet is minified, choose the Format (Format) button, at the bottom of the Editor pane. For more information, navigate to Reformat a minified JavaScript file with pretty-print.

Note

In the following figure, after you choose you are taken to line 2 of , where the CSS rule is defined.

Viewing the stylesheet where a rule is defined

Viewing the stylesheet where a rule is defined

View only the CSS that is actually applied to an element

The Styles panel shows you all of the rules that apply to an element, including declarations that have been overridden. When you are not interested in overridden declarations, use the Computed panel to view only the CSS that is actually being applied to an element.

  1. Select an element.
  2. Navigate to the Computed panel in the Elements tool.

Note

On a wide DevTools window, the Computed panel does not exist. The contents of the Computed panel are shown on the Styles panel.

Inherited properties are opaque. To display all inherited values, select the Show All checkbox.

Note

In the following figure, the Computed panel shows the CSS properties being applied to the currently-selected element.

The Computed panel

View CSS properties in alphabetical order

Use the Computed panel. Navigate to View only the CSS that is actually applied to an element.

View inherited CSS properties

Check the Show All checkbox in the Computed panel. Navigate to View only the CSS that is actually applied to an element.

View the box model for an element

To view the box model of an element, navigate to the Styles panel. If your DevTools window is narrow, the Box Model diagram is at the bottom of the panel.

Choose and edit on a value to change a value.

Note

In the following figure, the Box Model diagram in the Styles panel shows the box model for the currently selected element.

The Box Model diagram

Search and filter the CSS of an element

Use the Filter text box on the Styles and Computed panels to search for specific CSS properties or values.

To also search inherited properties in the Computed panel, check the Show All checkbox.

Note

In the following figure, the Styles panel is filtered to only show rules that include the search query .

Filter the Styles panel

Note

In the following figure, the Computed panel is filtered to only show declarations that include the search query .

Filter the Computed panel

Filter the Computed panel

Toggle a pseudo-class

Complete the following actions to toggle a pseudo-class like , , , or .

  1. Select an element.
  2. On the Elements tool, navigate to the Styles panel.
  3. Choose :hov.
  4. Check the pseudo-class that you want to enable.

Note

In the following figure, toggle the pseudo-class. In the viewport verify that the declaration is being applied to the element, even though the element is not actually being hovered over.

Toggle the :hover pseudo-class

Toggle the pseudo-class

For an interactive tutorial, navigate to Add a pseudostate to a class.

View a page in print mode

Complete the following actions to view a page in print mode.

  1. Open the Command Menu.
  2. Start typing and select .
  3. For the Emulate CSS Media dropdown, choose print.

View used and unused CSS with the Coverage tool

The Coverage tool shows you what CSS a page actually uses.

  1. Select ++ (Windows, Linux) or ++ (macOS) while DevTools is in focus to open the Command Menu.

  2. Start typing and choose Show Coverage. The Coverage tool appears.

  3. Choose Start instrumenting coverage and refresh the page (Start instrumenting coverage and refresh the page). The page refreshes and the Coverage tool provides an overview of how much CSS (and JavaScript) is used from each file that the browser loads. Green represents used CSS. Red represents unused CSS.

    An overview of how much CSS (and JavaScript) is used and unused

    An overview of how much CSS (and JavaScript) is used and unused

  4. To display a line-by-line breakdown of what CSS is used, choose a CSS file.

    Note

    In the following figure, lines 145 to 147 and 149 to 151 of are unused, whereas lines 163 to 166 are used.

    A line-by-line breakdown of used and unused CSS

    A line-by-line breakdown of used and unused CSS

Force print preview mode

Navigate to Force DevTools into Print Preview mode.

Change CSS

Add a CSS declaration to an element

The order of declarations affects how an element is styled, use the following list to help you add declarations in different ways.

What workflow should you use? For most scenarios, you probably want to use the inline declaration workflow. Inline declarations have higher specificity than external ones, so the inline workflow ensures that the changes take effect in your expected element. For more information about specificity, navigate to Selector Types.

If you are debugging any styles of the element and you need to specifically test what happens when a declaration is defined in different places, use the other workflow.

Add an inline declaration

Complete the following actions to add an inline declaration.

  1. Select an element.
  2. In the Styles pane, choose between the brackets of the element.style section. The cursor focuses, allowing you to enter text.
  3. Enter a property name and select .
  4. Enter a valid value for that property and select . In the DOM Tree, verify that a attribute has been added to the element.

Note

In the following figure, the and properties have been applied to the selected element. In the DOM Tree verify that the declarations are reflected in the attribute for an element.

Add inline declarations

Add a declaration to a style rule

Complete the following actions to add a declaration to an existing style rule.

  1. Select an element.
  2. In the Styles pane, choose between the brackets of the style rule to which you want to add the declaration. The cursor focuses, allowing you to enter text.
  3. Enter a property name and select .
  4. Enter a valid value for that property and select .

Adding a declaration to a style rule

Add the declaration to a style rule

Change a declaration name or value

Choose and edit the name or value of a declaration to change it. For shortcuts for quickly incrementing or decrementing a value by , , , or units, navigate to Change declaration values with keyboard shortcuts.

Changing the value of a declaration

Change the value of the declaration

Change declaration values with keyboard shortcuts

While editing the value of a declaration, you may use the following keyboard shortcuts to increment the value by a specific amount.

  • Select + (Windows, Linux) or + (macOS) to increment by .
  • Select to change the value by , or by if the current value is between and .
  • Select + to increment by .
  • Select + (Windows, Linux) or ++ (macOS) to increment the value by .

Decrementing also works. Just replace each instance of mentioned above with .

Add a class to an element

Complete the following actions to add a class to an element.

  1. Select the element in the DOM Tree.
  2. Choose .cls.
  3. Enter the name of the class in the Add New Class text box.
  4. Select .

The Element Classes pane

Toggle a class

Complete the following actions to enable or disable a class on an element.

  1. Select the element in the DOM Tree.
  2. Open the Element Classes pane. Navigate to Add a class to an element. Below the Add New Class text box are all of the classes applied to the specific element.
  3. Toggle the checkbox next to the class that you want to turn on or off.

Add a style rule

Complete the following actions to add a new style rule.

  1. Select an element.
  2. Choose New Style Rule (New Style Rule). DevTools inserts a new rule beneath the element.style rule.

Note

In the following figure, DevTools adds the style rule after you choose New Style Rule.

Add a new style rule

Choose which stylesheet to add a rule to

When adding a new style rule, choose and hold New Style Rule (New Style Rule) to choose which stylesheet to add the style rule to.

Choose a stylesheet

Add a style rule to a specific location

Complete the following actions to add a style rule to a specific location in the Styles panel.

  1. Hover on the style rule that is directly above where you want to add your new style rule.
  2. Reveal the More Actions toolbar.
  3. Choose Insert Style Rule Below (Insert Style Rule Below icon).

Insert Style Rule Below

Reveal the More Actions toolbar

The More Actions toolbar lets you perform the following actions.

  • Insert a style rule directly below the one you are focused on.
  • Add a , , , or declaration to the style rule you are focused on.

Complete the following actions to reveal the More Actions toolbar.

  1. In the Styles panel, hover on a style rule. More Actions () is revealed in the bottom-right of the style rule section.

    Note

    In the following figure, hover on the style rule and More Actions is revealed in the bottom-right of the style rule section.

    Reveal More Actions

    Reveal More Actions ()

  2. Hover on More Actions () to reveal the actions mentioned above.

    Note

    The Insert Style Rule Below action is revealed after hovering over More Actions.

    The More Actions toolbar

Toggle a declaration

Complete the folllwoing actions to toggle a single declaration on (or off).

  1. Select an element.
  2. In the Styles pane, hover on the rule that defines the declaration. A checkbox appears next to each declaration.
  3. Check (or uncheck) the checkbox next to the declaration. When you uncheck a declaration, DevTools crosses it out to indicate that it is no longer active.

Note

In the following figure, the property for the currently selected element has been toggled off.

Toggle a declaration

Add a background-color declaration

Complete the following actions to add a declaration to an element.

  1. Hover on the style rule that you want to add the declaration to.
  2. Reveal the More Actions toolbar.
  3. Choose Add Background Color (Add Background Color icon).

Add Background Color

Add a color declaration

Complete the following actions to add a declaration to an element.

  1. Hover on the style rule that you want to add the declaration to.
  2. Reveal the More Actions toolbar.
  3. Choose Add Color (Add Color icon).

Add Color

Add a box-shadow declaration

Complete the follwoing actions to add a declaration to an element.

  1. Hover on the style rule that you want to add the declaration to.
  2. Reveal the More Actions toolbar.
  3. Choose Add Box Shadow (Add Box Shadow icon).

Add Box Shadow

Add a text-shadow declaration

Complete the following actions to add a declaration to an element.

  1. Hover on the style rule that you want to add the declaration to.
  2. Reveal the More Actions toolbar.
  3. Choose Add Text Shadow (Add Text Shadow icon).

Add Text Shadow

Change colors with the Color Picker

The Color Picker provides a GUI for changing and declarations.

Complete the following actions to open the Color Picker.

  1. Select an element.

  2. In the Styles panel, find the , , or similar declaration that you want to change. To the left of the , , or similar value, there is a small square which is a preview of the color.

    Note

    In the following figure, the small square to the left of is a preview of that color.

    Color preview

  3. Choose the preview to open the Color Picker.

    The Color Picker

The following figure and list descries of each of the UI elements of the Color Picker.

The Color Picker, annotated

The Color Picker, annotated

Copy the Display Value to your clipboard.

The RGBA, HSLA, or Hex representation of the color.

Choose one of the squares to change the color to that square.

Toggle between the RGBA, HSLA, and Hex representations of the current color.

Toggle between the Material Design palette, a custom palette, or a page colors palette. DevTools generates the page color palette based on the colors that it finds in your stylesheets.

Sample a color off the page with the Eyedropper

When you open the Color Picker, the Eyedropper (Eyedropper) is on by default. Complete the following actions to change the selected color to some other color on the page.

  1. Hover on the target color in the viewport.

  2. Choose to confirm.

    Note

    In the following figure, the Color Picker shows a current color value of , which is close to black. The specific color should change to the version of black that is currently highlighted in the viewport after you chose it.

    Using the Eyedropper

Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 International License.

Sours: https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/css/reference
Learn CSS in 20 Minutes

Microsoft Support Emergency Response Tool (MSERT) to scan Microsoft Exchange Server

Microsoft Defender has included security intelligence updates to the latest version of the Microsoft Safety Scanner (MSERT.EXE) to detect and remediate the latest threats known to abuse the Exchange Server vulnerabilities disclosed on March 2, 2021. Administrators can use this tool for servers not protected by Microsoft Defender for Endpoint or where exclusions are configured for the recommended folders below.

To use the Microsoft Support Emergency Response Tool (MSERT) to scan the Microsoft Exchange Server locations for known indicators from adversaries:

  1. Download MSERT from Microsoft Safety Scanner Download – Windows security.Note: In case you need to troubleshoot it, see How to troubleshoot an error when you run the Microsoft Safety Scanner.
  2. Read and accept the End user license agreement, then click Next.
  3. Read the Microsoft Safety Scanner Privacy Statement, then click Next.
  4. Select whether you want to do full scan, or customized scan.
  • Full scan – The most effective way to thoroughly scan every file on the device. It is the most effective option although it might take a long time to complete depending on the directory size of your server.
  • Customized scan – This can be configured to scan the following file paths where malicious files from the threat actor have been observed:

%IIS installation path%\aspnet_client*
%IIS installation path%\aspnet_client\system_web*
%Exchange Server installation path%\FrontEnd\HttpProxy\owa\auth*
%Exchange Server Installation%\FrontEnd\HttpProxy\ecp\auth*
Configured temporary ASP.NET files path

These remediation steps are effective against known attack patterns but are not guaranteed as complete mitigation for all possible exploitation of these vulnerabilities. Microsoft Defender will continue to monitor and provide the latest security updates.

Sours: https://github.com/microsoft/CSS-Exchange/blob/main/Security/Defender-MSERT-Guidance.md

Css microsoft

.

👩‍💻 What is an API? // HTTP Requests! // HTML, CSS, JavaScript, Microsoft Automate

.

Now discussing:

.



832 833 834 835 836