Section 1
Preview this deck
CLASS Selector
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
0
All-time users
0
Favorites
0
Last updated
6 years ago
Date created
Mar 1, 2020
Cards (56)
Section 1
(50 cards)
CLASS Selector
.className - an element can have multiple classes utilizing spaces between each name. (class="important sea student" )
The box model
every HTML element can be thought of as a box. every element can therefore be given a width and height to change the size Every box has three properties counting from the outside in: margin border padding <The innermost property is technically CONTENT>
Float positioning
The element has been removed from the flow of the document but other elements will still respond to that elements height and width. i.e. other elements float around it. If we don't want elements to float around we can give it the clear property. clear: left; clear: right; clear: both;
DISPLAY VS. VISIBILITY Display
We can change the display of an element using the display property. - inline = causes a block element to act like an inline element - block = causes an inline element to act like a block element - inline-block = causes a block level element to flow like an inline element while it keeps the features of a block level element. - none = this hides an element and the document displays as if it is not there (it will not occupy any space)
Inheritance
HTML elements can inherit the styles from their parent element. i.e. div{ font-size: 32px; } says that everything inside the div should have a 32px font size unless there is a more specific style rule that says otherwise. an h1 element within the div would not be effected because the browser holds a more specific rule.
CSS
Cascading Style Sheets. It's a standard used to specify how HTML documents should be represented CSS creates rules for HTML elements that control how an HTML element should be presented.
PSEUDO-CLASS examples
:link - applied to all href attribute elements. :visited - applied to all links pointing to a page/resource that has been visited. :hover - when the mouse hovers over something :activate - when the element is active. e.g. when the user has clicked but not released.
Specifying colors
- RGB(A) values color: rgb(255, 0, 0) (red, green, blue) - HEX codes color: #FF0000 (red) - color names color: red; - HSL colors - HSLA colors
Single selector precedence
Highest to lowest: - id's - Classes, attributes selectors and pseudo-classes - elements and pseudo-elements - To compare the specificity of two combined selectors, compare the number of occurrences of single selectors of each of the specificity groups above.
Declaring CSS for HTML
There are 3 ways to declare CSS *Inline CSS - NOT RECOMMENDED *CSS declared in the <head> section of the document - better than inline but not ideal. *External CSS - BEST option - Completely separates the HTML from the CSS
margin
Specifies the space an element and whatever is around it. px, % or em. can be specified for either all sides or just one. margin: AllAtOnce%; margin-left: JustLeft% margin-top: JustTop% etc. shorthand: margin: top%, right%, bottom%, left margin: top&bottom%, left&right% if two margins collide the greater margin will be used.
background-position
Specifies the position. default: top left corner of the HTML element. usually takes two values seperated by a space. background-position: left top/center/bottom right top/center/bottom center top/center/bottom if only one value is specified the latter value will be center by default.
border-color property
changes the border color border-(direction)-color: red; can be used to change only one side of the box-border
Fixed position
The element is taken out of the flow of the document. the element is taken out of the stacking of boxed elements and placed in front. see photo. When scrolling the box will stay in the same space on the screen. the position is relative to the viewport. example: navigation bars.
Positioning
- static = default - fixed - absolute - relative - float should use properties top, bottom, left and right
Centering
Elements can be centered by setting left and right margin to auto. The element MUST have a width.
Background property
used to give the background of an HTML element some effect. - background-color - background-image - background-repeat = states how the background should be repeated. - background attachment = states whether you want the position of the background to be in a fixed position or a position relative to the HTML document.
CSS rules
A rule contains two components: a selector and a declaration.
ID Selector
#idName { ... } (this should only apply to a single element)
PSEUDO-CLASS Selector
style is only applied under certain circumstances E.g. when the user hovers the mouse over an element the element goes into a "hover" state. The state can be modified using the pseudo-class selector a:hover { color: green; font-size: 1cm; } The syntax is a : (colon) symbol.
Background-repeat
To change repetition: background-repeat: no-repeat; repeat-x or repeat-y.
TYPE selector
It's declared by using the tag name of the targeted element. multiple elements can be chosen with a comma between them h1, h3, p { ... }
text-transform property
Used to manipulate text to appear uppercase or lowercase regardless of what the original markup was. - capitalize (first letter of every word to upper) - uppercase (all letters to upper) - lowercase (all letters to lower)
text-align property
Used to position text within it's container. commonly used values: - left - right - center - justify (stretches the text so that every line has the same width.
Background-image
syntax: background-image: url("../images/adventure-time.jpg"); a relative path url to the image to be used by default it will be repeated over the x and y axis.
PSEUDO-ELEMENT Selector
It's used to style specific parts of an HTML element. e.g. - style only the first letter - style the first line - insert content before or after the content of an element. p::first-letter { ... } = first letter turns red or something. The syntax is two :: (colon) symbols.
CSS Selectors
The selector indicates which HTML element the rule applies to. - The type selector - The class selector - The id selector - The universal selector - The child selector - The descendant selector - The attribute selector - The Pseudo-class selector - The Pseudo-element selector
Relative positioning
the elements original position remains in the flow of the document top, bottom, left and right will work to position the element within a container
UNIVERSAL Selector
* {...} applies the set of rules to all HTML elements within an HTML document.
Style rule precedence
The rules are applied in this order: 1. Inline styles take precedence over every other rule. 2. A more specific rule gets applied over a less specific one 3. If two rules have the same specifier the latter takes precedence. / If there are two separate style sheets the latter link will take precedence. 4. A CSS rule with !important ALWAYS takes precedence
Background shorthand
text-decoration property
used to style text further commonly used values: - none = default - underline - overline - line-through
CHILD Selector
div > p { ... } - selects all X elements which are DIRECT children of another element.
Referencing external CSS
a <link/> tag is used within the head element to reference the style sheet.
Fonts & font properties
two types of font family names: - generic family - a group of simila fonts - font family - a specific font family ("Times New Roman" or "Arial") font properties: - font family - font-style (normal(default) italic, oblique) - font-weight (normal(default), Bold, numeric value between 100-700 or lighter/bolder. - font-size (pixels px, percentages % or Ems em. Always set several font-families in case the browser doesn't support the one you want.
DESCENDANT Selector
li a {...} every a that is a child of li is affected.
border-style property
- solid - dotted - dashed - double - groove - ridge - inset - outset border-(direction)-style: groove; can be used to change only one side of the box-border
Selector
The selector indicates which HTML element the rule applies to.
Declaration
The declaration indicates how the element should be styled. - it's split into two parts, a property and a value.
ATTRIBUTE Selector
uses [ ] brackets. Can be used to select certain elements that have : = a given attribute [title] { ... } = a given attribute with a value [title=first] { ... } = target a specific HTML tag which contains a given attribute div[title] { ... }
border-radius
A property that affects an element's corners. 1 value = affects all corners 2 values = - top-left&bottom-right - top-right&bottom-right 4 values = - top-left - top-right - bottom-right - bottom-left
Background-attachment
states whether the image flows with the document or is a fixed position. the default value is scroll which means it will scroll with the page.
CSS List properties
- list-style-type - used to control in detail the appearance of the dot/bullet in front of each line item. (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha and none) - list-style-image: url("image.png") - list-style-position : inside, outside - list-style (shorthand for all of the above) to get lists to appear horizontally we use: display: inline;
Pro's of External CSS
- the style can be reused between documents. - faster download for users because browsers store previously fetched CSS styles in the their cache memory.
DISPLAY VS. VISIBILITY Visibility
It's similar to the display property but it leaves an empty space where the element is. Either: visible or hidden
Absolute position
Similar to fixed but will not scroll. i.e. other elements will behave as if it isn't there.
Text control properties
Two types: - The properties that affect the font and it's appearance *font, typeface, size, etc.) - The properties that affect the text no matter what font you are using (text color, space between words and letters)
Inline CSS
CSS commands are put inline with the HTML using attributes of each element. Not recommended.
Padding
specifies the space between the element's content and it's border. %, px or em. can be specified for either all sides or just one. padding: AllAtOnce%; padding-left: JustLeft% padding-top: JustTop% etc. shorthand: padding: top%, right%, bottom%, left padding: top&bottom%, left&right%
Website style precedance
Comes from three sources - the browser - default style (user agent style sheet) - is used if no other style sheet is available - the user - person who's viewing the webpage. (change font size or colors.) - the author - Inline CSS or external style sheet. precedance: author - user - browser. The user's style sheet will only take precedence if a CSS rule in the style sheet as the keyword !important.
Section 2
(6 cards)