CSS Flashcards

Question

Media Query Syntax

Answer 1

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false. @media not|only mediatype and (expressions) { CSS-Code; } The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Unless you use the not or only operators, the media type is optional and the all type will be implied. You can also have different stylesheets for different media:

Answer 2

CSS3 Media Types Value Description all Used for all media type devices print Used for printers screen Used for computer screens, tablets, smart-phones etc. speech Used for screenreaders that "reads" the page out loud

Answer 3

One way to use media queries is to have an alternate CSS section right inside your style sheet. The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink): ``` Example @media screen and (min-width: 480px) { body { background-color: lightgreen; } } ``` --- body { background-color: pink; } ``` @media screen and (min-width: 480px) { body { background-color: lightgreen; } } ```

Resize the browser window to see the effect!

The media query will only apply if the media type is screen and the viewport is 480px wide or wider.

Answer 4

The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content): ``` Example @media screen and (min-width: 480px) { #leftsidebar {width: 200px; float: left;} #main {margin-left: 216px;} } -- ``` .wrapper {overflow: auto;} #main {margin-left: 4px;} ``` #leftsidebar { float: none; width: auto; } ``` #menulist { margin: 0; padding: 0; } ``` .menuitem { background: #CDF0F6; border: 1px solid #d4d4d4; border-radius: 4px; list-style-type: none; margin: 4px; padding: 2px; } ``` ``` @media screen and (min-width: 480px) { #leftsidebar {width: 200px; float: left;} #main {margin-left: 216px;} } ```

Menu-item 1
Menu-item 2
Menu-item 3
Menu-item 4
Menu-item 5

Resize the browser window to see the effect!

This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.

Answer 5

Responsive web design makes your web page look good on all devices. Responsive web design uses only HTML and CSS. Responsive web design is not a program or a JavaScript. Designing For The Best Experience For All Users Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device: It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

Answer 6

``` /* Set the background color of body to tan */ body { background-color: tan; } ``` ``` /* On screens that are 992px or less, set the background color to blue */ @media screen and (max-width: 992px) { body { background-color: blue; } } ``` ``` /* On screens that are 600px or less, set the background color to olive */ @media screen and (max-width: 600px) { body { background-color: olive; } } ```

Answer 7

``` /* The navbar container */ .topnav { overflow: hidden; background-color: #333; } ``` ``` /* Navbar links */ .topnav a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ``` ``` /* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .topnav a { float: none; width: 100%; } } ```

Answer 8

``` A common use of media queries, is to create a flexible layout. In this example, we create a layout that varies between four, two and full-width columns, depending on different screen sizes: /* Create four equal columns that floats next to each other */ .column { float: left; width: 25%; } ``` ``` /* On screens that are 992px wide or less, go from four columns to two columns */ @media screen and (max-width: 992px) { .column { width: 50%; } } ``` ``` /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { width: 100%; } } ```

Answer 9

``` /* Container for flexboxes */ .row { display: flex; flex-wrap: wrap; } ``` ``` /* Create four equal columns */ .column { flex: 25%; padding: 20px; } ``` ``` /* On screens that are 992px wide or less, go from four columns to two columns */ @media screen and (max-width: 992px) { .column { flex: 50%; } } ``` ``` /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .row { flex-direction: column; } } ```

Answer 10

Another common use of media queries, is to hide elements on different screen sizes: ``` I will be hidden on small screens. Example /* If the screen size is 600px wide or less, hide the element */ @media screen and (max-width: 600px) { div.example { display: none; } } ```

Answer 11

``` /* If screen size is more than 600px wide, set the font-size of

to 80px */ @media screen and (min-width: 600px) { div.example { font-size: 80px; } } ``` ``` /* If screen size is 600px wide, or less, set the font-size of

to 30px */ @media screen and (max-width: 600px) { div.example { font-size: 30px; } }

```

Answer 12

``` .content-main { margin: 21px 107px 23px; } --

```

Answer 13

The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left). Margin - Individual Sides CSS has properties for specifying the margin for each side of an element: ``` margin-top margin-right margin-bottom margin-left All the margin properties can have the following values: ``` auto - the browser calculates the margin length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element Set different margins for all four sides of a

element: ``` p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; }

```

Answer 14

Element - Padding inside border - border - Margin outside border

Answer 15

