CSS
CSS ID Rule
A CSS ID rule is a style exception like the class rule, but it can be used only once in a web page. It is preceded by a hash tag (#). EX: see image:
3 different ways CSS can be applied
1. Using the style attribute (inline styling). 2. Using the style element (internal). 3. Using Cascading style sheets (external - using a separate .css file)
Width and Height (CSS Box Model)
Set the width and height of the element.
text-decoration (CSS Text Property)
Sets or removes decorations from text. Values: none, overline, line-through, underline Combine with values: dashed, dotted, double, solid.
font-family (CSS Font Property)
Sets the font for an element. - Can hold several font names as a "fallback" system for when the browser cannot render the first font.
font-style (CSS Font Property)
Sets the font-style of text. Values: normal (default), oblique, italic.
list-style shorthand (CSS List Property)
Specifies all the list properties in one declaration.
list-style-image (CSS List Property)
Specifies an image as the list-item marker in a list.
text-justify (CSS Text Effect Property)
Specifies how justified text should be aligned and spaced when text-align is set to justify. Values: auto (default), inter-word (space between words), inter-character (space between characters), none.
text-overflow (CSS Text Effect Property)
Specifies how overflowed content that is not displayed should be signalled to the user. Values: clip (default), ellipsis.
text-align (CSS Text Effect Property)
Specifies how to align text. Values: center, left, right, justify.
word-break (CSS Text Effect Property)
Specifies how words should break when reaching the end of a line. Values: normal (default), break-all, keep-all, break-word.
word-spacing (CSS Text Property)
Specifies space between words.
vertical align (CSS Text Property)
vertical-align Sets the vertical alignment of an element.
Class Rule
- A CSS class rule is a style that can be used as an exception or addition to a stated rule. It can be used many times within a web page. - The definition of a class is the same as a standard rule, but the selector is preceded by a period (.). - To apply the class to an element, you include a class attribute in your HTML element. EX: see image:
Hexadecimal Values (CSS Color)
- A hexadecimal color is specified with: #RRGGBB. - RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color. - Shades of grey are often defined using equal values for all the 3 light sources: Example: div style="background-color:#ff0000">Red div style="background-color:#ffff00">Yellow
CSS Box Model Summary
- All HTML elements can be considered as boxes. - The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content.
RGB value (CSS Color)
- An RGB color value is specified with: rgb( RED , GREEN , BLUE ). The intensity of each parameter is an integer between 0 and 255. Example: div style="background-color:rgb(255,0,0)">Red h1 style="color:rgb(255,255,0)">Yellow
RGBA value (CSS Color)
- An extension of RGB, A adds an alpha value to the color, specifying opacity. - The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all). div style="background-color:rgba(0,255,0,0.6)">Green with 0.6 opacity - rgba(0,255,0,0.6)
CSS Colors can be applied to the following properties
- Background Color: Set the background color for HTML elements - Text Color: Set the color of text - Border Color: Set the border color
HSL values (CSS3) (CSS Color)
- HSL stands for hue, saturation, and lightness - HSL color values are specified with: hsl(hue, saturation, lightness) - Hue: A degree on the color wheel from 0 to 360. 0=red, 120=green, 240=blue. - Saturation: A percentage value; 0%=a shade of grey and 100%=the full color. - Lightness is also a percentage; 0% is black, 100% is white. Example: div style="background-color:hsl(0, 100%, 50%)">Red div style="background-color:hsl(60, 100%, 50%)">Yellow
Style Attribute
- The style attribute of a specific element is defined. This is referred to as an inline style. - Can be used on any HTML element. - The style attribute will override any style set globally, e.g. styles specified in the style element or in an external style sheet EX: see image:
CSS Order of Precedence
- Where the rules are located is one factor in the order of precedence. The location order of precedence is: 4. Browser style sheet default rules - Lowest priority 3. External style sheet rules - Higher than Browser default rules 2. Style elements embedded in the page header - Higher than external style sheet rules 1. Inline style rules - Highest priority - Specific rules take precedence over more general rules: 3. Any rule on a tag (or element) is the least specific and takes the lower priority 2. A class rule is more specific and overrides the tag rule. 1. Since an ID rule can be used only once in a web page, it is the most specific, overriding the other two. - The rules toward the end of a style sheet take precedence over the style rules in the front: • Rules that are defined later in the document tree have higher precedence than those defined earlier. • Rules from an imported style sheet are considered before rules directly in the style sheet.
CSS Style Rules
- a statement that defines the style of one or more elements in your web page. - CSS rule consists of a selector and declaration and holds for all instances of an element. - You can create a CSS class that provides an exception to a stated rule. - You can also create a CSS ID, which is an exception that applies to only one element, one time in a page.
CSS
- describes how HTML elements will be displayed. - CSS enables you to separate the layout of a Web page from its content. - This separation makes it easier to update the look and feel of your Web site - Visual Studio includes tools to build and preview your style sheets.
text-shadow (CSS Text Property)
Adds shadows to your text - specify horizontal and vertical shadows. You can also specify a shadow color and blur effect
Color Name (CSS Color)
All modern browsers support 140 color names. Example: h1 {color: firebrick;} .div1 {background-color: brown;}
word-wrap (CSS Text Effect Property)
Allows long words to be broken and wrapped onto the next line. Values: - normal (default) - break words only at allowed break points. - break-word - allows unbreakable words to be broken
Background (CSS Box Model)
CSS background properties are used to define the background effects for elements. - background-color: specifies the background color of an element - background-image: specifies an image to use as element background.
CSS Gradient
CSS gradients let you display smooth transitions between two or more specified colors. CSS defines two types of gradients: - Linear Gradients (goes down/up/left/right/diagonally) - Radial Gradients (defined by their center)
CSS Units
CSS has several different units for expressing a length - Many CSS properties take "length" values, such as width, margin, padding, font-size, etc. - Length is a number followed by a length unit, such as 10px, 2em, etc. - A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted - For some CSS properties, negative lengths are allowed.
CSS Lists
CSS list properties allow you to: - Set different list item markers for ordered lists - Set different list item markers for unordered lists - Set an image as the list item marker - Add background colors to lists and list items
CSS align (CSS Layout Property)
Center align elements: Use margin:auto and specify width as a percentage. Center an image: Set left and right margin to auto and make it into a block element. Use position to left-and right align: Use position:absolute with padding. Use float to left-and right align: Clearfix: Place an image with text inside an element, without the image moving outside the element by using overflow: auto Center vertically using padding. Center vertically using line-height: use the line-height property with a value that is equal to the height property. Center vertically using flexbox:
Padding (CSS Box Model)
Clears an area around the content, inside the border of the box. - All the padding properties can have the following values: - length - specifies a padding in px, pt, cm, etc. - % - specifies a padding in % of the width of the containing element - inherit - specifies that the padding should be inherited from the parent element
Margin (CSS Box Model)
Creates space around elements, outside of defined borders. The margin is transparent. Margin properties can have the following values: - Auto: The browser horizontally centers the element within its container. - Length: Specifies a margin in px, pt, cm, etc. - %: Specifies a margin in % of the width of the containing element - Inherit: Specifies the margin should be inherited from the parent element. Ex: See Image
Element Rule (Simple Rule)
Defines styles to elements of all web pages using the stylesheet, including the of your pages and HTML tags such as h1, p and div EX: see image:
HWB Values (CSS Color)
HWB (Hue, Whiteness, Blackness) is a suggested standard for CSS4 but is not supported in HTML yet.
CSS links
Links can be styled with different styling properties like color, font-family, background-color, etc, but also according to the state of the link. 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 hovers over it a:active: A link the moment it is clicked
Style Element
Multiple style tags are defined in the head of the HTML document EX: see image:
currentcolor keyword (CSS Color)
Refers to the value of the color property of an element Example: The border color of the following element will be blue, because the text color of the element is blue: #div1{color: blue; border: 10px solid currentcolor;/* Blue border color */}
Relative lengths (CSS Unit)
Relative length units specify a length relative to another length property and scale better between different rendering mediums. Some relative length units: em: Relative to the font-size of the element (2em means 2 times the size of the current font) rem: Relative to font-size of the root element vw: Relative to 1% of the width of the viewport. Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm vh: Relative to 1% of the height of the viewport vmin: Relative to 1% of viewport's* smaller dimension vmax: Relative to 1% of viewport's* larger dimension %: Relative to the parent element
display (CSS Layout Property)
Specifies the display behavior (the type of rendering box) of an element. inline: Displays an element as an inline element (like ). Any height and width properties will have no effect. block: Displays an element as a block element (like ). It starts on a new line and takes up the whole width. contents: Makes the container disappear, making the child elements children of the element the next level up in the DOM. flex: Displays an element as a block-level flex container. grid: Displays an element as a block-level grid container. list-item: Lets the element behave like a element. table: Let the element behave like a element. none: The element is completely removed.
text-indent (CSS Text Property)
Specifies the indentation of the first line of a text:
list-style-position (CSS List Property)
Specifies the position of the list-item markers (bullet points). Values: - inside - Bullet points will be inside the list item. - outside: Bullet points will be outside the list item.
line-height (CSS Text Property)
Specifies the space between lines.
letter-spacing (CSS Text Property)
Specifies the space between the characters in a text.
position (CSS Layout Property)
Specifies the type of positioning method used for an element static: Elements render in order, as they appear in the document flow absolute: The element is positioned relative to its first positioned (not static) ancestor element fixed: The element is positioned relative to the browser window relative: The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position
text-transform (CSS Text Property)
Specifies uppercase and lowercase letters in a text. Values: uppercase, lowercase, capitalize (first letter of each word).
font-variant (CSS Font Property)
Specifies whether a text should be displayed in a small-caps font. Values: normal or small-caps.
writing-mode (CSS Text Effect Property)
Specifies whether lines of text are laid out horizontally or vertically. Values: - horizontal-tb: Content will flow horizontally from left to right, vertically from top to bottom (default). - vertical-rl: Content will flow vertically from top to bottom, horizontally from right to left - vertical-lr: Content will flow vertically from top to bottom, horizontally from left to right.
overflow (CSS Layout Property)
Specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area visible: Overflow is not clipped. It renders outside the element's box hidden: Overflow is clipped, and the rest of the content will be invisible. scroll: Overflow is clipped, but a scroll-bar is added to see the rest of the content. auto: If overflow is clipped, a scroll-bar should be added to see the rest of the content
Overflow (CSS Box Model)
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. Possible values: - visible: Default. Overflow is not clipped. 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.
CSS (Cascading stylesheet)
Styles are defined in a separate .css document or file and referenced by each HTML page, or element on the page, the styles apply to.
Absolute length (CSS Unit)
The absolute length units are fixed. A length expressed in any of these will appear as exactly that size. - Because screens vary so much in size and resolution, absolute lengths are not always recommended. Absolute length units: cm (centimetres), mm (millimetres), in (inches), px (pixels), pt (points), pc (picas)
Color (CSS Text Property)
The color property is used to set the color of the text.
direction (CSS Text Property)
The direction, with Unicode-bidi: bidi-override, property can be used to change the text direction of an element from right to left. Default direction is ltr.
max-width (CSS Layout Property)
The max-width property defines the maximum width of an element. - If the content is larger than the maximum width, it will automatically change the height of the element. - If the content is smaller than the maximum width, the max-width property has no effect.
text-align (CSS Text Property)
Used to set the horizontal alignment of text in an element.
list-style-type (CSS List Property)
Values for ul : circle, disc, square
font-weight (CSS Font Property)
Values: normal (=400), bold (=700), bolder, lighter or 100 to 900 (escalating in 100's)
font-size (CSS Font Property)
Values: size in CSS Units, % (of parent element's size), xx-large, x-large, large, larger (than parent element), medium, small, smaller, x-small, xx-small.
font-shorthand (CSS Font Property)
You can specify all the above property values in the font property.
Border (CSS Box Model)
border-width: The border-width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick. border-color: border color can be set with CSS Color syntax Border shorthand (border property): To shorten the code, it is possible to specify all the individual border properties in one property. Border sides: There are also properties for each side separately, for example: border-style property: be set with special styles Ex: See Image
float and clear (CSS Layout Property)
float specifies how an element should float in its container-left, right,none. clear specifies on which sides of an element floating elements are not allowed to float.