An Introduction to CSS: Understanding the Basics of Stylesheet Language

What is CSS (Cascading Style Sheets)?

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the look and formatting of a document written in HTML. Specifically, it is used to add style and layout to web pages, and can even be used to control the appearance of multiple pages at once.

One of the main benefits of using CSS is that it allows you to separate the content of your web pages (written in HTML) from the presentation of that content. As a result, it becomes easier to maintain and update your website, as you can change the look and feel of all the pages on your site by updating a single CSS file.

In this tutorial, we will cover the basics of CSS, including how to add CSS to your HTML documents, how to select elements to style, and how to apply styles to those elements.

How does CSS work?

In order to apply styles to elements in an HTML document, CSS utilizes selectors and declarations. Specifically, an element is a piece of HTML code that defines a part of a web page, such as a paragraph, a heading, or a list

CSS works by applying styles to elements in an HTML document. An element is a piece of HTML code that defines a part of a web page, such as a paragraph, a heading, or a list.

To apply a style to an element, you use a selector to select the element and a declaration to describe the style you want to apply. Specifically, the declaration consists of a property and a value, separated by a colon. For example, to make all the paragraphs in an HTML document red, you would use the following CSS code:

Getting Started

Where do I put my CSS code?

To use CSS, you can either include it directly in your HTML file or link to an external style sheet. Let’s take a look at an example of both methods.

• Inline styles: You can add styles directly to an HTML element using the style attribute. This method is not recommended, as it mixes content and presentation and can make your HTML difficult to read.
  
• Internal styles: You can add a style element to the head of your HTML document, and add your styles inside of it. This method is only recommended if you have a small number of styles, as it can become difficult to manage if you have a lot of styles.
  
• External stylesheets: You can create a separate CSS file and link to it from your HTML document using the link element in the head of your HTML document. This is the recommended method, as it allows you to keep your CSS in a separate file, making it easier to maintain and update.
  

CSS Syntax

A CSS rule is made up of a selector and a declaration block. Specifically, the declaration block consists of one or more declarations, separated by semicolons. Additionally, each declaration consists of a property and a value, separated by a colon.

Here is an example of a CSS rule with two declarations:

CSS Colors

CSS supports a wide range of colors, which can be specified in several different ways.

Hexadecimal Colors

Hexadecimal colors are specified with a “#” followed by six hexadecimal digits, representing the red, green, and blue (RGB) values of the color. For example, the following code specifies a red color:

color: #ff0000;

RGB Colors

RGB colors can be specified using the “rgb()” function, which requires three values to represent the red, green, and blue values of the color. The values can be either integers (0-255) or percentages (0-100%). For example, the following code specifies a red color:

color: rgb(255, 0, 0);

Predefined Colors

CSS also includes a set of predefined colors that can be used by name. For example, the following code specifies a red color:

color: red;

CSS Fonts

CSS allows you to control the font properties of an element, such as its family, size, and style.

Font Family

The font-family property specifies the font to be used for an element. You can specify a list of fonts, and the browser will use the first one that is available on the user’s computer. For example:

font-family: Arial, sans-serif;

Font Size

The font-size property specifies the size of the font. You can specify the size in pixels (px), points (pt), or as a percentage of the parent element’s font size. For example:

font-size: 18px;

Font Style

The font-style property specifies the style of the font. The possible values are “normal”, “italic”, and “oblique”. For example:

font-style: italic;

Selecting Elements to Style

In CSS, you can select elements to style using element names, class names, or IDs.

1. Element names: You can select all elements of a certain type by using the element name. For example, to select all paragraphs, you can use the p selector.
   
2. Class names: You can select elements based on their class name by using the . symbol followed by the class name. You can apply a class to an element using the class attribute. Multiple elements can have the same class.
   
3. IDs: You can select elements based on their ID by using the # symbol followed by the ID. You can apply an ID to an element using the id attribute. IDs are defined using the id attribute, and can only be applied to one element. For example:

Applying Styles to Elements

Once you have selected the elements you want to style, you can apply styles to them using the following syntax:

For example, to change the font size of all paragraphs to 14px, you can use the following rule:

You can also apply multiple styles to an element by separating each property-value pair with a semicolon:

CSS Attributes

There are many different attributes that you can use in CSS, including:

• font-size: sets the size of the text
• color: sets the color of the text
• font-family: sets the font of the text
• background-color: sets the background color of an element
• width: sets the width of an element
• height: sets the height of an element
• margin: sets the space around an element
• padding: sets the space inside an element
• border: sets a border around an element

Here is an example of using multiple attributes in a CSS rule:

In this example, we are setting the font size, color, background color, width, margin, padding, and border of all h1 elements on the page.

CSS Units

There are several different units you can use when specifying values in CSS. Some common units include:

• px (pixels): used for specifying sizes of elements on the screen.
• em (font size): used for specifying sizes relative to the font size of the element.
• % (percentage): used for specifying sizes relative to the parent element.

CSS Inheritance

In CSS, certain properties are inherited by child elements from their parent elements. This means that if you set a property on a parent element, it will be applied to all of its child elements as well.

For example, if you set the font-family property on the body element, it will be inherited by all of the text elements within the body.

This can be useful for setting default styles for your entire website, but it can also make it more difficult to override inherited styles for specific elements.

CSS Specificity

Sometimes, you may have multiple rules that apply to the same element. In this case, the browser will use the most specific rule to determine which styles to apply.

For example, if you have the following two rules:

And the following HTML:

The second rule will be used, because the .red class selector is more specific than the p element selector.

CSS Box Model

The CSS box model is a concept that describes the way that HTML elements are represented on the web. Every element on a web page is represented as a box, with the element’s content, padding, border, and margin all being part of the box.

Content

The content of the box is the element’s content, such as text or images.

Padding

The padding of the box is the space between the content and the border. You can control the padding with the padding property.

Border

The border of the box is a line around the content and padding. You can control the border with the border property.

Margin

The margin of the box is the space between the border and the other elements on the page. You can control the margin with the margin property.

CSS Layout

CSS includes several layout properties that allow you to control the position and size of elements on the web page.

Float

The float property allows you to float an element to the left or right of its parent element, with the other elements flowing around it. For example:

img {
float: left;
}
This will cause the image to float to the left of its parent element, with the other elements flowing around it.

Display

The display property allows you to control the way an element is displayed on the page. The possible values are “block”, “inline”, “inline-block”, and “none”. For example:

div {
     display: block;
}

This will cause the div element to be displayed as a block-level element, taking up the full width of its parent element and causing a line break before and after it.

Position

The position property allows you to control the position of an element on the page. The possible values are “static”, “relative”, “absolute”, and “fixed”. For example:

This will cause the div element to be positioned absolutely, with the top edge 10 pixels from the top of the page and the left edge 20 pixels from the left of the page.

Conclusion

This has been a brief introduction to CSS. There are many more concepts and techniques to learn, but this should give you a good foundation to build upon. With CSS, you can add style and layout to your web pages, making them more visually appealing and user-friendly.

CSS is a very large and complex language, with many more features and possibilities than what I have described here.

Here are a few more topics that you might want to explore:

• Pseudo-classes and pseudo-elements: These allow you to apply styles to elements based on their state (such as :hover for hover effects) or their position in the document (such as ::before and ::after).
• Responsive design: CSS media queries allow you to apply different styles to elements based on the size and orientation of the screen. This is essential for creating websites that look good on a wide range of devices.
• Animations and transitions: CSS transitions and animations allow you to create smooth, animated effects on web pages.
• Flexbox and Grid: CSS Flexbox and Grid are modern layout systems that allow you to create complex and responsive layouts with ease.
• Preprocessors: CSS preprocessors such as Sass and Less allow you to use advanced features and syntax in your CSS, and then compile them into standard CSS that browsers can understand.