CSS - CL1 Flashcards
CSS: Simple style rules
CSS Syntax
A CSS rule-set consists of a selector and a declaration block.
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.
CSS: Elements positioning, floating and layering
CSS Layout - The position Property
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
The position Property
The position property specifies the type of positioning method used for an element.
There are five different position values:
- static
- relative
- fixed
- absolute
- sticky
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page
position: relative;
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
position: fixed;
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have been located.
Notice the fixed element in the lower-right corner of the page.
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Note: A “positioned” element is one whose position is anything except static.
position: sticky;
An element with position: sticky; is positioned based on the user’s scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it “sticks” in place (like position:fixed).
Overlapping Elements
When elements are positioned, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order
CSS Overflow
The overflow property 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.
The overflow property has the following values:
- visible - Default. The overflow is not clipped. The 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
Note: The overflow property only works for block elements with a specified height.
CSS Layout - float and clear
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared element and on which side.
The float Property
The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.
The float property can have one of the following values:
- left - The element floats to the left of its container
- right - The element floats to the right of its container
- none - The element does not float (will be displayed just where it occurs in the text). This is default
- inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.
The clear Property
The clear property specifies what elements can float beside the cleared element and on which side.
The clear property can have one of the following values:
- none - Allows floating elements on both sides. This is default
- left - No floating elements allowed on the left side
- right- No floating elements allowed on the right side
- both - No floating elements allowed on either the left or the right side
- inherit - The element inherits the clear value of its parent
The most common way to use the clear property is after you have used a float property on an element.
When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.
CSS: Tables properties
CSS Tables
The look of an HTML table can be greatly improved with CSS
Table Borders
To specify table borders in CSS, use the border property.
Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into a single border
Table Width and Height
Width and height of a table are defined by the width and height properties.
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of the content in or .
By default, the content of elements are center-aligned and the content of elements are left-aligned.
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in or .
By default, the vertical alignment of the content in a table is middle (for both and elements).
Table Padding
To control the space between the border and the content in a table, use the padding property on and elements
Horizontal Dividers
Add the border-bottom property to and for horizontal dividers
Hoverable Table
Use the :hover selector on to highlight table rows on mouse over
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content
Add a container element (like <div>) with overflow-x:auto around the element to make it responsive</div>
CSS3: FlexBox
CSS Flexbox Layout Module
Before the Flexbox Layout module, there were four layout modes:
- Block, for sections in a webpage
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for explicit position of an element
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
Flexbox Elements
To start using the Flexbox model, you need to first define a flex container.
Parent Element (Container) The flex container becomes flexible by setting the display property to flex The flex container properties are: - flex-direction - flex-wrap - flex-flow - justify-content - align-items - align-content
The flex-direction Property
The flex-direction property defines in which direction the container wants to stack the flex items.
The following values are accepted:
- row
The flex container’s main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction.
- row-reverse
Behaves the same as row but the main-start and main-end points are permuted.
- column
The flex container’s main-axis is the same as the block-axis. The main-start and main-end points are the same as the before and after points of the writing-mode.
column-reverse
Behaves the same as column but the main-start and main-end are permuted.
The flex-wrap Property
The flex-wrap property specifies whether the flex items should wrap or not.
The examples below have 12 flex items, to better demonstrate the flex-wrap property.
The following values are accepted:
- nowrap
The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending flex-direction value. This is the default value.
- wrap
The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start.
- wrap-reverse
Behaves the same as wrap but cross-start and cross-end are permuted.
The flex-flow Property
The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
The justify-content Property
The justify-content property is used to align the flex items
Values
- start
The items are packed flush to each other toward the start edge of the alignment container in the main axis.
- end
The items are packed flush to each other toward the end edge of the alignment container in the main axis.
- flex-start
The items are packed flush to each other toward the edge of the alignment container depending on the flex container’s main-start side.
This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start.
- flex-end
The items are packed flush to each other toward the edge of the alignment container depending on the flex container’s main-end side.
This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.
- center
The items are packed flush to each other toward the center of the alignment container along the main axis.
- space-between
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
- space-around
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
- space-evenly
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
- stretch
If the combined size of the items along the main axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.
The align-items Property
The align-items property is used to align the flex items vertically.
The align-content Property
The align-content property is used to align the flex lines.
The flex item properties are:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
The order Property
The order property specifies the order of the flex items.
The first flex item in the code does not have to appear as the first item in the layout.
The order value must be a number, default value is 0.
The flex-grow Property
The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
The value must be a number, default value is 0.
The flex-shrink Property
The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.
The value must be a number, default value is 1.
The flex-basis Property
The flex-basis property specifies the initial length of a flex item.
The flex Property
The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.
The align-self Property
The align-self property specifies the alignment for the selected item inside the flexible container.
The align-self property overrides the default alignment set by the container’s align-items property.
CSS: Color (rgba, hsl, hsla,
transparent, currentColor)
CSS Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
CSS Color Values
In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values
CSS RGB Value
In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.
To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).
To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).
CSS HEX Value
In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).
HSL Value
In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
RGBA Value
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)
HSLA Value
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)
CSS: Fonts, text
CSS Fonts
The CSS font properties define the font family, boldness, size, and the style of a text.
CSS Font Families
In CSS, there are two types of font family names:
- generic family - a group of font families with a similar look (like “Serif” or “Monospace”)
- font family - a specific font family (like “Times New Roman” or “Arial”)
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
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
- normal - The text is shown normally
- italic - The text is shown in italics
- oblique - The text is “leaning” (oblique is very similar to italic, but less supported)
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and </h6></h1><p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
- Sets the text to a specified size
- Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
- Absolute size is useful when the physical size of the output is known
Relative size:
- Sets the size relative to surrounding elements
- Allows a user to change the text size in browsers
Set Font Size With Pixels
Setting the text size with pixels gives you full control over the text size
Tip: If you use pixels, you can still use the zoom tool to resize the entire page.
Set Font Size With Em
To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
Font Weight
The font-weight property specifies the weight of a font
Responsive Font Size
The text size can be set with a vw unit, which means the “viewport width”.
Font Variant
The font-variant property specifies whether or not a text should be displayed in a small-caps font
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
CSS Text
Text Color The color property is used to set the color of the text. The color is specified by: - a color name - like "red" - a HEX value - like "#ff0000" - an RGB value - like "rgb(255,0,0)"
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
Text Decoration
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
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
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text
Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text.
The following example demonstrates how to increase or decrease the space between characters
Line Height
The line-height property is used to specify the space between lines
Text Direction
The direction property is used to change the text direction of an element
Word Spacing
The word-spacing property is used to specify the space between the words in a text.
The following example demonstrates how to increase or decrease the space between words
Text Shadow
The text-shadow property adds shadow to text.
The following example specifies the position of the horizontal shadow (3px), the position of the vertical shadow (2px) and the color of the shadow (red)</p>
CSS: Backgrounds and Borders
CSS Backgrounds The CSS background properties are used to define the background effects for elements. CSS background properties: - background-color - background-image - background-repeat - background-attachment - background-position
CSS background-color
The background-color property specifies the background color of an element.
With CSS, a color is most often specified by:
- a valid color name - like “red”
- a HEX value - like “#ff0000”
an RGB value - like “rgb(255,0,0)”
CSS 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.
CSS background-repeat
By default, the background-image property repeats an image both horizontally and vertically.
Tip: To repeat an image vertically, set background-repeat: repeat-y;
CSS background-repeat: no-repeat
Showing the background image only once is also specified by the background-repeat property
CSS background-position
The background-position property is used to specify the position of the background image.
CSS background-attachment
The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page)
CSS background - Shorthand property
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.
The shorthand property for background is background.
When using the shorthand property the order of the property values is:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
It does not matter if one of the property values is missing, as long as the other ones are in this order.
CSS Border Properties
The CSS border properties allow you to specify the style, width, and color of an element’s border.
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
- dotted - Defines a dotted border
- dashed - Defines a dashed border
- solid - Defines a solid border
- double - Defines a double border
- groove - Defines a 3D grooved border. The effect depends on the border-color value
r- idge - Defines a 3D ridged border. The effect depends on the border-color value
- inset - Defines a 3D inset border. The effect depends on the border-color value
- outset - Defines a 3D outset border. The effect depends on the border-color value
- none - Defines no border
- hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
CSS Border Width
The border-width property specifies the width of the four borders.
The 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.
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).
CSS Border Color
The border-color property is used to set the color of the four borders.
The color can be set by:
- name - specify a color name, like “red”
- Hex - specify a hex value, like “#ff0000”
- RGB - specify a RGB value, like “rgb(255,0,0)”
transparent
The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
If border-color is not set, it inherits the color of the element.
CSS Border - Individual Sides
From the examples above you have seen that it is possible to specify a different border for each side.
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left)
CSS Border - Shorthand Property
As you can see from the examples above, there are many properties to consider when dealing with borders.
To shorten the code, it is also possible to specify all the individual border properties in one property.
The border property is a shorthand property for the following individual border properties:
- border-width
- border-style (required)
- border-color
You can also specify all the individual border properties for just one side
CSS Rounded Borders
The border-radius property is used to add rounded borders to an element
CSS: Selectors types
In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we’ll run through the different types in great detail, seeing how they work.
What is a selector? You have met selectors already. A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector. In earlier articles you met some different selectors, and learned that there are selectors that target the document in different ways — for example by selecting an element such as h1, or a class such as .special. In CSS, selectors are defined in the CSS Selectors specification; like any other part of CSS they need to have support in browsers for them to work. The majority of selectors that you will come across are defined in the Level 3 Selectors specification, which is a mature specification, therefore you will find excellent browser support for these selectors.
Selector lists If you have more than one thing which uses the same CSS then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual selectors. For example, if I have the same CSS for an h1 and also a class of .special, I could write this as two separate rules. I could also combine these into a selector list, by adding a comma between them. When you group selectors in this way, if any selector is invalid the whole rule will be ignored.
Types of selectors
There are a few different groupings of selectors, and knowing which type of selector you might need will help you to find the right tool for the job. In this article’s subarticles we will look at the different groups of selectors in more detail.
Type, class, and ID selectors
This group includes selectors that target an HTML element such as an <h1>.
h1 { }
It also includes selectors which target a class:
.box { }
or, an ID:
#unique { }
Attribute selectors
This group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element:
a[title] { }
Or even make a selection based on the presence of an attribute with a particular value:
a[href=”https://example.com”] { }
Pseudo-classes and pseudo-elements
This group of selectors includes pseudo-classes, which style certain states of an element. The :hover pseudo-class for example selects an element only when it is being hovered over by the mouse pointer:
a:hover { }
It also includes pseudo-elements, which select a certain part of an element rather than the element itself. For example, ::first-line always selects the first line of text inside an element (a </h1><p> in the below case), acting as if a <span> was wrapped around the first formatted line and then selected.
p::first-line { }
Combinators
The final group of selectors combine other selectors in order to target elements within our documents. The following for example selects paragraphs that are direct children of elements using the child combinator (>):
article > p { }
Descendant selector You have already come across descendant selectors in previous lessons — selectors with spaces in between them: body article p These selectors select elements that are descendants of others selector. They do not need to be direct children to match. In the example below we are matching only the <p> element which is inside an element with a class of .box.
Child combinator
The child combinator is a greater-than symbol (>), which matches only when the selectors select elements that are direct children. Descendants further down the hierarchy don’t match. For example, to select only </p><p> elements that are direct children of elements:
article > p
In this next example we have an unordered list, nested inside of which is another unordered list. I am using the child combinator to select only the <li> elements which are a direct child of a <ul>, and have given them a top border.
If you remove the > that designates this as a child combinator, you end up with a descendant selector and all <li> elements will get a red border.
Adjacent sibling
The adjacent sibling selector (+) is used to select something if it is right next to another element at the same level of the hierarchy. For example, to select all <img></img> elements that come right after <p> elements:
p + img
A common use case is to do something with a paragraph that follows a heading, as in my example below. Here we are looking for a paragraph which is directly adjacent to an </p><h1>, and styling it.
If you insert some other element such as a <h2> in between the <h1> and the </h1></h2></h1><p>, you will find that the paragraph is no longer matched by the selector and so does not get the background and foreground color applied when the element is adjacent.
General sibling
If you want to select siblings of an element even if they are not directly adjacent, then you can use the general sibling combinator (~). To select all <img></img> elements that come anywhere after </p><p> elements, we’d do this:
p ~ img
In the example below we are selecting all </p><p> elements that come after the </p><h1>, and even though there is a <div> in the document as well, the <p> that comes after it is selected.
Using combinators
You can combine any of the selectors that we discovered in previous lessons with combinators in order to pick out part of your document. For example if we want to select list items with a class of "a", which are direct children of a </p><ul>, I could use the following.
ul > li[class="a"] { }
Take care however when creating big lists of selectors that select very specific parts of your document. It will be hard to reuse the CSS rules as you have made the selector very specific to the location of that element in the markup.
It is often better to create a simple class and apply that to the element in question. That said, your knowledge of combinators will come in very useful if you need to get to something in your document and are unable to access the HTML, perhaps due to it being generated by a CMS.
</ul></div></h1></li></ul></li></p></span></p>
CSS: Selectors cascading and inheritance
Link:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
Bootstrap/Foundation: Main features and concepts
Link:
https://getbootstrap.com/
Bootstrap/Foundation: Grid, basic elements
Link:
https://getbootstrap.com/
