CSS stands for Cascading Style Sheets

Comment

/* comment */

How to use

• External

<link rel="stylesheet" href="mystyle.css">

• Internal

<style>
...
</style>

• Inline

<link rel="stylesheet" href="mystyle.css">

If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.

All the styles in a page 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 has the highest priority, and will override external and internal styles and browser defaults.

Selector

• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

Simple Selector

• element selector
• id selector
• class selector

Combinator Selector

• descendant selector (space) ：matches all elements that are descendants of a specified element

div p {
  background-color: yellow;
}

• child selector (>) ：selects all elements that are the children of a specified element.

div > p {
  background-color: yellow;
}

• adjacent sibling selector (+) : select an element that is directly after another specific element.:

div + p {
  background-color: yellow;
}

• general sibling selector (~) : selects all elements that are next siblings of a specified element.

div ~ p {
  background-color: yellow;
}

Pseudo-classes Selector

A pseudo-class is used to define a special state of an element.

syntax

selector:pseudo-class {
  property: value;
}

Anchor pseudo-classes order

• :link (unvisited)
• :visited
• :hover
• :active (clicked)

:first-child

The :first-child pseudo-class matches a specified element that is the first child of another element.

p:first-child {
  color: blue;
}

//first i in p
p i:first-child {
  color: blue;
}

//all i in first p
p:first-child i{
    
}

:lang

The :lang pseudo-class allows you to define special rules for different languages.

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>

all pseudo classes

Pseudo-element Selector

A CSS pseudo-element is used to style specified parts of an element.

syntax

selector::pseudo-element {
  property: value;
}

::first-line

Note: The ::first-line pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-line pseudo-element:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

::first-letter

Note: The ::first-letter pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-letter pseudo- element:

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if “float” is “none”)
• text-transform
• line-height
• float
• clear

::before and ::after

The ::before and ::after pseudo-element can be used to insert some content before the content of an element.

h1::before {
  content: url(smiley.gif);
}

all pseudo elements

Attribute Selector

[attribute] Selector

The [attribute] selector is used to select elements with a specified attribute.

a[target] {
  background-color: yellow;
}

[attribute=“value”] Selector （等于）

The [attribute="value"] selector is used to select elements with a specified attribute and value.

a[target="_blank"] {
  background-color: yellow;
}

[attribute~=“value”] Selector（限制包含）

The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word.

[title~="flower"] {
  border: 5px solid yellow;
}

The example above will match elements with title=“flower”, title=“summer flower”, and title=“flower new”, but not title=“my-flower” or title=“flowers”.

[attribute*=“value”] Selector（包含）

The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.

The following example selects all elements with a class attribute value that contains “te”:

Note: The value does not have to be a whole word!

[class*="te"] {
  background: yellow;
}

[attribute|=“value”] Selector（限制开始）

The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).

Note: The value has to be a whole word, either alone, like class=“top”, or followed by a hyphen( - ), like class=“top-text”.

[class|="top"] {
  background: yellow;
}

[attribute^=“value”] Selector（开始）

The [attribute^="value"] selector is used to select elements with the specified attribute, whose value starts with the specified value.

The following example selects all elements with a class attribute value that starts with “top”:

Note: The value does not have to be a whole word!

[class^="test"] {
  background: yellow;
}

[attribute$=“value”] Selector（结束）

The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.

The following example selects all elements with a class attribute value that ends with “test”:

Note: The value does not have to be a whole word!

[class$="test"] {
  background: yellow;
}

Special Selector

Universal Selector

The universal selector (*) selects all HTML elements on the page.

Grouping Selector

The universal selector (*) selects all HTML elements on the page.

h1, h2, p {
  text-align: center;
  color: red;
}

Specificity

If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will “win”, and its style declaration will be applied to that HTML element.

Every CSS selector has its place in the specificity hierarchy.

There are four categories which define the specificity level of a selector:

• Inline styles (1000)- Example:

• IDs (100) - Example: #navbar
• Classes, pseudo-classes, attribute selectors (10) - Example: .test, :hover, [href]
• Elements and pseudo-elements (1 ) - Example: h1, ::before

Equal specificity: the latest rule wins

The universal selector (*) and inherited values have a specificity of 0 - The universal selector (*) and inherited values are ignored!

！important

if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}

The only way to override an !important rule is to include another !important rule on a declaration with the same (or higher) specificity in the source code - and here the problem starts! This makes the CSS code confusing and the debugging will be hard, especially if you have a large style sheet!

do not use it unless you absolutely have to.

Colors

type

• background color

  • background-color
  • background

• text color

  • color

• border color

  • border

value

RGB

rgb(red,green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

RGBA

rgba(red,green,blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

HEX

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.

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).

HSL

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

HSLA

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

Keyword

• transparent

equal to rgba(0,0,0,0)

• currentcolor

is like a variable that holds the current value of the color property of an element.

Opacity

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

Gradients

CSS defines three types of gradients:

• Linear Gradients (goes down/up/left/right/diagonally)

background-image: (repeating)-linear-gradient(direction/angle, color-stop1, color-stop2, …);

• Radial Gradients (defined by their center)

background-image: (repeating)-radial-gradient(shape size at position, start-color, …, last-color);

• Conic Gradients (rotated around a center point)

background-image: (repeating)-radial-gradient(shape size at position, start-color, …, last-color);

Background

background-color

explained before

background-image

By default, the image is repeated so it covers the entire element.

body {
  background-image: url("paper.gif");
}

background-repeat

By default, the background-image property repeats an image both horizontally and vertically.

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat(default) | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;
}