To shorten the code, it is possible to specify all the margin properties in one property. The margin property is a shorthand property for the following individual margin properties: ``` margin-top margin-right margin-bottom margin-left So, here is how it works: ``` If the margin property has four values: ``` margin: 25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px Example Use the margin shorthand property with four values: ``` p { margin: 25px 50px 75px 100px; }

Answer 16

If the margin property has three values: ``` margin: 25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px Example Use the margin shorthand property with three values: ``` p { margin: 25px 50px 75px; }

Answer 17

If the margin property has two values: ``` margin: 25px 50px; top and bottom margins are 25px right and left margins are 50px Example Use the margin shorthand property with two values: ``` p { margin: 25px 50px; }

Answer 18

margin: 25px; all four margins are 25px Example Use the margin shorthand property with one value: p { margin: 25px; }

Answer 19

You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins. Example Use margin: auto: ``` div { width: 300px; margin: auto; border: 1px solid red; } ```

Answer 20

This example lets the left margin of the

element be inherited from the parent element (

): Example Use of the inherit value: div { border: 1px solid red; margin-left: 100px; } p.ex1 { margin-left: inherit; } -- div { border: 1px solid red; margin-left: 100px; } p.ex1 { margin-left: inherit; }

Use of the inherit value

Let the left margin be inherited from the parent element:

This paragraph has an inherited left margin (from the div element).

Answer 21

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins. This does not happen on left and right margins! Only top and bottom margins! Look at the following example: Example Demonstration of margin collapse: h1 { margin: 0 0 50px 0; } h2 { margin: 20px 0 0 0; } In the example above, the

element has a bottom margin of 50px and the

element has a top margin set to 20px. Common sense would seem to suggest that the vertical margin between the

and the

would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up being 50px. ----- h1 { margin: 0 0 50px 0; } h2 { margin: 20px 0 0 0; }

In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. Then, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.

Heading 1

Heading 2

Answer 22

CSS transforms allow you to move, rotate, scale, and skew elements. Mouse over the element below to see a 2D transformation: In this chapter you will learn about the following CSS property: transform

Answer 23

Some older browsers (IE 9) need specific prefixes (-ms-) to understand the 2D transform properties: div { -ms-transform: rotate(20deg); /* IE 9 */ transform: rotate(20deg); /* Standard syntax */ }

Answer 24

With the CSS transform property you can use the following 2D transformation methods: ``` translate() rotate() scaleX() scaleY() scale() skewX() skewY() skew() matrix() ```

Answer 25

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). The following example moves the

element 50 pixels to the right, and 100 pixels down from its current position: Example div { transform: translate(50px, 100px); }

Answer 26

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. The following example rotates the

element clockwise with 20 degrees: ``` Example div { transform: rotate(20deg); } Using negative values will rotate the element counter-clockwise. ``` The following example rotates the

element counter-clockwise with 20 degrees: Example div { transform: rotate(-20deg); }

Answer 27

The scale() method increases or decreases the size of an element (according to the parameters given for the width and height). The following example increases the

element to be two times of its original width, and three times of its original height: ``` Example div { transform: scale(2, 3); } The following example decreases the

element to be half of its original width and height: ``` Example div { transform: scale(0.5, 0.5); }

Answer 28

``` The scaleX() Method The scaleX() method increases or decreases the width of an element. ``` The following example increases the

element to be two times of its original width: ``` Example div { transform: scaleX(2); } The following example decreases the

element to be half of its original width: ``` Example div { transform: scaleX(0.5); }

Answer 29

The scaleY() method increases or decreases the height of an element. The following example increases the

element to be three times of its original height: ``` Example div { transform: scaleY(3); } The following example decreases the

element to be half of its original height: ``` Example div { transform: scaleY(0.5); }

Answer 30

``` The skewX() Method The skewX() method skews an element along the X-axis by the given angle. ``` The following example skews the

element 20 degrees along the X-axis: ``` Example div { transform: skewX(20deg); } The skewY() Method The skewY() method skews an element along the Y-axis by the given angle. ``` The following example skews the

element 20 degrees along the Y-axis: ``` Example div { transform: skewY(20deg); } The skew() Method The skew() method skews an element along the X and Y-axis by the given angles. ``` The following example skews the

element 20 degrees along the X-axis, and 10 degrees along the Y-axis: ``` Example div { transform: skew(20deg, 10deg); } If the second parameter is not specified, it has a zero value. So, the following example skews the

element 20 degrees along the X-axis: ``` Example div { transform: skew(20deg); }

