Web Basics Episode 2: Introduction to CSS

Introduction

In this series, I will try to discuss Web Basics Topics. In the first episode, the HTML Basics were covered. In this episode, I will try to cover the Basic CSS Concepts.

Table of Contents

What is CSS?

CSS (Cascading Style Sheets) is the language for describing the presentation of Web pages, including colours, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. Moreover, CSS saves a lot of work by allowing us to control the layout of multiple web pages all at once.

CSS Example

This is an example of an CSS file.

body  {  
background-color:  lightblue;
font-family:  verdana;  
font-size:  20px;  
}  

h1  {  
color:  white;  
text-align:  center;  
}  

In this example, we define the backgound-color of the body to light blue, with a font-family of verdana with 20px font-size. Now for the h1 headers, we define the color (text color) white and align the text centrally using text-align.

CSS Selectors

A CSS selector helps us selecting the HTML element(s) we want to style.

We can divide CSS selectors into five categories:

• 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

CSS Selectors Examples

• CSS Element Selector

p {  
text-align:  center;  
color:  red;  
}

Here all <p> (paragraph) elements are styled.

• CSS ID Selector

#section-intro {  
text-align:  center;  
color:  red;  
}

Here HTML element with ID section-intro is styled.

• The CSS Class Selector

.center {  
text-align:  center;  
color:  red;  
}

Here all HTML elements with class name center is styled.

• The CSS Universal Selector

For universally selecting all HTML elements on the page, the following code is used.

* {  
text-align:  center;  
color:  blue;  
}

Ways of adding CSS to our HTML file

There are three ways of inserting a style sheet:

• External CSS
• Internal CSS
• Inline CSS

CSS Box Model

The CSS box model is a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

CSS display property

The display property specifies the display behavior of an element.

Usage:

.class-name{
display: block;
}

inline

Displays an element as an inline element. Any height and width properties will have no effect on it. Moreover, inline elements are forced to stay on the same line. Here are a few elements that have a default inline property:

• span
• a
• img

inline-block

Displays an element as an inline-level block container. You can set height and width values. It’s essentially the same thing as inline, except that we can set height and width values.

block

The element block starts on a new line and takes up the full width available. So that means block elements will occupy the entire width of its parent element.

Here are a few elements that have a default block property:

• div
• h1
• p
• li
• section

CSS Position Property

The position property specifies the type of positioning method used for an element. For example, static, relative and absolute

• 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: absolute;

  • An element with position: absolute; is positioned relative to the nearest positioned ancestor.
  • If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
  • Absolute positioned elements are removed from the normal flow, and can overlap elements.

CSS Structural Classes

Structural pseudo classes allow access to the child elements present within the hierarchy of parent elements. We can select first-child element, last-child element, alternate elements present within the hierarchy of parent elements.

Some Structural class examples

CSS Specificity

Sometimes, CSS rules conflict. For example, if multiple selectors target the same element in a document, the rules to be applied is determined by CSS specificity. In CSS, different selectors have varying weights. When two or more rules conflict on the same element, the more specific one applies.

These are the Specificity priority of different selectors

1. Inline CSS: Inline CSS appears as style attributes in the opening tag of HTML elements. Since this CSS is closest to the HTML, it has the highest level of specificity.

2. ID selectors: An ID is unique to a page element and thus, very specific.

3. Class selectors, attribute selectors, and pseudo-class selectors: These three selector types have equal specificity. If all three types are applied to the same HTML element, the one appearing latest in the style-sheet will apply and override the rest.

4. Type selectors: These select all HTML elements that have a given node name and have the syntax element. These are element names and pseudo-elements.

CSS Media Query

Media Query is very helpful in creating responsive web designs which works well with all types of devices. It uses the @media rule to include a block of CSS properties only if a certain condition is true.

@media only screen and (max-width: 600px) {  
body {  
background-color: lightblue;  
}  
}

In the above example, if the browser window is 600px or smaller, we set the background-color to lightblue.

While developing web pages, it is advised to create the mobile version first before other screen sizes.

Conclusion

That concludes the Introduction to CSS topic.

References

CSS Basics w3schools

Box Model

CSS display property

Structural Classes

CSS Specificity