¡GoConqr estrena diseño! Cuéntanos qué te parece.

Regístrate gratis

Fichas

CSS

Heather Strodtman Inglés 95 fichas

Fichas del conjunto (95)

  1. 1How do you make a CSS comment?Anything in a CSS document between /* and */ is a comment.
  2. 2How do you add inline styling (in the HTML file)?add a style attribute to the opening tag of an element and setting its value to the desired style or by using the in the <head>
    ex. <p style=”color: red;”> and
    <style> p { color: red; }
  3. 3How do you apply CSS files to the HTML file?Put a link in the HTML docs
    ex.
  4. 4How do you create a selector using class or id?for class: add a . before the value
    for id: ad a # before the value
  5. 5How do you make a selector using a parent and child element?Add the child selector after the parent, separated with a space.
    .main-list li { } would select all list items within a list with class main-list
  6. 6How do you make a selector based on multiple criteria?Combine them with no space between.
    h1.special { } would select h1 elements with a class=special
  7. 7How would you write multiple declarations for the same selector?p {
    color: red;
    width: 500px;
    }
  8. 8How would you write a CSS rule applying to multiple selectors?p, li, h1 {
    color: red;
    }
  9. 9What is the order of specificity for selectors from lowest to highest & what happens when their is more than one selector?tags, class, id. Adding more than one selector increases the specificity of the CSS selector.
  10. 10What style is used if two selectors have the same specificity?The one further down the style sheet
  11. 11What property is used to change typeface?font-family
  12. 12How would you set up fallback fonts?Use multiple fonts separated by commas with the font-family property
    font-family: "Garamond", "Times", serif;
  13. 13What is a non-user font and how can you use one?fonts that are centralized in directories for public use. Obtain the font link (ex. from Google Fonts) and add the link in the index HTML files head.
  14. 14How would you insert a font directly into a stylesheet?1) enter the font link into your browser URL 2) Copy any latin @font-face CSS rules & paste the rules to the top of style.css
  15. 15How do you change and element's font size?Use the font-size property with the px units
  16. 16How does text alignment appear by default and how do you change text alignment?Text defaults to the left side of the browser. Alignment can be changed by setting text-align property of the texts parent element to left, center, or right
  17. 17How do you control how bold or light text will appear?Change the font-weight property value to normal or bold. Can also assigned a number value ranging from 100 to 900, in multiples of 100 where 400 is the default for most text, 700 signifies a bold and 300 signifies a light font-weight.
  18. 18How do you italicize font?Change the font-style property from normal to italic
  19. 19How do you change the spacing between words & what is the default spacing and units?Use the word-spacing property. The default value is 0.25em with the preferred units of ems
  20. 20How do you change the kerning (spacing between individual letters) of text?Use the letter-spacing property
  21. 21How could you change text from lowercase or uppercase?Use the text-transform property with a value of either uppercase of lowercase
  22. 22How would you change how tall the line containing text is, regardless of the text height & what is the preferred method?Use the line-height property. The preferred method is to use a unitless number which represents line height as a ratio of the font size since it automatically readjusts when font size is changed.
  23. 23What is the default box model in CSS, name its parts and how can you change it?The default model box model is the content-box Its parts are the content, padding, border and margin. You can change the box model using the box-sizing property
  24. 24What does it mean for an elements box-sizing property to be set to content-box and what are some of it's drawbacks?This is the default box-sizing property where border thickness and padding are added to the height/width to get the rendered dimensions of the box. Can be difficult to accurately size a box and can make a web page’s content difficult to position.
  25. 25What determines a block of contents (e.g. paragraph text) size and how could you change the size?The block defaults to a size big enough to hold only the content, but can be altered with the height and width properties.
  26. 26What is padding and how could you change it's dimension?Padding is the area outside the content that spans to the border. You can change the padding using the padding property or change individual sides using the padding-left, padding-top etc. properties
  27. 27What is the border property, what values can you change for this property and what are it's default values?The border is the line outside the padding. You can change the width, style (line type) and color values all in one line ex.
    p { border: 3px solid coral; }
    The defaults are medium none color (color is the current color of the element)
  28. 28What is a margin? How would you change margins on all four sides vs. one side?The margin property defines the space between and elements border and other elements. You can use the margin property for all sides or the margin-left, margin-top etc.
  29. 29What is the distance between a box with a lower margin of 10px on top of a box with a top margin of 30px and why?There would be an effective distance of 30px. Although the sum of the margins is 40 pixels, because top and bottom margins collapse/overlap the spacing is only dependent on the larger margin.
  30. 30What is the format for margin and padding properties with 1, 2, 3, and 4 values?1 value would have equal distance on all sides, 2 values apply to the top and bottom then the left and right sides, 3 values apply to the top, left and right and then bottom, 4 values apply clockwise from the top.
  31. 31How could you center content within a margin evenly?Use the special value auto
  32. 32What must be done to use the auto value?The width must be set for the intended element because it’s not possible to center an element that takes up the full width of the page (which is the default when not set).
  33. 33Name 4 properties that can be set to limit the size of an elements boxmin-width, max-width, min-height, max-height
  34. 34What property can be used to curve the corners of an elements box and how would you use it?border-radius, setting the property using px will give the box the curvature that a circle with the radius of the same size
  35. 35How would you create a perfect oval or circle element box?Set the border-radius equal to the box height or to 100%. For a circle the height and width must be equal.
  36. 36What happens when an element's total dimensions are larger than its parent element's dimension?By default the content overflows to display outside of the parent element.
  37. 37What values are available to adjust the overflow property and how do they work?You can set the overflow property to scroll: which adds a scroll bar to view content that does not fit, hidden: which hides any content that does not fit, and visible (the default) which shows content outside the parent element.
  38. 38What level of element is overflow used on and what is required to use this property?The overflow property is set on a parent element and affects it's child elements. The element needs to have a height or max-height defined.
  39. 39What is an alternative to the content-box model and what are it's advantages?A value of border-box in the box-sizing property makes border thickness and padding included inside of the box, so its height and width don't change. The content area is resized based on the remaining width after border and padding have been subtracted.
  40. 40What properties would you use to change all elements background and foreground (e.g. text)?background-color and color
  41. 41What syntax would you use to change color using RGB?color: rgb(0, 0, 255);
    where the numbers represent decimal values for red, green, and blue.
  42. 42What syntax would you use to change color using HSL and what does HSL stand for?color: hsl(120, 60%, 70%);
    h: hue refers to an angle on a color wheel, s: saturation is the intensity of the color (closer to 100% is more intense) and l: % lightness of the color
  43. 43What is one what to select colors that work well together?While using HSL, select colors that have the same lightness and saturation but different hues.
  44. 44Name 2 ways to the change transparency of an element1) use the opacity property with a value from 0 (invisible) to 1 (fully visible/opaque)
    2) add a fourth value (a for alpha) to rgb and hsl colors, indicating the opacity
    ex. color: rgba(0, 10, 20, .5);
  45. 45How would you make the background of an element and image?Use the background-image property with the image hyperlink or relative path as the value
    ex. background-image: url("https://www.example.com/image.jpg");
  46. 46How would you add a shadow to text and what do the values indicate?Use the text-shadowing property. The 1st value is the horizontal offset, 2nd is the vertical offset, 3rd is the blur-radius and 4th is the base color of the shadow
  47. 47What are the 3 values of the display property and what happens when you change this value?block, inline & inline-block.
    When this value is changed it changes visual representation, not category or content model of the element.
  48. 48Describe the characteristics of block elements.By default, they occupy the full width of their parent elements and can have margin and other spacing values applied to them. Unless specified, they are the height necessary to accommodate their content and prevent other elements from appearing in the same horizontal space.
  49. 49Describe the characteristics of inline elements.Cannot have margin, height/width & other spacing values applied to them, by default. Don’t require a new line after the element. Only take up enough space to display content.
  50. 50What property would you use to change and elements from block, inline or inline-block?display property
  51. 51What are the characteristics of an inline-block element?They can appear in line with each other, but we can specify spacing values like width and height (ex. )
  52. 52What are some examples of inline elements?Default display for , and
  53. 53What are some examples of block elements?HTML body, to , , and
  54. 54What does the position property do, what is its default and what are 3 other values you can use with it?Sets the position of the element in the browser. Static (default), fixed, relative, and absolute.
  55. 55What are the characteristics of the static position?The element renders in order as it appears in the document (left side)
  56. 56What are the characteristics of the relative position?positioned relative to the static position using offset properties ex.
    .box-bottom {
    position: relative;
    top: 20px;
    left: 50px;
    }
    moves the element down 20px and right 50px
  57. 57Describe how to use the offset propertiesThese properties are used to offset FROM the top, bottom, left and right. Specified in pixels, ems, or percentage units.
    ex. top: 20px;
    would move an element down 20px
  58. 58What are the characteristics of the absolute position?These elements are positioned relative to their closest parent element (using offsets). Other elements will ignore these element (e.g. will allow for overlapping/sharing the same horizontal space).
  59. 59What are the characteristics of the fixed position?This fixes an element to a certain spot (using offset from the default) on the page, regardless of the user scrolling. Often used for navigation bars. Other elements will ignore this element (e.g. will allow for overlapping / sharing the same horizontal space).
  60. 60How could you control how far back or forward (depth) an element appears when elements overlap?Using the z-index property with an integer value which represents order in which elements should appear. e.g. An element with a z-index of 2 would be in front of one with a z-index of 1.
  61. 61How could you move an element all the way to the left or right of the browser?Use the float property with either a left or right value.
  62. 62What are the requirements for using the float property and how will using the float property change an element?The element cannot have an absolute position value and must have a width specified. Using float removes an element from normal flow and allows other elements to display beside it (items actually run behind the float).
  63. 63What can be done to keep elements from "bumping into each other" when using the float property?Use the clear property with values of left- left side will not touch any other element, right- right side will not touch any other element, both- neither side will touch any other element, none- elements can touch either side. Applies to elements in the same containing element.
  64. 64What types of layouts are best for using Flexbox and CSS grid?Flexbox is most useful for one-dimensional layouts (one axis), CSS grid is most useful for two-dimensional layouts (rows and columns)
  65. 65What are the parent and children elements of a CSS grid referred to as?To grid container and the grid items
  66. 66How do you make element a CSS grid container? Is this different for inline elements?Set the element’s display property to grid (for a block-level grid) or inline-grid (for an inline grid).
  67. 67What size do element's default to in CSS grid?By default elements will span the height and width of the row(s)/column(s) they are in.
  68. 68How do you define the # of rows and columns in a grid?You could use the grid-template-columns and grid-template rows properties or grid-template property.
  69. 69How do you use the grid-template-columns and grid-template-rows properties?Use the properties followed by the widths of each column/row in units or as a % of the grids width/heigth.
    ex. grid-template-columns: 20px 40% 60px;
  70. 70How do you use the grid-template property?Use the property followed by the sizes of the rows then columns
    separated by a forward slash. ex.
    grid-template: 200px 300px / 20% 10% 70%; would create a 2 row 3 column grid
  71. 71What does the sizing unit fr indicate?This is a sizing unit created specially for CSS grid which stands for the fraction of available space. When used with other units it indicates the fraction of remaining available space.
  72. 72What is the repeat() function used for and what is the syntax?To define the number of rows and columns in a grid. ex. grid-template-rows: repeat(3, 100px); creates a grid with 3 rows, each 100px and repeat(2, 20px 50px) would create a grid with four rows. The 1st and 3rd will be 20 px and the 2nd and 4th will be 50 px wide.
  73. 73How could you create a grid with 5 equally sized rows?grid-template-rows: repeat(5, 1fr);
  74. 74When would you use the minmax() function and what is the syntaxTo keep a column or row from getting to big or too small, esp. when making grids that resize based on the size of your browser. ex. grid-template-rows: 100px minmax(100px, 500px) 100px; would have a second column that would not exceed 500px or go below 100px
  75. 75How do you put gaps between rows and columns in CSS grid?Use the grid-row-gap, grid-column-gap and grid-gap properties.
  76. 76What is the syntax for grid-row-gap, grid-column-gap and grid-gap?Use the property followed by the space you want between rows/columns. For grid-gap one value sets the distance for both rows and columns, 2 values set gaps for rows then columns (with no / between) ex. grid-gap: 20px 10px;
  77. 77How can you make grid items span multiple columns and rows?Use grid-row-start, grid-row-end & grid-row, grid-column-start, grid-column-end and grid-column or grid-area to set both columns and rows.
  78. 78Write a grid item that spans the 2nd and 3rd columns and 1st through 5th rows, first individually and then in one line.grid-row: 1 / 6;
    grid-column: 2 /4; or
    grid-area: 1 / 2 / 6 / 4;
  79. 79How could you use span to create a grid that spans rows 4 and 5grid-row: 4 / span 2; or
    grid-row-start: span 2; grid-row-end: 6;
  80. 80How could you name sections of your webpage to use in grid-area, grid-row & grid-column properties?Use grid-template-area.
    ex. grid-template-areas: "head head"
    "nav nav"
    "info services"
    "footer footer";
    creates a 2-column, 4-row layout.
  81. 81How do you use the gird-area property?create a selector for the section of webpage being styled and set its grid-area to the section name you created using grid-template-areas ex. header {
    grid-area: head; }
  82. 82Can CSS grid items overlap?Yes
  83. 83What are the two axis in grid layout and where are they located?The row (or inline) axis which stretches horizontally across the page & the column (or block) axis which stretches vertically across the page.
  84. 84How can you position grid items along the row axis (within their columns)?Use the justify-items property (on the parent grid element) with a value of start, end, center, stretch etc.
  85. 85How can you position an entire grid along the row axis?Use the justify-content property.
  86. 86What values could you use to put an equal amount of space on each side of a grid element, an equal amount of space between grid items and no space at either end or an even amount of space between grid items and at either endspace-around, space-between, space-evenly
  87. 87How can you position grid items along the column axis (within their rows)?align-items
  88. 88How can you position an entire grid along the column axis?align-content
  89. 89How could you change the position of an individual grid item?Use justify-self or align-self
  90. 90What happens when a developer's grid does not accommodate the number of element's on the webpage?The implicate grid applies which by default adds new rows when necessary, but rows will only be tall enough to contain their content.
  91. 91How could you specify the height or width of implicate rows or columns added to a CSS grid?Use grid-auto-rows or grid-auto-columns with a specified size.
    ex. grid-auto-rows: 100px;
  92. 92How could you specify whether elements added implicitly (those exceeding a developers grid size) are added to rows or columns?Use the grid-auto-flow property with a value of row (default) or column.
  93. 93What would using the value dense in the grid-auto-flow property do to implicitly added elements?It invokes an algorithm that attempts to fill holes earlier in the grid layout if smaller elements are added.
  94. 94What is the name of a default stylesheet browsers use when no external stylesheet is provided?User agent stylesheets
  95. 95What selector could you use to target all on a web page?* (the universal selector)

Información

Descripción
Fichas sobre CSS, creado por Heather Strodtman el 04/04/2019.
Visitas
30
Valoración

Escríbenos

¿Sobre qué es tu mensaje?

¿Qué te parece el nuevo diseño?

¿Te gusta?