Answer 31

The matrix() method combines all the 2D transform methods into one. The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements. The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) Example div { transform: matrix(1, -0.3, 0, 1, 0, 0); }

Answer 32

CSS Transform Properties The following table lists all the 2D transform properties: Property Description transform Applies a 2D or 3D transformation to an element transform-origin Allows you to change the position on transformed elements

Answer 33

Function Description matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis translateX(n) Defines a 2D translation, moving the element along the X-axis translateY(n) Defines a 2D translation, moving the element along the Y-axis scale(x,y) Defines a 2D scale transformation, changing the elements width and height scaleX(n) Defines a 2D scale transformation, changing the element's width scaleY(n) Defines a 2D scale transformation, changing the element's height rotate(angle) Defines a 2D rotation, the angle is specified in the parameter skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis skewX(angle) Defines a 2D skew transformation along the X-axis skewY(angle) Defines a 2D skew transformation along the Y-axis

Answer 34

With the CSS border-radius property, you can give any element "rounded corners". The CSS border-radius property defines the radius of an element's corners. Tip: This property allows you to add rounded corners to elements! ``` #rcorners1 { border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } ``` ``` #rcorners2 { border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; } ``` ``` #rcorners3 { border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } ```

The border-radius Property

Rounded corners for an element with a specified background color:

Rounded corners!

Rounded corners for an element with a border:

Rounded corners!

Rounded corners for an element with a background image:

Rounded corners!

Tip: The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

Answer 35

``` #rcorners1 { border-radius: 15px 50px 30px 5px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } ``` ``` #rcorners2 { border-radius: 15px 50px 30px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } ``` ``` #rcorners3 { border-radius: 15px 50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } ``` ``` #rcorners4 { border-radius: 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } ```

The border-radius Property

Four values - border-radius: 15px 50px 30px 5px:

Three values - border-radius: 15px 50px 30px:

Two values - border-radius: 15px 50px:

One value - border-radius: 15px:

Answer 36

``` #rcorners1 { border-radius: 50px / 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } ``` ``` #rcorners2 { border-radius: 15px / 50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } ``` ``` #rcorners3 { border-radius: 50%; background: #73AD21; padding: 20px; width: 200px; height: 150px; } ```

The border-radius Property

Elliptical border - border-radius: 50px / 15px:

Elliptical border - border-radius: 15px / 50px:

Ellipse border - border-radius: 50%:

Answer 37

Property Description border-radius A shorthand property for setting all the four border-*-*-radius properties border-top-left-radius Defines the shape of the border of the top-left corner border-top-right-radius Defines the shape of the border of the top-right corner border-bottom-right-radius Defines the shape of the border of the bottom-right corner border-bottom-left-radius Defines the shape of the border of the bottom-left corner

Answer 38

Select and style a link when you mouse over it: a:hover { background-color: yellow; } The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link. Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!

Answer 39

CSS transitions allows you to change property values smoothly, over a given duration. Mouse over the element below to see a CSS transition effect: n this chapter you will learn about the following properties: ``` transition transition-delay transition-duration transition-property transition-timing-function ```

Answer 40

To create a transition effect, you must specify two things: the CSS property you want to add an effect to the duration of the effect Note: If the duration part is not specified, the transition will have no effect, because the default value is 0. The following example shows a 100px * 100px red

element. The

element has also specified a transition effect for the width property, with a duration of 2 seconds: ``` Example div { width: 100px; height: 100px; background: red; transition: width 2s; } ``` The transition effect will start when the specified CSS property (width) changes value. Now, let us specify a new value for the width property when a user mouses over the

element: ``` Example div:hover { width: 300px; } Notice that when the cursor mouses out of the element, it will gradually change back to its original style. ``` -- ``` div { width: 100px; height: 100px; background: red; transition: width 2s; } ``` div:hover { width: 300px; }

The transition Property

Hover over the div element below, to see the transition effect:

Note: This example does not work in Internet Explorer 9 and earlier versions.

Answer 41

The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height: div { transition: width 2s, height 4s; } -- ``` div { width: 100px; height: 100px; background: red; transition: width 2s, height 4s; } ``` div:hover { width: 300px; height: 300px; }

The transition Property

Hover over the div element below, to see the transition effect:

