CSS Counters

There’s often a need to list items on the webpage in an orderly fashion. These items can be ordered products in a wish-list or Steps to be followed in a tutorial.

Making a dynamic list that can add counters to the list element is another popular feature provided by CSS. CSS counters are, basically, “variables” which are used to track their own recurrence.

In other words, each time the “counter” element occurs on the page, it will have an incremented value associated with it. This is an automatic process where the increment in variables can tell us the exact number of times they are used.

In order to style any element for counting itself, we have 4 CSS properties:

  • counter-reset – This resets the counter to the initial value
  • counter-increment – Responsible for incrementing the counter. Value can be following
    • none: No increment (default value)
    • id number: ‘id’ is used to identify the counter that has to be incremented while the ‘number’ decides the incrementing value
    • initial: To set to the default value
    • inherit: Inherits from the containing element
  • content: The content of the counter that will be shown on every increment
  • counter() or counters() function – Add the incremented value to the content.

It is necessary to create the counter-reset in order to use the counter in CSS. In case the id, mentioned in the counter-increment property, points to a counter that is not reset, the default initial value will be taken as 0.

Nesting Counters

We can create counter within counters. This is called nesting and is quite useful for webpages that have modularized text data like tutorials or wiki pages.

We use the counter function to indicate the nesting. Let’s say ‘section’ and ‘subsection’ are two counters where the ‘subsection’ is for <h2>, to be nested inside ‘section’ which is for <h1>. So, to increment subsection, we can use the counter function as

counter(section)<delimiter>counter(subsection).

Thus, the value of subsection will increment but the value of section will remain the same because of the different target elements.

CSS 3D Transforms

CSS3 provides the facility to change shape, size, and position of the element with the help of transform property. There are two types of transformations namely, 2D and 3D.

Transformation allows to rotate, translate, shift and scale elements.

In this, we will learn about only 3D transformation.

In the 3D transformation, the effects are produced with the help of x-axis (horizontal effects), y-axis (vertical effects) and z-axis (depth effects).

The list of 3D transformations methods are as follows:

Translate

translate3d(x,y,z) – This method transforms the element along x-axis, y-axis and z-axis.

It takes the values as lengths and percentages. The default value is 0.

Rotate

rotate3d(x,y,z,angle)  –  This method rotates the element at a given angle along the axis of rotation defined by an (x, y, z) vector.

The default value is 0. The positive value represents clockwise rotation and the negative value represents anti-clockwise direction.

Scale

scale3d(x,y,z) – This method changes the size of the element as specified for x, y and z-axis respectively.

By default, the element is at scale 1, no change. The element gets scaled up for the values greater than 1 and for negative values, the transformation is flipped in either direction.

The element gets disappeared if the value is zero.

Matrix

The matrix3d function is a replacement to the 3D transform methods rotate3d, rotateX, rotateY, rotateZ, translate3d, translateZ, scale3d, scaleZ, and perspective.

It takes a 4×4 matrix of 16 values as a parameter.

Perspective

This method defines a 3D space for a 3D-transformed element.  perspective(n)

Following are the transform properties supported in 3D transformations:

  1. transform : Applies a transformation to an element.
  2. transform-origin : On transformed elements, it allows to change the position.
  3. transform-style : Specifies rendering of nested elements in 3D space.
  4. perspective : Specifies the view for 3D elements
  5. perspective-origin : Specifies the bottom position of 3D elements
  6. backface-visibility : Defines visibility of an element when not facing the screen

CSS 2D Transforms

CSS3 provides the facility to change shape, size, and position of the element with the help of transform property. There are two types of transformations namely, 2D and 3D.

Transformation allows to rotate, translate, scale, and skew elements.

In this, we will learn about only 2D transformation.

In the 2D transformation, the effects are produced with the help of x-axis (horizontal effects) and y-axis (vertical effects).

The list of 2D transformations methods are as follows:

Translate

  1. translate(X, Y) – This method transforms the element along x-axis and y-axis.
  2. translateX(X) – This method transforms the element along x-axis.
  3. translateY(Y) – This method transforms the element along y-axis.

These methods take values as lengths and percentages. The default value is 0.

Rotate

  1. rotate(X, Y) – This method rotates the element along x-axis and y-axis.
  2. rotateX(X) – This method rotates the element along x-axis.
  3. rotateY(Y) – This method rotates the element along y-axis.

These methods take values as angles. The default value is 0.

The positive value represents clockwise rotation and the negative value represents anti-clockwise direction.

Run

Scale

  1. scale(X, Y) – This method changes the height and width of the element.
  2. scaleX(X) – This method changes the width of the element.
  3. scaleY(Y) – This method changes the height of the element.

Skew

  1. skew(X, Y) – This method distorts the element along x-axis and y-axis.
  2. skewX(X) – This method distorts the element along x-axis
  3. skewY(Y) – This method distorts the element along y-axis.

These methods take values as angles.

Matrix

The matrix method combines the 2D transform methods to be applied as one. 

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

The transform properties supported in 2D transformations are –

  1. transform : Applies effect to an element 
  2. transform-origin : Allows to change the position

CSS Buttons

Buttons give a feel of automation to the websites.

A button pressed here can redirect you to another page, or may bring something new to current page.

CSS has a lot to style the buttons using its numerous properties.

The basic outlook of a button is a standard rectangular  image with some instructive text written over it.

The color is mostly white for the image and black for the text. Let’s now take a look at different styling aspects of a button.

Run

Colors

The color of the button can be changes using the background-color property.

Sizes

The size of the button may depend on its dimensions or its text. You can change the font size of the text or the padding property of the button to alter the button size.

Rounded

With the help of the border-radius property, we can make the corners rounded for the buttons.

Colored Borders

The border property can be used to change the border color of the button. We generally choose the border a shade darker than the background-color of the containing element or the web-page in general.

Hover

Changing of background and border colors, or even the text can be done using the hovering feature for the buttons. You can also add transition for a better effect.

Shadow

The box-shadow property can add shadows to the button.

Disabled

To show a disabled button, we mostly increase the opacity of the button or change its background color to something between white and light-grey.

Width

Depending on the box-sizing property value, the width can be inclusive or exclusive of the padding, border and margins.

Grouping

The buttons can be grouped together by removing the margins and adding float:left to all of them. You can add borders to separate different buttons in the group. You can also use display:block if you want to group the buttons vertically.

Apart from these, we can also have buttons on images and buttons with animated features.

CSS Responsive Web Design

With a wide range of devices being able to access the internet, it is very necessary to make the websites easily operable on all these devices. A website that looks great on the laptop screen should retain its swagger on the mobile phone screen as well.

To serve this purpose, CSS provides a feature called, Responsive Web Design or RWD. RWD uses HTML and CSS for all its implementation and provides a responsive layout for different devices without any JavaScript or external program.

RWD ensures that your web-pages look good irrespective of whether they are being viewed on a tablet, phone, or a desktop screen. Not only the looks, but the ease of use should also be intact for all the platforms. A responsive website is one that doesn’t have to leave out any information and rather adapt to the device screen dimensions and limitations.

Viewport

The visible area of your webpage is generally known as the viewport. The size of the viewport varies from device to device. Obviously, the viewport for a phone will be smaller than that on a laptop screen.

Earlier, when the web-pages had fixed size due to static designing, the browsers used to scale them down as per the screen requirements of the device. This quick fix was, however, not a very strong solution. The rescaled web-pages were very difficult to operate due to obvious reasons.

Viewport Setting and <meta> tag

A method was provided in HTML5 that helped the web designers to take over the viewport settings  using the <meta> tag. The tag instructs the browser as to how it will control the page’s scaling and adjust the dimension.

