CSS Usages

Why CSS?

Basically, CSS (Cascading Style Sheets) is used to control the presentation and layout of HTML documents. It allows developers to separate the content of a webpage from its design, making it easier to maintain and update the appearance of multiple pages at once.

CSS is used to define the visual style of HTML elements, such as colors, fonts, spacing, and positioning. It provides a way to create consistent and visually appealing designs across different web pages and devices.

CSS is also used to create responsive designs that adapt to different screen sizes and devices. By using media queries and flexible layouts, developers can ensure that their websites look good and function well on desktops, tablets, and smartphones.

CSS Selectors, Attributes, Properties

CSS Selectors

CSS selectors are used to target specific HTML elements and apply styles to them. There are several types of CSS selectors, including:

  • Universal selector: Targets all elements on the page (e.g., *).
  • Element selectors: Target specific HTML elements by their tag name (e.g., p, h1, div).
  • Class selectors: Target elements with a specific class attribute (e.g., .my-class).
    • It is necessary to use a period (.) before the class name, and the class name should be unique within the page.
    • Also, multiple classes can be applied to a single element by separating them with spaces.
    • Elements to select need to have corresponding 'class' attribute.
  • ID selectors: Target elements with a specific ID attribute (e.g., #my-id).
    • It is necessary to use a hash symbol (#) before the ID name, and the ID name should be unique within the page.
    • Elements to select need to have corresponding 'id' attribute.
    • The ID selector has a higher specificity than class selectors, meaning that if an element has both a class and an ID, the styles defined by the ID selector will take precedence over those defined by the class selector.
    • Also, it's not possible for a element to have multiple IDs, but can have multiple classes.
  • Attribute selectors: Target elements based on their attributes (e.g., [type="text"]).
  • Pseudo-class selectors: Target elements based on their state or position (e.g., :hover, :first-child).
  • Pseudo-element selectors: Target specific parts of an element (e.g., ::before, ::after).
You can use comma to select multiple elements at once.

CSS Attributes

CSS attributes are used to define the styles that will be applied to the selected elements. Some common CSS attributes include:

  • color: Sets the text color of an element.
  • background-color: Sets the background color of an element.
  • font-size: Sets the size of the text.
  • font-family: Sets the font type for the text.
  • margin: Sets the space outside an element.
  • padding: Sets the space inside an element, between the content and the border.
  • border: Sets the border style, width, and color of an element.
  • width and height: Set the dimensions of an element.
  • display: Controls how an element is displayed (e.g., block, inline, flex).
  • position: Controls how an element is positioned on the page (e.g., static, relative, absolute, fixed).

CSS Properties

CSS properties are the specific values assigned to the attributes to define the appearance of the elements. For example:

  • color: red; (sets the text color to red)
  • background-color: #f0f0f0; (sets the background color to a light gray)
  • font-size: 16px; (sets the font size to 16 pixels)
  • margin: 10px; (sets a 10-pixel margin around the element)
  • padding: 5px; (sets a 5-pixel padding inside the element)
  • border: 1px solid black; (sets a 1-pixel solid black border around the element)

Example CSS Code

p, .my-class, #my-id {
    color: red;
    background-color: #f0f0f0;
    font-size: 16px;
    margin: 10px;
    padding: 5px;
    border: 1px solid black;
}

Stylesheet Types

There are three main types of stylesheets in CSS:

  • Inline styles: Styles applied directly to an HTML element using the "style" attribute. Example: <p style="color: red;">This is a red paragraph.</p>
  • Internal stylesheets: Styles defined within a <style> tag in the <head> section of an HTML document. Example: <style> p { color: red; } </style>
  • External stylesheets: Styles defined in a separate .css file and linked to the HTML document using the <link> tag. Example: <link rel="stylesheet" href="styles.css">

CSS Specificity

CSS specificity is a set of rules that determine which styles are applied to an element when multiple styles conflict. There are two types of specifity, one regarding user/author/browser - defined styles (Hierarchy 1), and the other regarding the selectors used in the CSS rules (Hierarchy 2). The latter is more important for developers to understand, as it directly affects how their styles are applied to elements on a webpage.

Specificity hierarchy 1 is as follows:

  • User-defined styles (e.g., user's custom browser settings, such as high contrast mode.)
  • Author-defined styles (e.g., styles defined by the website's developer in the CSS files.)
  • Browser-defined styles (e.g., default styles applied by the browser to HTML elements, such as the default font size and color for paragraphs.)

The specificity hierarchy 2 is as follows:

  • !important declarations(e.g., p { color: red !important; }) have the highest specificity.
  • Inline styles (e.g., style="color: red;") have the second highest specificity.
  • ID selectors (e.g., #my-id) have higher specificity than class selectors, attribute selectors, and pseudo-classes.
  • Class selectors (e.g., .my-class), attribute selectors (e.g., [type="text"]), and pseudo-classes (e.g., :hover) have higher specificity than element selectors and pseudo-elements.
  • Element selectors (e.g., p, h1, div) and pseudo-elements (e.g., ::before, ::after) have the lowest specificity.

When multiple styles are applied to same element, the style with the highest specificity will take precedence. If two styles have the same specificity, the one that appears last in the CSS will be applied.

CSS Font Styles

CSS font styles are used to control the appearance of text on a webpage. Some common CSS font styles include:

  • font-family: Specifies the font type for the text (e.g., Arial, Times New Roman, sans-serif).
    • Standard Format: font-family: <font name1, font name2, ...>
    • browser will first try to apply the first font, and if it's not available, it will try the next one.
  • font-size: Specifies the size of the text (e.g., absolute: 16px, xx-small, small, medium, large, x-large, xx-large, relative: 1.2em, 120%, 1.5rem).
    • Absolute Units(px, xx-small, small, medium, large, x-large, xx-large): These specify the exact size of the text in pixels or predefined sizes.
    • Relative Units(em, rem, %): These specify the size of the text relative to the parent element's font size (em), the root element's font size (rem), or a percentage of the parent element's font size (%).
  • font-weight: Specifies the thickness of the text (e.g., normal, bold, 100-900 (400:normal, 700:bold)).
  • font-style: Specifies the style of the text (e.g., normal, italic, oblique(tilts the text. italic has its tilted font already designed.)).

CSS Web Fonts

CSS web fonts allow developers to use custom fonts on their websites, even if the user doesn't have those fonts installed on their device. This is done by linking to a font file hosted on a server or using a font service like Google Fonts.

To use a web font, you can include a link to the font file in your HTML document's <head> section, and then use the font-family property in your CSS to apply the font to specific elements.

Example:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

CSS Icon Fonts

Icon fonts are a way to display icons using web fonts. They allow you to use icons as if they were regular text, making them easy to style and manipulate with CSS.

You can find a variety of icon fonts online, such as Font Awesome and Bootstrap Icons.

CSS Text Styles

CSS text styles are used to control the appearance of text on a webpage. Some common CSS text styles include:

  • color: Specifies the color of the text. (e.g., #000000, red, rgba(255, 0, 0, 0.5))
    • Hexadecimal: #000000
    • Named colors: red
    • RGB: rgb(255, 0, 0)
    • RGBA: rgba(255, 0, 0, 0.5)
  • text-align: Specifies the horizontal alignment of the text (e.g., left, right, center, justify, start, end, match-parent).
    • start: aligns the text to the start of the line (left for left-to-right languages, right for right-to-left languages).
    • end: aligns the text to the end of the line (right for left-to-right languages, left for right-to-left languages).
    • left: aligns the text to the left side of the element.
    • right: aligns the text to the right side of the element.
    • center: centers the text within the element.
    • justify: aligns the text to both the left and right sides of the element, adding extra space between words as necessary.
    • match-parent: inherits the text alignment from its parent element.
  • text-decoration: Specifies the decoration added to the text (e.g., none, underline, overline, line-through).
  • line-height: Specifies the height(distance) of each line of text (e.g., normal, 1.5, 2em).
    • normal: The default line height, which is typically around 1.2 times the font size.
    • number: A unitless value that is multiplied by the element's font size to determine the line height (e.g., 1.5 means 1.5 times the font size).
    • length: A specific length value, such as pixels (px), ems (em), or rems (rem) (e.g., 20px, 1.5em, 2rem).
    • percentage: A percentage value that is relative to the element's font size (e.g., 150% means 1.5 times the font size).
  • text-shadow: Specifies the shadow effect added to the text (e.g., none, 2px(horizontal) 2px(vertical) 5px(blur) rgba(0, 0, 0, 0.5)).
    • none: No shadow effect is applied to the text.
    • h-shadow: The horizontal offset of the shadow. A positive value moves the shadow to the right, while a negative value moves it to the left.
    • v-shadow: The vertical offset of the shadow. A positive value moves the shadow down, while a negative value moves it up.
    • blur: The blur radius of the shadow. A larger value creates a more blurred shadow, while a smaller value creates a sharper shadow.
    • color: The color of the shadow. This can be specified using named colors, hexadecimal values, RGB, or RGBA.
  • letter-spacing: Specifies the space between characters in the text (e.g., normal, 1px, 0.1em).
  • word-spacing: Specifies the space between words in the text (e.g., normal, 1px, 0.1em).
  • text-transform: Specifies the capitalization of the text (e.g., none, capitalize, uppercase, lowercase).
    • none: No transformation is applied to the text.
    • capitalize: The first letter of each word is converted to uppercase.
    • uppercase: All letters in the text are converted to uppercase.
    • lowercase: All letters in the text are converted to lowercase.
    • full-width: All characters are converted to their full-width equivalents(meaning, each character's height and width become same length).
  • text-indent: Specifies the indentation of the first line of text (e.g., 0, 2em, 20px).
  • white-space: Specifies how whitespace is handled in the text (e.g., normal, nowrap, pre, pre-wrap, pre-line).
  • word-wrap: Specifies how long words should be broken and wrapped onto the next line (e.g., normal, break-word).
  • word-break: Specifies how words should break when reaching the end of a line (e.g., normal, break-all, keep-all).
  • text-overflow: Specifies how overflowed text is displayed (e.g., clip, ellipsis, string).
  • direction: Specifies the text direction (e.g., ltr, rtl, inherit). ltr: left-to-right, rtl: right-to-left, inherit: inherits the direction from its parent element.
  • unicode-bidi: Specifies how the text should be displayed when dealing with bidirectional text (e.g., normal, embed, isolate, bidi-override, isolate-override, plaintext).
  • hyphens: Specifies how words should be hyphenated when breaking lines (e.g., none, manual, auto).
  • text-align-last: Specifies the alignment of the last line of text in a block (e.g., auto, left, right, center, justify).
  • text-justify: Specifies the justification method for text (e.g., auto, none, inter-word, inter-character, distribute, kashida).
  • text-emphasis: Specifies the emphasis marks added to the text (e.g., none, circle, dot, sesame, accent).
  • text-emphasis-position: Specifies the position of the emphasis marks relative to the text (e.g., over, under, right, left).
  • text-emphasis-style: Specifies the style of the emphasis marks (e.g., none, circle, dot, sesame, accent).
  • text-emphasis-color: Specifies the color of the emphasis marks (e.g., inherit, currentColor, red, #ff0000).
  • text-orientation: Specifies the orientation of the text in vertical writing modes (e.g., mixed, upright, sideways, sideways-right).
  • text-combine-upright: Specifies how multiple characters should be combined into a single upright character in vertical writing modes (e.g., none, all, digits, letters, full-width).
  • text-rendering: Specifies how the text should be rendered (e.g., auto, optimizeSpeed, optimizeLegibility, geometricPrecision).
  • text-anchor: Specifies the alignment of the text relative to a given point (e.g., start, middle, end).
  • writing-mode: Specifies the direction in which the text is written (e.g., horizontal-tb, vertical-rl, vertical-lr, sideways-rl, sideways-lr).

CSS List Styles

CSS List Styles are used to decorate and adjust location of bullets in lists.

  • list-style-type: Changes bullet shape to selected type. Available choices are listed below.
    • disc: •
    • circle: ○
    • square: ■
    • decimal: 1, 2, 3, 4, ...
    • decimal-leading-zero: 01, 02, 03, 04, ...
    • lower-roman: i, ii, iii, iv, v, ...
    • upper-roman: I, II, III, IV, V, ...
    • lower-alpha (or lower-latin): a, b, c, d, ...
    • upper-alpha (or upper-latin): A, B, C, D, ...
    • none: deletes bullet.
  • list-style-image: Changes bullet shape to selected image. (e.g., list-style-image: url('images/dot.png');)
  • list-style-position: Changes location of list elements. (e.g., inside, outside(default))
    • inside: indents the list.
    • outside: does not indent the list. Default value.
  • list-style: Combination of previous properties (list-style-type, list-style-image, list-style-position). (e.g., list-style: decimal inside;)

CSS Table Styles

CSS Table Styles are used to decorate and adjust table properties.

  • caption-side: You can relocate title from top to bottom. (e.g., bottom, top (default))
  • border: Draws border for elements. Widely used for various elements. (e.g. 1px solid black).
  • border-spacing: Adjust margin lengths between cells. (e.g., 1em(horizontal margin length) 3em(vertical margin length))
  • border-collapse: Selects whether <table> tag and <td> tag's border should be collapsed(combined) to one. Default value is 'seperate'. (e.g. seperate(default), collapse)