Note: This example does not work in Internet Explorer 9 and earlier versions.

Answer 42

The transition-timing-function property specifies the speed curve of the transition effect. The transition-timing-function property can have the following values: ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end ease-in - specifies a transition effect with a slow start ease-out - specifies a transition effect with a slow end ease-in-out - specifies a transition effect with a slow start and end cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function The following example shows the some of the different speed curves that can be used: ``` Example #div1 {transition-timing-function: linear;} #div2 {transition-timing-function: ease;} #div3 {transition-timing-function: ease-in;} #div4 {transition-timing-function: ease-out;} #div5 {transition-timing-function: ease-in-out;} ``` --- ``` div { width: 100px; height: 100px; background: red; transition: width 2s; } ``` ``` #div1 {transition-timing-function: linear;} #div2 {transition-timing-function: ease;} #div3 {transition-timing-function: ease-in;} #div4 {transition-timing-function: ease-out;} #div5 {transition-timing-function: ease-in-out;} ``` div:hover { width: 300px; }

The transition-timing-function Property

Hover over the div elements below, to see the different speed curves:

```

linear

ease

ease-in

ease-out

ease-in-out

```

Note: This example does not work in Internet Explorer 9 and earlier versions.

Answer 43

The transition-delay property specifies a delay (in seconds) for the transition effect. The following example has a 1 second delay before starting: Example div { transition-delay: 1s; } --- ``` div { width: 100px; height: 100px; background: red; transition: width 3s; transition-delay: 1s; } ``` div:hover { width: 300px; }

The transition-delay Property

Hover over the div element below, to see the transition effect:

Note: The transition effect has a 1 second delay before starting.

Note: This example does not work in Internet Explorer 9 and earlier versions.

Answer 44

Transition + Transformation The following example adds a transition effect to the transformation: Example div { transition: width 2s, height 2s, transform 2s; } ``` div { width: 100px; height: 100px; background: red; transition: width 2s, height 2s, transform 2s; } ``` div:hover { width: 300px; height: 300px; transform: rotate(180deg); }

Transition + Transform

Hover over the div element below:

Note: This example does not work in Internet Explorer 9 and earlier versions.

Answer 45

The CSS transition properties can be specified one by one, like this: ``` Example div { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; } or by using the shorthand property transition: ``` Example div { transition: width 2s linear 1s; }

Answer 46

The following table lists all the CSS transition properties: Property Description transition A shorthand property for setting the four transition properties into a single property transition-delay Specifies a delay (in seconds) for the transition effect transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete transition-property Specifies the name of the CSS property the transition effect is for transition-timing-function Specifies the speed curve of the transition effect

Answer 47

The CSS overflow property controls what happens to content that is too big to fit into an area. The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. The overflow property has the following values: visible - Default. The overflow is not clipped. The content renders outside the element's box hidden - The overflow is clipped, and the rest of the content will be invisible scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content auto - Similar to scroll, but it adds scrollbars only when necessary Note: The overflow property only works for block elements with a specified height. Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).

Answer 48

``` #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 50%; height: 100px; overflow: scroll; border: 1px solid #ccc; } ```

This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Answer 49

By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box. ``` div { width: 200px; height: 50px; background-color: #eee; overflow: visible; } ```

Answer 50

With the hidden value, the overflow is clipped, and the rest of the content is hidden: ``` You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box. Example div { overflow: hidden; } ```

Answer 51

overflow: scroll Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it): ``` You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box. Example div { overflow: scroll; } ```

Answer 52

The auto value is similar to scroll, but it adds scrollbars only when necessary: ``` You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box. Example div { overflow: auto; } ```

Answer 53

The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both): overflow-x specifies what to do with the left/right edges of the content. overflow-y specifies what to do with the top/bottom edges of the content. You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box. Example div { overflow-x: hidden; /* Hide horizontal scrollbar */ overflow-y: scroll; /* Add vertical scrollbar */ }

Answer 54

Property Description overflow Specifies what happens if content overflows an element's box overflow-x Specifies what to do with the left/right edges of the content if it overflows the element's content area overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element's content area

Answer 55

The color property is used to set the color of the text. The color is specified by: a color name - like "red" a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" Look at CSS Color Values for a complete list of possible color values. The default text color for a page is defined in the body selector. body { color: blue; } h1 { color: green; } Note: For W3C compliant CSS: If you define the color property, you must also define the background-color.

