CSS

Question 1

-&lt-link href=”location” type=”text/css” rel=”stylesheet” /-&gt-

Answer 1

The code for linking an external CSS page to the html page. The href gives the location, the type tells the page that it is a CSS format and should always be “text/css” and rel describes the relationship which will always be “stylesheet”.

Question 2

-&lt-style type=”text/css”-&gt- (CSS Code) -&lt-/style-&gt-

Answer 2

The code for putting an intern CSS stylesheet into an HTML document.

Question 3

p { color: rgb(100,100,100);} p { color: DarkCyan;} p { color: #ee3e80;}

Answer 3

The three different types of defining color. RGB, name, and hex.

Question 4

/* */

Answer 4

How to insert comments in CSS.

Question 5

p { color-background: #ee3e80;}

Answer 5

The attribute for defining the color background of an element.

Question 6

p.one { background-color: #e4e4e4; opacity: 0.5; } p.two { background-color: rgb(100,100,100, 0.5); }

Answer 6

The opacity attribute indicates the transparency of a color over a parent color. It can be defined by either using the opacity attribute, or you can use RGB and the fourth number will be the alpha number, or the number between 0.0 and 1.0 that gives the percentage of opacity.

Question 7

p.one {background-color: hsl (0, 0%, 78%);} p.two {background-color: hsla (48, 0%, 0%, 0.5)}

Answer 7

CSS3 provides a new way to identify color called hsl and hsla. The letters stand for Hue, Saturation, Lightness, and Alpha. Hue is the color number in a 360 degree wheel, Saturation is the amount of grey, Lightness is the amount of white and black, and Alpha is the opacity.

Question 8

p {font-family: Georgia, Times, serif;}

Answer 8

Font-family specifies the font to be used that is already loaded on the users computer. If the first listed font is not on file, then the browser will use the second, and if that is not on file, the browser will use the default for the font type identification at the end.

Question 9

p {font-size: 12px; } p {font-size: 100%;} p {font-size: 1.3em;}

Answer 9

The font-size sets the size of the font. Use px to define how many pixels the font is. The percentage sets the font size as the percentage of the default font size. If the default for a parent is 50% and the font size of the child is 50%, then the font displayed will be 25% of the default font. The em is used to set the size to the standard size of the letter M.

Question 10

@font-face { font-family: ‘Name’; src: url(‘location.ttp’);}

Answer 10

For fonts that are not loaded onto a browser, you can insert font-faces for the browser to download. Use the @font-face declaration. Font-family identifies the name of the font, and src gives the location of the font. Sometimes you need to convert font to different formats so that all browsers can use them. After defining the font, then you use the specified font-family in the rest of the CSS code.

Question 11

p { font-weight: bold;}

Answer 11

Allows you to bold text. You can also set it to normal.

Question 12

p { font-style: italic;}

Answer 12

Allows you to ad style to the text. There is italicized, normal, and oblique.

Question 13

p {text-transform: uppercase;}

Answer 13

Text-transform allows you to change how letters are capitalized. Uppercase makes every letter uppercase, lowercase makes every letter lowercase, and capitalize capitalizes the first letter every word.

Question 14

p {text-decoration: underline;}

Answer 14

The text-decoration attribute allows you to add decorations to the text such as underline, overline, line-through, and blink. Blink is frowned upon, and none is also another option.

Question 15

p {line-height: 1.5em;}

Answer 15

The line-height attribute sets the spacing of the vertical line. The line-height includes the size of the font and the leading space in between the font sizes. The height can be set in pixels, but it should be set in em so that the spacing relative to the height of the font. A good distance for reading is around 1.4 and 1.5 em.

Question 16

p {word-spacing: 1em; letter-spacing: 0.2em; }

Answer 16

You can adjust the word-spacing and the letter-spacing of text. The sizing should be done in em format.

Question 17

p {text-align: center;}

Answer 17

Text-align allows you to adjust the text alignment in the page. The four values are left, center, right, and justify.

Question 18

p {text-indent: 2-px; text-shadow: 1px 2px 3px #000000;}

Answer 18

Text-indent allows you to set the indent size of the first line in a paragraph. You can also use this for moving headlines off of the page so that they are not visible to the user but they are still included in the html code. The text shadow feature creates a shadow around words. The first value is the position to the left or right, the second value is the position up and down, the third value is the amount of blur and is optional, and the last value is the color of the shadow. This is not supported in IE, but in practically every other browser.

Question 19

p:first-letter {}

Answer 19

The :first-letter and :first-line code in css is a pseudo element that will only apply to the first letter or the first line of that text element.

Question 20

:link :visited :hover :active :focus

Answer 20

These pseudo elements allow you to change the way that elements look depending on their interaction. The :link element describes text that has a link. The :visited element describes links that have been visited. The :hover element describes elements that are being hovered over with a curser. The :active elements describes text that is being clicked on. The :focus element describes elements that are in focus. Are items are in focus when they are ready to be used. For example, when curser is inside a text box and ready for entry, the element is said to have focus. Use the a reference for describing links with this.

Question 21

p { max-width: #px; min-width: #px; max-height: #px; min-height: #px}

Answer 21

The max and min attributes can be used in CSS to tell the box what maximum and what minimum sizes it should be depending on the screen size of the browser. You can use em, px, or percentages to set the sizes. By default the box will be set to fit the contents within.

Question 22

div { overflow: hidden; } div {overflow: scroll; }

Answer 22

The overflow attribute tells the browser what to do with content that does not fit in the box. The hidden attribute hides the information that does not fit in the box. The scroll attribute allows the user to scroll to see the rest of the content.

Question 23

p {border-width: thin; }

Answer 23

The border-width attribute specifies the width of the border. You can use values such as thick, thin, and medium. You can also specify in terms of px. You can also get specific and create border widths such as border-top-width, border-right-width, border-bottom-width, and border-left-width.

Question 24

p {border-style: solid;}

Answer 24

The border-style attribute identifies the style of the border. The following styles in CSS are dotted, dashed, double, groove, ridge, inset, outset, hidden/none. And you can apply different styles to different sides.

Question 25

p {border-color: #000000; }

Answer 25

The border color attribute sets the color of the border. You can specify the side of the border, or you can use a shorthand. The shorthand version includes 4 colors and they are applied clockwise starting at the top.

Question 26

p {border: 3px solid #ffffff; }

Answer 26

The border short-hand can be used to specify the width, style, and the color of the border.

Question 27

p { padding: #px:}

Answer 27

The padding attribute specifies the distance between the content and the border of the container. You can specify for each side and also use the shorthand used with color.

Question 28

p {margin: #px; }

Answer 28

The margin identifies the distance between the border and other elements on the page. It can be identified using px, em, or percentages. The short-hand with the border-color works with the margin as well. You can use auto on each side for the margin to center the object.

Question 29

p {display: inline; }

Answer 29

The display attribute tells the items how to act. Inline makes block elements act like inline, and block makes inline elements act like block. The inline-block attribute makes elements flow like inline but have block-like features. You can also use none which will make the element invisible to the user, but they can see it if they look at the source code.

Question 30

p { visibility: hidden; }

Answer 30

The visibility attribute allows you to mark elements as hidden so that the content will not be shown to the user, but a blank box will appear. If you want the element to be gone, then you should use the none value for the display attribute.

Question 31

div { border-image: url(“url”) 11 11 11 11 stretch; }

Answer 31

The border-image CSS code takes and image and divides it up into 9 pieces. The first url attribute gives the location of the image. The second value declares where to slice the image, and the third attribute tells what to do with the image: repeat, round, and stretch.

Question 32

div {box-shadow: 10px 10px 10px 10px #000000; }

Answer 32

The box-shadow attribute works much like the text shadow attribute. It uses four values: Horizontal offset, Vertical offset, Blur Distance, Spread of Shadow (optional), and Color. You can also use inset at the beginning of the code to make the shadow on the inside.

Question 33

div {border-radius: 10 px; }

Answer 33

This gives rounded corners to the box in a size. You can use px or em. You can specify each corner such as border-top-right-radius. You can also specify different widths such as horizontal and vertical such as border-radius 50 px 30 px. You can also use short hand where you list the four horizontal radius sizes followed by a / and then the four vertical widths.

Question 34

ul { list-style-type: disc; }

Answer 34

The list-style-type attribute defines the type of indicators in an ordered and unordered list. The types for an unordered list are none, disc, circle, and square. The types for ordered list are decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, and upper-roman.

Question 35

ol { list-style-image: url(“URL”); }

Answer 35

The list-style-image attribute uses a reloaded image as a marker for a list. You just supply the url to the location of the image.

Question 36

ol { list-style-positioning: inside; }

Answer 36

The list-style-positioning attribute indicates that the marker either go inside or outside of the text. The proper attributes are inside and outside.

Question 37

ol {list-style: inside disc; }

Answer 37

The list-style can be used as a shorthand where you indicate the positioning and the style of the marker in that order.

Question 38

table { width: 500px; }

Answer 38

Tables inherit all of the same properties that apply to text and to boxes such as text-transform, height, width, text-size, text-align, color, background-color, border, and :hover.

Question 39

table { empty-cell: hide; }

Answer 39

The empty-cell attribute tells the browser what to do with cells that have no information (whether to show the borders or not). The options are hide, show, or inherit, meaning that the table would inherit the format of the element that it is nested in.

Question 40

table { border-spacing: 1px; border-collapse: collapse; }

Answer 40

The Border-spacing attribute sets the distance between each cell border in a table. The collapse attribute decides if the cells follow the spacing and empty-cell rules. The collapse value ignores spacing and empty-cell rules, while separate follows spacing rules.

Question 41

input: focus , input:hover { border: 1px solid #b1e1e4; }

Answer 41

The same text and box attributes can be applied to form inputs and buttons. You can do different formatting when inputs have focus. These same attributes can be used when changing field sets and legends.

Question 42

p {cursor: move; }

Answer 42

The cursor attribute specifies the type of cursor that will be seen on the page. The type are auto, crosshair, default, move, text, help, wait, and url(“cursor.gif”).

Question 43

p {position: static; }

Answer 43

The static property sets elements to act as a block element. It is the default setting in CSS.

Question 44

p {position: relative; top: 10px; left: 30px; }

Answer 44

The relative property specifies where the element will appear in relation to where it would appear normally. This setting will set the element 30px from the left and 10px from the top.

Question 45

p {position: absolute; top: 0px; right: 0px; }

Answer 45

The absolute positioning sets the element in position based on its containing element. The other elements act as if it is not even there. This setting set the element at the top right of the page.

Question 46

p {position: fixed; top: 0px; }

Answer 46

The fixed position sets the element relative to the browser window. All other elements will ignore this element and most likely this element will appear on top. This setting sets the element at the top of the browser window, and as the user scrolls down, the element will stay at the top of the browser window.

Question 47

p {z-index: 10; }

Answer 47

When using fixed or relative positioning, the elements will appear on top if they appear first in the html code. To change this you can use the z-index. The z-index sets elements in an order. An element with a higher z-index will appear first, elements with a lower z-index will appear under.

Question 48

p { float: left; }

Answer 48

The float property allows you to set the element as far left or right as possible in a container. All other elements will flow around the element. It is important to include the width of the floated element or the browser will treat the element as a block element.

Question 49

p { clear: left; }

Answer 49

The clear attribute will clear the float function to maintain continuity. The values are left, right, both, and none. The rule is that a clear left attribute will not allow the left side of the box to touch any element of the appearing in the same containing element.

Question 50

div { border: 1px solid #000000; overflow: auto; width: 100%; }

Answer 50

Sometimes when all of the child elements are floated, the parent element will assume the size of 0px. To fixe this problem, set overflow to auto, so that the text appears in the parent container, and then set the width to 100% so that the container appears around the elements.

Question 51

/* Design Note */

Answer 51

Web designers usually try to design the page to be 960 - 1000px, allotting 570 - 600px above the fold.

Question 52

transition: width 2s;

Answer 52

The transition property controls how a property changes. It specifies the property, duration of transition, transition timing function, and timing delay. Needs webkit for Safari.

Question 53

transform: rotate (7deg);

Answer 53

This property changes objects by allowing you to rotate, scale, move, skew, and perform other functions to elements. Needs webkit and ms for EI, Safari, and Chrome.

Question 54

background: linear-gradient(red, blue);

Answer 54

The syntax for gradient colors. Defines the two colors that are used. There are also radial gradients and repeat options. A webkit is needed for all browsers except Chrome. There are several different options for using the gradient.

Question 55

@import url(“location.css”);

Answer 55

Put this at the beginning of a CSS file to import other CSS files. You can either do this, or you can link several CSS pages in your HTML code.

Question 56

@-viewport { width: 320px; zoom: 1.0; }

Answer 56

The syntax for using viewport property in CSS. This makes the pages adjust for mobile devices. The width sets the size of the screen while the zoom sets the zoom of the screen.

Question 57

p {background-image: url (“location.jpg”); }

Answer 57

The code for setting a background image for an element.

Question 58

p {background-repeat: repeat ; }

Answer 58

Background repeat sets the repeat nature of the image. The values are repeat, repeat-x, repeat-y, no-repeat.

Question 59

p {background-attachment: fixed; }

Answer 59

The background-attachment sets where the image is positioned as the page scrolls. The scroll setting with allow the image to scroll up and down while the fixed setting will keep the image fixed relative to the browser.

Question 60

p {background-position: center center; }

Answer 60

The background position attribute sets the position of the image. The first value sets the vertical position and the second value sets the horizontal position.

Question 61

p {background-size: length|percentage|cover|contain; }

Answer 61

The background-size attribute sets the size of the image. Length and percentage set fixed size values. Cover makes the image cover the entire element. Contain makes the image as large as it can by still keeping the length and width inside of the image.