Introduction to CSS: Essential Techniques for Web Development

April 25, 2023

Introduction

Have you ever wondered how websites look so different and attractive? How do they create animations and transitions that make them more interactive and engaging? The answer is CSS!, CSS stands for Cascading Style Sheets. CSS allows you to control the appearance and layout of your web pages, such as the color, font, size, spacing, alignment, and position of your content. CSS also enables you to create responsive design to different screen sizes and devices.

Let’s get started!

Basic syntax: CSS is composed of rules that tell the browser how to display HTML elements. A CSS rule consists of two parts: a selector and a declaration.

A selector is a pattern that matches one or more HTML elements. For example, p is a selector that matches all <p> elements in the document.

You can also use classes and IDs to target specific elements.

  • A class is a name that you can assign to one or more elements using the class attribute. For example,  <p class=“intro”> is an element with a class name of intro. You can use a dot (.) followed by the class name as a selector to match all elements with that class. For example, .intro is a selector that matches all elements with a class name of intro.
  • An ID is a unique name that you can assign to one element using the id attribute. For example, <p id=“main”> is an element with an ID name of main. You can use a hash (#) followed by the ID name as a selector to match the element with that ID. For example, #main is a selector that matches the element with an ID name of main.


.into{
    color: aliceblue;
}
#main{
    color: aqua;
}
  • Declaration is a block of one or more properties and values that define how the selected
    elements should be styled.
  • Property is a name that specifies an aspect of the element’s appearance, such as color, font-size, margin, etc.
  • Value is a specific setting for the property, such as red, 16px, 10px, etc.
  • Declaration must be enclosed in curly braces ({}) and each property-value pair must be
    separated by a colon (:) and end with a semicolon (;) .

For example:



p { color: red; font-size: 16px; margin: 10px; }

This declaration sets the color, font-size, and margin properties for all <p> elements in the document.

Linking the style.css file to the HTML document:

To link a CSS file to an HTML document, you need to use the <link> element in the <head> section of the document. The <link>  element has two attributes: rel and href. The rel attribute specifies the relationship between the HTML document and the linked file. In this case, it should be set to “stylesheet”. The href attribute specifies the URL or path of the CSS file.

For example:



<head> <link rel=“stylesheet” href=“style.css”> </head>

The cascade and inheritance:

CSS stands for Cascading Style Sheets because it applies rules in a cascading order. This means that if there are multiple rules that match the same element, the browser will apply the rule that has the highest priority or specificity. The priority or specificity of a rule depends on several factors. A example; p.intro has higher priority than p because it has two selectors (type and class) while p has only one selector (type). In case, if you have two rules that target the same element with the same selector, the rule that comes later will override the rule that comes earlier. To avoid conflicts and override styles, you should follow some best practices: Use classes and IDs sparingly and only when necessary. Avoid using ID selectors unless you need to target a unique element. Prefer using type selectors or class selectors over ID selectors. Use the !important keyword only as a last resort. The !important keyword overrides any other rule that matches the same element, regardless of its specificity or origin. This can make your code hard to maintain and debug. Use it only when you need to override a rule that you cannot modify or access .Organize your code in a logical and consistent way. Use comments to explain your code and separate different sections. Group related rules together and use indentation and spacing to make your code readable.

Inheritance is another feature of CSS that allows you to pass some properties from parent elements to child elements. For example, if you set the color property for the <body> element, all the elements inside the <body> element will inherit the same color, unless you specify a different color for them. Not all properties are inherited by default. Some properties, such as margin, padding, border, etc., are not inherited because they affect the layout of the element rather than its appearance. You can use the inherit value to explicitly inherit a property from the parent element.

For example:



p { margin: inherit; }

This will make all <p> elements inherit the margin property from their parent element.
You can also use the initial value to reset a property to its default value.

For example:



p { color: initial; }

This will make all <p> elements use the default color defined by the browser.

Inheritance can help you reduce code duplication and maintain consistency across your web pages. However, you should also be careful not to rely too much on inheritance, as it can make your code less flexible and harder to override. You should always test your web pages in different browsers and devices to ensure they look as intended.

Common properties and values:

CSS has a large number of properties and values that you can use to style and layout your web pages. In this section, we will introduce some of the most commonly used ones and show you how to use them to create different effects and layouts. You can find a complete list of all CSS properties and values in our CSS reference.

Color:

The color property sets the color of the text content of an element. You can specify a color using different formats, such as:

  • Keywords (e.g., red, blue, green)
  • Hexadecimal values (e.g., #ff0000, #00ff00, #0000ff)
  • RGB values (e.g., rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))
  • HSL values (e.g., hsl(0, 100%, 50%), hsl(120, 100%, 50%), hsl(240, 100%, 50%))
  • Alpha values (e.g., rgba(255, 0, 0, 0.5), hsla(0, 100%, 50%, 0.5))

For example:



p { color: red; }

This will make all <p> elements have red text.

Font:

The font property is a shorthand property that sets several font-related properties at once, such as font-family, font-size, font-weight, font-style, etc. You can also use these properties individually to set specific aspects of the font.

For example:



p { font: italic bold 16px Arial; }

This will make all <p> elements have italic, bold, 16px Arial font.

Margin:

The margin property sets the space outside the border of an element. You can use it to create gaps between elements or to centre an element horizontally. You can specify one, two, three, or four values for the margin property.

  • If you specify one value, it applies to all four sides.
  • If you specify two values, the first value applies to the top and bottom sides and the second
    value applies to the left and right sides.
  • If you specify three values, the first value applies to the top side, the second value applies to
    the left and right sides, and the third value applies to the bottom side.
  • If you specify four values, they apply to the top, right, bottom, and left sides in that order.

You can use different units for the margin values, such as pixels (px), percentages (%), ems (em), etc.

For example:



div { margin: 10px; }

This will make all <div> elements have a margin of 10px on all four sides.

Padding:

The padding property sets the space inside the border of an element. You can use it to create space around the content of an element or to increase the size of an element. You can specify one, two, three, or four values for the padding property. The values work the same way as the margin property.

For example:



div { padding: 20px; }

This will make all <div> elements have a padding of 20px on all four sides.

The difference between margin and padding is that margin affects the space outside the element, while padding affects the space inside the element. Margin can create gaps between elements or center an element horizontally, while padding can create space around the content or increase the size of an element.

Border:

The border-style property specifies what kind of border to display. Adding borders around elements on a web page is an important feature of web design.

Some example:



div { border : 4px solid red ; }

This will make all <div> elements have a border of 4pixels with solid lines and red in color.
Few more additive properties are as follow:



div { border-width : 4px;
border-style : dotted;
border-color : red;
border-radius : 5px; }

The radius property adds a curve at the corners of border. You may use more style like solid, inset,
groove or outset.

Display:

The display CSS property sets whether an element is treated as a block or inline element and
the layout used for its children, such as flow layout, grid or flex.



div { display : inline ; }
div { display : grid ; }
div { display : block ; }
div { display : flex ; }

Responsive design:

Responsive design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. Here are some examples of responsive design patterns and best practices in CSS:

  • Use relative units for font sizes, such as em or rem.
  • Use media queries to adjust layout based on screen size.
  • Use CSS Grid or Flexbox for layout.
  • Use responsive images that scale with the size of the viewport.
  • Use SVGs instead of raster images when possible.
  • Use a mobile-first approach when designing responsive websites.

Kumar Amit

View Profile View All Posts

Leave a Reply