Answer 56

The text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified. The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left): h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; } When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers): div { text-align: justify; }

Answer 57

The text-decoration property is used to set or remove decorations from text. The value text-decoration: none; is often used to remove underlines from links: a { text-decoration: none; } The other text-decoration values are used to decorate text: h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } Note: It is not recommended to underline text that is not a link, as this often confuses the reader.

Answer 58

The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word: The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word: p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; }

This is some text.

Answer 59

set style for p elements that have class as capitalize

This is some text.

Answer 60

The text-indent property is used to specify the indentation of the first line of a text: p { text-indent: 50px; } it is like leaving a space for the first line of the paragraph

Answer 61

The letter-spacing property is used to specify the space between the characters in a text. The following example demonstrates how to increase or decrease the space between characters: h1 { letter-spacing: 3px; } h2 { letter-spacing: -3px; }

Answer 62

The line-height property is used to specify the space between lines: p.small { line-height: 0.8; } p.big { line-height: 1.8; }

Answer 63

The direction and unicode-bidi properties can be used to change the text direction of an element: p { direction: rtl; unicode-bidi: bidi-override; } p.ex1 { direction: rtl; unicode-bidi: bidi-override; }

This is the default text direction.

This is right-to-left text direction.

OUTPUT: This is the default text direction. rtl: makes it right to left but i was not able to paste it from w3schools, it is transforming it into normal text bidi-override - changes this to siht

Answer 64

The word-spacing property is used to specify the space between the words in a text. The following example demonstrates how to increase or decrease the space between words: h1 { word-spacing: 10px; } h2 { word-spacing: -5px; }

Answer 65

The text-shadow property adds shadow to text. The following example specifies the position of the horizontal shadow (3px), the position of the vertical shadow (2px) and the color of the shadow (red): h1 { text-shadow: 3px 2px red; } Note: Internet Explorer 9 and earlier do not support the text-shadow property.

Answer 66

p { white-space: nowrap; } it puts everything in one line with scroll bar

Answer 67

img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; }

An image with a default alignment.

An image with a text-top alignment.

An image with a text-bottom alignment.

Answer 68

Property Description color Sets the color of text direction Specifies the text direction/writing direction letter-spacing Increases or decreases the space between characters in a text line-height Sets the line height text-align Specifies the horizontal alignment of text text-decoration Specifies the decoration added to text text-indent Specifies the indentation of the first line in a text-block text-shadow Specifies the shadow effect added to text text-transform Controls the capitalization of text text-overflow Specifies how overflowed content that is not displayed should be signaled to the user unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document vertical-align Sets the vertical alignment of an element white-space Specifies how white-space inside an element is handled word-spacing Increases or decreases the space between words in a text

Answer 69

The opacity property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below). CSS Syntax opacity: number|initial|inherit; Property Values Value Description Play it number Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque) initial Sets this property to its default value. Read about initial inherit Inherits this property from its parent element. Read about inherit div { opacity: 0.5; } The opacity property adds transparency to the background of an element, and to all of its child elements as well. This makes the text inside a transparent element hard to read: div.first { opacity: 0.1; } div.second { opacity: 0.3; } div.third { opacity: 0.6; }

Answer 70

https://www.w3schools.com/cssref/css_selectors.asp In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements with class="intro" .class1.class2 .name1.name2 Selects all elements with both name1 and name2 set within its class attribute .class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1 #id #firstname Selects the element with id="firstname" * * Selects all elements element p Selects all

elements element.class p.intro Selects all

elements with class="intro" element,element div, p Selects all

elements and all

elements element element div p Selects all

elements inside

elements element>element div > p Selects all

elements where the parent is a

element element+element div + p Selects all

elements that are placed immediately after

elements element1~element2 p ~ ul Selects every