background-position

The background-position property is used to specify the position of the background image.

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)

background

shorthand property for above properties

Box Model

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

Padding

Padding is used to create space around an element’s content, inside of any defined borders.

CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding(shorthand)

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

Note: Negative values are not allowed.

If the padding property has three values:

• padding: 25px 50px 75px;
  • top padding is 25px
  • right and left paddings are 50px
  • bottom padding is 75px

Border

The CSS border properties allow you to specify the style, width, and color of an element’s border.

• border-style
• border-width

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)

• border-color
• border(shorthand)

the border-style is required

• border-image

you can set an image to be used as the border around an element.

Tip: The border-image property is actually a shorthand property for the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.

Side-Specific

border-(side)-(value)

Rounded

With the CSS border-radius property, you can give any element “rounded corners”.

Tip: The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties

Margins

Margins are used to create space around elements, outside of any defined borders.

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin (shorthand)

All the margin properties can have the following values:

• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

If the margin property has three values:

• margin: 25px 50px 75px;
  • top margin is 25px
  • right and left margins are 50px
  • bottom margin is 75px

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

Width/Height

The height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

The height and width properties may have the following values:

• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value

we can also use min/max-width/height to achieve our goal.

Box Sizing

The CSS box-sizing property allows us to include the padding and border in an element’s total width and height.

By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element height + padding + border = actual height of an element

This means: When you set the width/height of an element, the element often appears bigger than you have set

If you set box-sizing: border-box; on an element, padding and border are included in the width and height

Outline

An outline is a line drawn outside the element’s border.

CSS has the following outline properties:

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element’s border, and may overlap other content. Also, the outline is NOT a part of the element’s dimensions; the element’s total width and height is not affected by the width of the outline.

Text

Text Color

The color property is used to set the color of the text.

Text Alignment

• text-align

set the horizontal alignment of a text.

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)

• text-align-last

The text-align-last property specifies how to align the last line of a text.

• direction
• unicode-bidi

The direction and unicode-bidi properties can be used to change the text direction of an element

• vertical-align

vertical-align property sets the vertical alignment of an element.

Text Decoration

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

Text Spacing

• text-indent

specify the indentation of the first line of a text

• letter-spacing
• line-height
• word-spacing
• white-space

Text Shadow

horizontal shadow ;vertical shadow ;blur effect;colors

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Text Effect

• text-overflow

specifies how overflowed content that is not displayed should be signaled to the user.

• word-wrap

allows long words to be able to be broken and wrap onto the next line.

• word-break

specifies line breaking rules.

• writing-mode

specifies whether lines of text are laid out horizontally or vertically.

Font

Font Family

In CSS there are five generic font families:

1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.

Note: If the font name is more than one word, it must be in quotation marks, like: “Times New Roman”.

Tip: The font-family property should hold several font names as a “fallback” system, to ensure maximum compatibility between browsers/operating systems. 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). The font names should be separated with comma.

The following list are the best web safe fonts for HTML and CSS:

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

Font Style

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-weight specifies the weight of a font ( normal bold)

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. )

Font Size

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

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

with the em size, it is possible to adjust the text size in all browsers.

The solution that works in all browsers, is to set a default font-size in percent for the element:

body {
 font-size: 100%;
}

h1 {
 font-size: 2.5em;
}

h2 {
 font-size: 1.875em;
}

p {
 font-size: 0.875em;
}

font

The font property is a shorthand property for:

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

Note: The font-size and font-family values are required. If one of the other values is missing, their default value are used.

Google Fonts

If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.

Google Fonts are free to use, and have more than 1000 fonts to choose from.

Just add a special style sheet link in thesection and then refer to the font in the CSS.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Sofia|Trirong">

Google have also enabled different font effects that you can use.

First add effect=effectname to the Google API, then add a special class name to the element that is going to use the special effect. The class name always starts with font-effect- and ends with the effectname.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<h1 class="font-effect-fire">Sofia on Fire</h1>

Web Fonts

Web fonts allow Web designers to use fonts that are not installed on the user’s computer.

When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.

Your “own” fonts are defined within the CSS @font-face rule.

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

Lists

• list-style-type
• `list-style-image``
• ``list-style-position`
• list-style ( shorthand )

Layout

Display

The display property is the most important CSS property for controlling layout.

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.

visibility:hidden; also hides an element.

However, the element will still take up the same space as before. The element will be hidden, but still affect the layout

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.item1 {
  grid-column: 1 / 5;
}

.item1 {
  grid-column: 1 / span 3;
}

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

{
    width: calc(100% - 100px);
}

{
    width: max(50%, 300px);
}

{
    width: min(50%, 300px);
}

div {
  transition: width 2s, height 4s;
}
div:hover {
  width: 300px;
}


/*Several Property Values*/
div:hover {
  width: 300px;
}

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
 CSS-Code;
}

/* changes the background-color to lightgreen if the viewport is 480 pixels wide or wider */
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}