Coding Exam
How do you select an element with id "demo"?
#demo
How do you select elements with class name "test"?
.test
How do you insert a comment in a CSS file?
/* this is a comment */
In a CSS rule, we should not start the name of an id selector with a number because it will not work in ____.
Mozilla/Firefox
Which is the correct CSS syntax?
body {color: black;}
In the CSS rule shown in the following line, the part "12px" is known as a ____.
value
What is the correct HTML for referring to an external style sheet?
<link rel="stylesheet" type="text/css" href="mystyle.css">
Which HTML tag is used to define an internal style sheet?
<style>
Inline Styles
An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. The example below shows how to change the color and the left margin of a <h1> element: Ex: <h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Which property is used to change the font of an element?
Both font-family and font can be used
CSS Backgrounds 1
CSS background properties: background-color background-image background-repeat background-attachment background-position
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element: margin-top margin-right margin-bottom margin-left Tip: Negative values are allowed. The following example sets different margins for all four sides of a <p> element: p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; }
What does CSS stand for?
Cascading Style Sheets
Margin - Shorthand Property
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 THEN: p { margin: 25px 50px 75px 100px; } JUST REMEMBER MARGIN RUNS CLOCKWISE
Where in an HTML document is the correct place to refer to an external style sheet?
In the <head> section
Padding
Is the same as the margin in regards to formatting CLOCKWISE
When using the padding property; are you allowed to use negative values?
No
CSS Backgrounds 2
The CSS background properties are used to define the background effects for elements.
Which property is used to change the background color?
background-color
Which of the following is the correct code for declaring a background color of an HTML page, using CSS?
body {background-color:#b0c4de;}
How do you display a border like this: The top border = 10 pixels The bottom border = 5 pixels The left border = 20 pixels The right border = 1pixel
border-width:10px 5px 20px 1px;
Which CSS property is used to change the text color of an element?
color
How do you selet all p elements iside a div element?
div p
Which CSS property controls the text size?
font-size
How do you make the text bold?
font-weight:bold;
All CSS Font Properties
font: Sets all the font properties in one declaration font-family: Specifies the font family for text font-size: Specifies the font size of text font-style: Specifies the font style for text font-variant: Specifies whether or not a text should be displayed in a small-caps font font-weight: Specifies the weight of a font
Text Decoration 2
h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; }
How do you add a background color for all <h1> elements?
h1 {background-color:#FFFFFF;}
How do you make a list that lists its items with squares?
list-style-type: square;
Which property is used to change the left margin of an element?
margin-left
What is the correct CSS syntax for making all the <p> elements bold?
p {font-weight:bold;}
What is the default value of the position property?
static
Which HTML attribute is used to define inline styles?
style
How do you make each word in a text start with a capital letter?
text-transform:capitalize
The CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model: (look at w3 Schools site I'm not paying to paste a pic on here) Explanation of the different parts: 1) Content - The content of the box, where text and images appear 2) Padding - Clears an area around the content. The padding is transparent 3) Border - A border that goes around the padding and content 4) Margin - Clears an area outside the border. The margin is transparent The box model allows us to add a border around elements, and to define space between elements. div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the <head> section of an HTML page: Ex: <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head>
Three Ways to Insert CSS
External style sheet Internal style sheet Inline style
The class selector - Multiple classes
HTML elements can also refer to more than one class. In the example below, the <p> element will be styled according to class="center" and to class="large": Ex: <p class="center large">This paragraph refers to two classes.</p>
CSS Box Model - Width and Height of an Element
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins. Assume we want to style a <div> element to have a total width of 350px: div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; }
How do you group sectors?
Separate each selector with a comma
CSS Font Families
Serif fonts have small lines at the ends on some characters "Sans" means without - these fonts do not have the lines at the ends of characters All monospace characters have the same width (for more info check out w3 schools under CSS fonts)
CSS Margins
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).
Padding and Element Width
The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model). So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result. In the following example, the <div> element is given a width of 300px. However, the actual rendered width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding): div { width: 300px; padding: 25px; } BUT: To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease. Here is an example: div { width: 300px; padding: 25px; box-sizing: border-box; }
Background Image
The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. The background image for a page can be set like this: body { background-image: url("paper.gif"); }
The class Selector
The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. In the example below, all HTML elements with class="center" will be red and center-aligned: Ex: .center { text-align: center; color: red; }
Text Color
The color property is used to set the color of the text. The color is specified by: 1) a color name - like "red" 2) a HEX value - like "#ff0000" 3) an RGB value - like "rgb(255,0,0)"
The element Selector
The element selector selects elements based on the element name. You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color): Ex: p { text-align: center; color: red; }
Font Family
The font family of a text is set with the font-family property. The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman". More than one font family is specified in a comma-separated list: p { font-family: "Times New Roman", Times, serif; }
Font Style
The font-style property is mostly used to specify italic text. This property has three values: 1) normal - The text is shown normally 2) italic - The text is shown in italics 3) oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Links
The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked Ex: /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }
The ID Selector
The id selector uses the id attribute of an HTML element to select a specific element. The id of an element should be unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element. Ex: #para1 { text-align: center; color: red; }
Text Decoration 1
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; }
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text: p { text-indent: 50px; }
Text Transformation
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; }
Cascading Order
What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority: 1) Inline style (inside an HTML element) 2) External and internal style sheets (in the head section) 3) Browser default So, an inline style (inside a specific HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or a browser default value.
Text-align : Justify
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): Ex: div { text-align: justify; }
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one file! Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section: Ex: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
The class Selector - Specific Elements
You can also specify that only specific HTML elements should be affected by a class. In the example below, only <p> elements with class="center" will be center-aligned: Ex: p.center { text-align: center; color: red; }
How do you display hyperlinks without an underline?
a {text-decoration:none;}