element [attribute] [target] Selects all elements with a target attribute [attribute=value] [target=_blank] Selects all elements with target="_blank" [attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower" [attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en" [attribute^=value] a[href^="https"] Selects every element whose href attribute value begins with "https" [attribute$=value] a[href$=".pdf"] Selects every element whose href attribute value ends with ".pdf" [attribute*=value] a[href*="w3schools"] Selects every element whose href attribute value contains the substring "w3schools" :active a:active Selects the active link ::after p::after Insert something after the content of each

element ::before p::before Insert something before the content of each

element :checked input:checked Selects every checked element :default input:default Selects the default element :disabled input:disabled Selects every disabled element :empty p:empty Selects every

element that has no children (including text nodes) :enabled input:enabled Selects every enabled element :first-child p:first-child Selects every

element that is the first child of its parent ::first-letter p::first-letter Selects the first letter of every

element ::first-line p::first-line Selects the first line of every

element :first-of-type p:first-of-type Selects every

element that is the first

element of its parent :focus input:focus Selects the input element which has focus :hover a:hover Selects links on mouse over :in-range input:in-range Selects input elements with a value within a specified range :indeterminate input:indeterminate Selects input elements that are in an indeterminate state :invalid input:invalid Selects all input elements with an invalid value :lang(language) p:lang(it) Selects every

element with a lang attribute equal to "it" (Italian) :last-child p:last-child Selects every

element that is the last child of its parent :last-of-type p:last-of-type Selects every

element that is the last

element of its parent :link a:link Selects all unvisited links :not(selector) :not(p) Selects every element that is not a

element :nth-child(n) p:nth-child(2) Selects every

element that is the second child of its parent :nth-last-child(n) p:nth-last-child(2) Selects every

element that is the second child of its parent, counting from the last child :nth-last-of-type(n) p:nth-last-of-type(2) Selects every

element that is the second

element of its parent, counting from the last child :nth-of-type(n) p:nth-of-type(2) Selects every

element that is the second

element of its parent :only-of-type p:only-of-type Selects every

element that is the only

element of its parent :only-child p:only-child Selects every

element that is the only child of its parent :optional input:optional Selects input elements with no "required" attribute :out-of-range input:out-of-range Selects input elements with a value outside a specified range ::placeholder input::placeholder Selects input elements with the "placeholder" attribute specified :read-only input:read-only Selects input elements with the "readonly" attribute specified :read-write input:read-write Selects input elements with the "readonly" attribute NOT specified :required input:required Selects input elements with the "required" attribute specified :root :root Selects the document's root element ::selection ::selection Selects the portion of an element that is selected by a user :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) :valid input:valid Selects all input elements with a valid value :visited a:visited Selects all visited links

Answer 71

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

Answer 72

A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. There are four different combinators in CSS: ``` descendant selector (space) child selector (>) adjacent sibling selector (+) general sibling selector (~) ```

Answer 73

The descendant selector matches all elements that are descendants of a specified element. The following example selects all

elements inside

elements: div p { background-color: yellow; }

Answer 74

The child selector selects all elements that are the children of a specified element. The following example selects all

elements that are children of a

element: Example div > p { background-color: yellow; } --- div > p { background-color: yellow; } ```

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4 in the div.

```

Paragraph 5. Not in a div.

Paragraph 6. Not in a div.

the style is not applied to paragraph 3, as it is not immediate child to div element

Answer 75

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and "adjacent" means "immediately following". The following example selects all

elements that are placed immediately after

elements: Example div + p { background-color: yellow; } div + p { background-color: yellow; }

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3. Not in a div.

Paragraph 4. Not in a div.

the style applied to only paragraph 3

Answer 76

The general sibling selector selects all elements that are siblings of a specified element. The following example selects all

elements that are siblings of

elements: Example div ~ p { background-color: yellow; } div ~ p { background-color: yellow; }

Paragraph 1.

Paragraph 2.

Paragraph 3.

Some code.

Paragraph 4.

style applied to para 3,4 as these are the siblings after div element

Answer 77

Selector Example Example description element element div p Selects all

elements inside

elements element>element div > p Selects all

elements where the parent is a

element element+element div + p Selects all

elements that are placed immediately after

elements element1~element2 p ~ ul Selects every

element

Answer 78

The :indeterminate selector selects form elements that are in an indeterminate state. The :indeterminate selector can only be used on , , and elements. Note: Checkboxes cannot be indeterminate with HTML - it is a property of the checkbox object, which can be set to true by JavaScript. Radio buttons are indeterminate when all radio buttons with the same name value in the form are unchecked. ``` Version: CSS3 CSS: input:indeterminate { box-shadow: 0 0 1px 1px red; } ``` HTML and javascript for setting indeterminate state: input:indeterminate { box-shadow: 0 0 1px 1px red; }

The indeterminate Selector

The checkbox below is in an indeterminate state (by JavaScript). If you click on it, it will change its state to "checked", and lose its red shadow color, as it is no longer indeterminate.

Note that an indeterminate checkbox has a "-" icon, rather than a checkmark or an empty box.

Checkbox ``` // Make the checkbox indeterminate via JavaScript var checkbox = document.getElementById("myCheckbox"); checkbox.indeterminate = true; ```

Answer 79

The !important property in CSS means that all subsequent rules on an element are to be ignored, and the rule denoted by !important is to be applied. This rule overrides all previous styling rules -- the !important property increases its priority. The !important property is mentioned immediately before the semicolon: h1 { background-color: red !important; }

Answer 80

The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and heigh ``` .div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } ``` ``` .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; } ```

Both divs are the same size now!

Hooray!

Answer 81

``` body { background-image: url('w3css.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } ```

Answer 82

The content property is used with the ::before and ::after pseudo-elements, to insert generated content. a::after { content: " (" attr(href) ")"; } --- a::after { content: " (" attr(href) ")"; }

The content Property

The content property is used to insert generated content.

Look at our:

CSS Tutorial
CSS Reference

- - https: //www.w3schools.com/cssref/tryit.asp?filename=trycss_content

Answer 83

The pointer-events property defines whether or not an element reacts to pointer events. div.ex1 { pointer-events: none; } div.ex2 { pointer-events: auto; }

Answer 84

The cursor property specifies the mouse cursor to be displayed when pointing over an element. div { cursor:grab; }

Answer 85

span.alert-filter-link:hover { color: black; text-decoration: none; } applying style for span element that has alert-filter-link class and applying the style on mouse hover

Answer 86

In flexbox layout, the size of a cell (flex-item) is defined inside the flex-item itself, and in the grid layout, the size of a cell (grid-item) is defined inside the grid-container. ```

1

2

3

4

And we style this using flexbox like so: ``` ``` .row { margin: 20px auto; max-width: 300px; display: flex; } .row > div { border: 1px dashed gray; flex: 1 1 auto; /* Size of items defined inside items */ text-align: center; padding: 12px; } We defined the size of the cells inside the flex-item by setting flex: 1 1 auto;. The flex property is shorthand to set flex-grow, flex-shrink, and flex-basis properties in one statement; its default value is 0 1 auto. Notice the “row” div is the flex-container, and we don’t set the size of the items there. We set the size inside the flex-item. ``` When previewed in a browser we get a row of boxes, as you would expect: screencap-1 Now let’s see how we can generate the same output using grid: ``` .row { margin: 20px auto; max-width: 300px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; /* Size of items defined inside container */ } .row div { border: 1px dashed gray; text-align: center; padding: 12px; } Above code will give us exactly the same output. ``` Notice, now we are defining the cell’s size using grid-template-columns inside the grid-container (.row), not the grid-item. This is an important difference. It shows that the flexbox layout is calculated after its content is loaded whereas the grid layout is calculated regardless of the content inside it. So, if possible, avoid using flexbox to build the overall layout of your website.

Answer 87

You can argue that a major difference between flexbox and grid is that in the latter we can create gutters between grid-items using grid-column-gap, like so: screencap-2 In order to achieve the same result in flexbox we would have to use padding and nested containers, or increase the width of the flex-container and use the justify-content property to spread the flex-items. We have to take a circuitous route in flexbox because it doesn’t have a gap property. However, it is on the way; the CSS Box Alignment Module 3 contains CSS features relating to alignment of boxes in all layout modes: block layout, table layout, flex layout, and grid layout. The Box Alignment module collects properties from flexbox, grid, and multi-column which can be used consistently across all the layout models. Eventually we’ll be able to add gaps with row-gap and column-gap properties, but not yet.

Answer 88

We’ve been arranging elements as rows and columns on the web since we used tables for layout. Both flexbox and grid are based on this concept. Flexbox is best for arranging elements in either a single row, or a single column. Grid is best for arranging elements in multiple rows and columns. In other words, Flexbox is one dimensional, and Grid is two dimensional. Let’s look at a commonly used one dimensional layout – the social share buttons: All the elements are in a single row. We can implement this using Flexbox like this: ``` .social-icons { display: flex; list-style: none; justify-content: space-around; } The justify-content property determines how the extra space of the flex-container is distributed to the flex-items. The space-around value distributes the space in such a way that the flex-items get placed evenly with equal amount of space around them. ``` Next, let’s take a look at a commonly used 2-dimensional layout: We can’t implement this layout with a single row or a single column, we need multiple rows and columns to do that, and that’s where we use CSS Grids. Let’s make it using CSS Grid: ```

Header Main Aside Footer

and the CSS: ``` ``` .container { max-width: 800px; margin: 2em auto; display: grid; grid-template-columns: 3fr 1fr; grid-template-rows: repeat(3,auto); grid-gap: 1rem; } ``` .container header { grid-area: 1/1/2/3; } .container main { grid-area: 2/1/3/2; } .container aside { grid-area: 2/2/3/3; } .container footer { grid-area: 3/1/4/3; } ``` .container > * { background-color: #ddd; padding: 1rem; } We are creating two columns using the grid-template-columns property, and three rows using grid-template-rows property. The repeat() function creates 3 rows with auto height. ``` Then, inside the grid-items (header, main, aside, and footer) we define how much area those grid-items will cover using the grid-area property.

Answer 89

When the total width of items inside the container is greater than the width of the container, in that case both the layout models have the option to wrap the items to a new row. However, the way both handle wrapping is different. Let’s look at that difference by building an sample layout. Create two rows and place 6 divs inside each row: ```

Flexbox

1 2 3 4 5 6 7 8 9 0

2

3

4

5

6

``` ```

Grid

1 2 3 4 5 6 7 8 9 0

2

3

4

5

6

Now, we will use Flexbox to layout the first row and Grid for second: ``` ``` /* Flexbox row styles */ .row-flex { margin: 40px auto; max-width: 600px; display: flex; flex-wrap: wrap; } .row-flex div { border: 1px dashed gray; flex: 1 1 100px; text-align: center; padding: 12px; } /* Grid row styles */ .row-grid { margin: 40px auto; max-width: 600px; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .row-grid div { border: 1px dashed gray; text-align: center; padding: 12px; } For the first row, we are using flex: 1 1 100px to give the flex-items a base width of 100px and allow it to grow and shrink. ``` We are also enabling wrapping of flex-items inside the flex-container by setting the flex-wrap property to wrap, its default value is nowrap. For the second row, we are using the grid-template-columns property to create columns with minimum width 100px set by the minmax() function. We are using repeat() function to create columns repeatedly. You can see the beauty of Grid and Flexbox lies in the ability to stretch and squeeze the items based on the amount of space available. Flexbox achieves this using flex-grow and flex-shrink properties, and Grid achieves this using a combination of minmax and auto-fill functions inside the grid-template-columns property. However, look carefully at the cell 5 and cell 6 as they are pushed down. In the case of Flexbox, the cell 5 and 6 are not the same size as other cells when pushed down. While in case of Grid, they retain the same size as all other cells in the grid. This happens because when a flex-item is wrapped and pushed in a new row, the Flexbox layout algorithm treats it as a part of a different flex-container. Hence the pushed item loses its context. This behavior could be used in some use cases, for example, an email subscriber form: Let’s build this subscriber form:

and give it some styles in our CSS: ``` .subscriber-form-container { max-width: 650px; margin: 40px auto; border: 1px dashed gray; box-sizing: border-box; } .subscriber-form-container form { display: flex; flex-wrap: wrap; } .subscriber-form-container form input { margin: 6px; padding: 0.4rem; box-sizing: border-box; } .subscriber-form-container form input{ flex: 1 1 150px; } .subscriber-form-container form input[type="email"] { flex: 2 1 300px; } The flex property is the shorthand for three properties: flex-grow, flex-shrink, and flex-basis. We want the width of the “email” field to be double the width of other two input elements, and we achieve this by using its “flex-grow” and “flex-basis”. ``` The “flex-grow” property of input elements is set to “1”, but that of email input element is set to 2. So, when there is extra space available, the email input element will grow twice compared to other input elements. Flexbox outperforms Grid in this use case. Yes, you could use some hack to get CSS Grid replicate this behavior using minmax() function, but Flexbox is well-suited for this kind of single dimensional layouts. However, if you want a multi-dimensional layout with the wrapped elements maintaining their widths, for example, an image gallery, then Grid is the best choice: One more thing, did you notice we are not using any media queries here. That’s because Flexbox and Grid layouts are built on concept of responsiveness and hence reduce the use of Media Queries.