The content sizing on the view port follows some rules such as:

  • Adjusting the content to avoid as much horizontal scroll as possible
  • Let the content be flexible and not completely rely on a single screen dimensions
  • Avoid specific length values and rather use relative percentage values to make the elements responsive to change in screen size.

    CSS Aural Style Sheets

    A website that reads out the content to you is something very real and doable in today’s time.

    Aural Style Sheets are the special type of CSS style sheets that can help the user listen to the website information instead of them reading it on their own. This is possible by two key features:

    • Speech Synthesis
    • Sound Effects

    The aural styling of the web-pages can be very helpful in multiple situations like:

    • Easy usage by visually impaired as the content practically reads itself out loud
    • Reading information in a unknown script (for e.g. a language that the user understand but cannot read)
    • Differently abled users who have difficulty in reading (apart from visual impairment)
    • Home or Personal Entertainment (for e.g. story reading
    • Reading stuff while travelling. For instance, listening to the newspapers clips while driving a car.
    • Situations where printed material is not available

    The main feature that makes the aural presentation of the website data possible, is a special program called the ‘Screen Reader’.

    For getting the website data to read itself out, the aural style first converts the web-page content into plain text. This plain text is then sent to the screen reader program that helps in the reading part.

    Here’s a list of some useful Aural properties:

    • azimuth: It gives the origin direction for the sound. You can program the sound to appear to be coming from left, right, behind, center etc.
    • pause: Helps setting pause before or after reading an element’s content.
    • speak: Helps you pick and choose the content that you want to be read out. You can also set it to spelling-out the content instead of speaking the words.
    • volume: The speaking volume can be altered using this property.
    • stress: You can stress upon a certain part of the speech using this property. With the help of correct combinations of volume and stress properties, you can make the content read naturally.

    CSS Display

    When it comes to layout, display property holds a crucial place in CSS. If break it to the bare essentials, display property simply specifies how the element will be displayed. The default value for this property varies (either block or inline) element to element.

    We will now take a look at the possible values for this property and the elements associated with them.
    The possible values for display property are:

    • block-level
    • inline
    • none

    block-level

    If an element is block-level it is bound to start on a new line. It takes up all the available width by stretching up on both the sides horizontally.
    Following are some block-level elements:
    • <div>
    • <h1> – <h6>
    • <p>
    • <form>
    • <header>
    • <footer>
    • <section>

    inline

    So, the phrase “in line” is what sums up the working of these type of elements. Inline elements stay in the same line and thus take up only the necessary space instead of stretching out to take the whole width.
    Following are some popularly used inline elements:

    • <span>
    • <a>
    • <img>

    none

    When given the value ‘none’display property hides the element. This is generally done with some javascript code or some other CSS rule to make the element hide and appear at specific situations.

    Override the Default Display Value

    So now we know the permissible values for the display property and also the elements that have these values set by default. But these default values can be overridden if required. For eg. the <li> tag is block type by default but can be changed to inline for horizontal menus.

    The point to be noted here is that the changing of the display value will only change how the elements are displayed on the screen and not their type. So, even if an inline element is set for inline display, it cannot contain other elements like an actual block type element.

    CSS Grid Layout

    The Grid Layout in CSS provides us a grid or table like page layout with rows and columns.

    The layout is very handy when you want to avoid positioning and floats. Unlike, the website layout, the grid layout doesn’t have a fixed number of sections and is flexible as per the requirements.

    The general layout contains a parent element with multiple child elements.

    Display Property

    To make any HTML element a grid container, you just have to set the display property to ‘inline-grid’ or simply ‘grid’. The grid container will be the parent element and its child elements will be termed as grid items.

    Grid Gaps

    The vertical line formed by the grid items is called the grid column and the horizontal one is known as the grid row.

    The spaces between the consecutive grid columns or rows is called a grid gaps. CSS allows us to alter the grid gaps for better presentation of the web-page. For this purpose, we have following four properties:

    • grid-column-gap: Adjusting the gaps for grid columns.
    • grid-row-gap: Adjusting the gaps for grid rows.
    • grid-gap: Shorthand property. Two values can be given for column and row respectively or s single value can also be given for both
    • grid-template-columns

      You can define the number of columns of your grid, using this property. It also helps us to set the column widths. Values are given in space separated list of width for respective columns.

      You can give specific length values for the width or ‘auto’ to equally divide the width of the grid container.

      grid-template-rows

      Similar to grid-template-column, this property can be used to define the heights of the grid-rows.

      justify-content

      This property gets you the whole grid aligned inside the grid container.

      align-content

      This property is for the vertical alignment of the grid inside the grid container.

    CSS Specificity

    Sometimes some CSS rules might conflict with each other due to the same target element. The browser, in this case, has some set of rules that it can used to decide the wined among the two (or more) rules. This issue resolving the set of rules is known as Specificity.

    It is like a score/rank that helps the browser determine the winning style declaration for an element. For example a universal selector (*) is treated with lower priority than the ID selectors.

    Specificity Hierarchy

    The selectors are divided into 4 categories to get their place decided in the specificity hierarchy.

    • Inline styles – Any styling has done directly to the target element is treated as an inline style. For eg <h1 style= “color: red”>
    • IDs – This is done by specifying the ID instead of the inline styling.
    • Classes, attributes, and pseudo-classes – There can be user-defined or in-built classes or pseudo-classes that are styled and later used by the elements that want to use this style.
    • Elements and pseudo-elements – Instead of styling the specific elements inline, we style the generic element or pseudo-element.

    Calculating Specificity

    Here’s how you calculate specificity:
    You start with initial value as 0 now add the following points for each kind of styling:

    • Inline Styling: 1000 Points
    • ID styling: 100 Points
    • Attribute, class, pseudo-class: 10 points
    • Generic Element, pseudo-element: 1 point

    Thus at the time of conflict, any rule with the greatest specificity value, will be applied to the target element.
    Specificity Rules

    • Latest rule counts: In case two rules have equal specificity, the latest rule i.e. the rule that comes latter in the style sheet will be followed.
    • ID and Attribute: The ID selector is represented by a # before the id. The attribute selector can also style on the basis of id by specifying the id attribute but since the ID selector has a higher specificity, it will prevail.
    • Contextual selectors and Single element selector: The style rules present within the HTML document (under the <style> tag) will have more specificity than any external style sheet.

    CSS Dropdowns

    Dropdown menus are great for forms and navigation list when you have to pick from a list. The traditional dropdowns included a special button, on clicking which you get a list of options to select from. CSS has although made things easy for us. With the help of CSS properties, we can create hoverable dropdowns.

    CSS allows us to get the dropdown list without clicking any buttons. All you have to do is hover over the ‘dropdown menu’ and the list will appear on its own. This is called a hoverable drop down. To create one, here are three things that we’ll surely need:

    • Opening Element: This will serve as the drop-down button. You can use any HTML element like a <span> or a <button> etc. for this purpose. A small text like “Select Any One” or “Move the mouse here” etc. will help to highlight this button. You an wrap a <div> around it for better positioning
    • List: The dropdown list will appear with the help of two user defined classes:
      • .dropdown: This will help keeping the position: relative to ensure that the list is right below the dropdown button. The display property can also be set to inline-block for the same purpose
      • .dropdown-content: This will be the child element for the .dropdown class and will appear only on hovering the mouse over a dropdown class element. The dropdown-content class will define the space for the dropdown list with the position: absolute.
    • :hover: This is the most important part. We will set a descendant selector for dropdown:hover and dropdown-content (hover selector) which will ensure that the dropdown content appears only when you hover over the dropdown button.
    • Dropdown Menu

      We can use the dropdown in the menu/navigation bar. User will just have to hover over the menu title and the related page-link will appear on their own.

      Right-aligned Dropdown Content

      If you add right: 0, you can get the dropdown menu content going from right to left (right aligned)
      Apart from this, dropdown feature can also be used with images to show different version of a thumbnail or for a zoomed in image.