HTML Styles - CSS (w3schools.com)
How do you seperate multiple styles within an elemnt?
Multiple styles are separated with semicolon.
What are the 3 ways styling can be added to HTML elements?
1. Inline - using a style attribute in HTML elements 2. Internal - using a <style> element in the HTML <head> section 3. External - using one or more external CSS files
What is a common way to layout responsive websites and menus?
By using a combination of <div> tags and margin adjustments for the placement of the div sections
What does CSS stand for?
CSS stands for Cascading Style Sheets
What are the benefits of external style sheets?
External style sheet are ideal when the style is applied to many pages. With external style sheets, you can change the look of an entire web site by changing one file.
In which section of an HTML should external style sheets be defined?
External styles are defined in an external CSS file, and then linked to in the <head> section of an HTML page:
What is inline styling and where is it useful?
Inline styling uses the style attribute and is useful for applying a unique style to a single HTML element
Where and how would you define internal styling that would affect the entire HTML document?
Internal styling is defined in the <head> section of an HTML page, using a <style> element
What does the CSS margin property define?
It defines a margin (space) outside the border:
What is a class attribute?
It defines a style for a special type (class) of elements.
What is the syntax and purpose for adding -moz and -WebKit to style attributes?
It insures that the style attributes are read in Mozilla and WebKit based browsers.
What is the most common way to add styling?
Keep the styles in separate CSS files.
Under the <head> tag and within the <meta> tag what attributes would you have to add to make a browser see your page as responsive?
Name="viewport", content="width=device-width, initial-scale=1.0">
What property defines a visible border around an HTML element?
The CSS border property ex: border:1px solid black
What does the padding property do?
The CSS padding property defines a padding (space) inside the border
Which attribute is better for addressing multiple elements?
The class attribute
Which attribute is better for addressing a single element?
The id attribute
How would you define a style for multiple kinds of elements?
add a class attribute to the element, then define a different style for all elements with the specified class.
What is the syntax used for CSS styling?
element { property:value; property:value }
How would you define a special style for one special element?
first add an id attribute to the element, then define a different style for the (identified) element.
Give an example of a margin property being used.
p { border:1px solid black; padding:10px; margin:30px; }
Give an example of the padding property being used.
p { border:1px solid black; padding:10px; }
What style tags were used in older versions of HTML that no longer work in HTML5?
the <font>, <center>, and <strike> elements.
What attributes were used in older versions of HTML that no longer work in HTML5?
the color and bgcolor attributes.
What does the CSS font-size property define?
the font size to be used for the HTML element.
What does the CSS font-family property define?
the font to be used for the HTML element.
What does the CSS color property define?
the text color to be used for the HTML element
Give an example of an external style being defined.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Give an example of how you would add an id attribute to an element.
<!DOCTYPE html> <html> <head> <!-- 2.Then define a different style for the (identified) element --> <style> p#p01 { color: blue; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <!--1. first add an id attribute to the element:--> <p id="p01">I am different.</p> </body> </html>
Give an example of how you would define a class attribute.
<!DOCTYPE html> <html> <head> <!--Step 2. Define a different style for all elements with the specified class:--> <style> p.error { color:red; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <!--Step 1. add a class attribute to the element:--> <p class="error">I am different.</p> <p>This is a paragraph.</p> <p class="error">I am different too.</p> <p class="error"> WTF!!</p> </body> </html>
Give an example of internal styling being used to define a common style for all HTML elements on a page.
<!DOCTYPE html> <html> <head> <style> body {background-color:lightgrey} h1 {color:blue} p {color:green} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Give an example of an inline styling attribute being used in a header element.
<h1 style="color:blue">This is a Blue Heading</h1>
