CSS Basics – ElimuTech LMS

Protected: Web Development Bootcamp: Master HTML, CSS, and JavaScript in 3 Weeks

About Lesson

1. CSS Basics: An Introduction to Styling Web Pages

Cascading Style Sheets (CSS) is a language used to describe the presentation (styling) of a web page written in HTML. It allows you to define the look and feel of your website, including layout, colors, fonts, spacing, and much more.

In this section, we’ll cover the basic concepts and syntax of CSS, providing the foundation for styling web pages.

1. What is CSS?

CSS is used to control the layout and style of web pages. It allows you to separate the structure (HTML) from the presentation (CSS). This makes web development easier, as you can apply consistent styles across multiple pages without repeating your code.

2. CSS Syntax

CSS is composed of selectors and declarations:

Selector: The HTML element(s) that you want to style.
Declaration: Defines what aspect of the element should be styled (such as color, size, margins, etc.).

A CSS rule is written in the following structure:

selector {
  property: value;
}

Example:

p {
  color: blue;
  font-size: 16px;
}

In the above example:

p is the selector (targeting all <p> elements).
color: blue; is the declaration, which sets the text color of the paragraphs to blue.
font-size: 16px; is another declaration that sets the font size to 16 pixels.

3. How to Include CSS in an HTML Document

There are three main ways to include CSS in an HTML document:

a. Inline CSS

You can add styles directly to an HTML element using the style attribute. This method applies styles to a single element.

<p style="color: blue; font-size: 16px;">This is a styled paragraph.</p>

b. Internal CSS

Internal CSS is defined within the <style> tag in the <head> section of your HTML document. This method allows you to style multiple elements within the same page.

<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>

c. External CSS

External CSS is written in a separate .css file and linked to the HTML document using the <link> tag. This is the most efficient way to style websites, as it keeps the HTML and CSS separate, and you can apply the same styles to multiple pages.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

In the styles.css file:

p {
  color: red;
  font-size: 14px;
}

4. CSS Selectors

Selectors are used to target HTML elements that you want to style. Some common selectors include:

Universal Selector (*): Selects all elements in the document.
```
* {
  margin: 0;
  padding: 0;
}
```
Type Selector (element name): Targets all elements of a specific type (like all <p> elements).
```
p {
  color: purple;
}
```
Class Selector (.classname): Targets all elements with a specific class attribute. It’s preceded by a dot (.).
```
.button {
  background-color: blue;
  color: white;
}
```
ID Selector (#idname): Targets an element with a specific id attribute. It’s preceded by a hash (#).
```
#header {
  font-size: 24px;
  text-align: center;
}
```
Descendant Selector (parent child): Targets elements that are descendants of a specific parent.
```
div p {
  color: gray;
}
```
Group Selector (comma-separated): Targets multiple elements at once.
```
h1, h2, h3 {
  color: darkblue;
}
```

5. CSS Properties

CSS uses a range of properties to define how elements should be styled. Here are some commonly used properties:

Color & Background
- color: Defines the text color.
- background-color: Sets the background color of an element.
- background-image: Sets an image as the background.
```
p {
  color: red;
  background-color: lightyellow;
}
```
Text & Font
- font-family: Specifies the font type.
- font-size: Defines the size of the font.
- font-weight: Sets the thickness of the font (e.g., bold).
- line-height: Adjusts the spacing between lines of text.
```
p {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}
```
Box Model (Layout):
- margin: Sets the space outside of an element (distance between the element and surrounding elements).
- padding: Sets the space inside the element (distance between the element content and its border).
- border: Defines the border of the element.
```
div {
  margin: 10px;
  padding: 20px;
  border: 1px solid black;
}
```
Positioning
- position: Specifies the positioning of an element (e.g., static, relative, absolute, fixed).
- top, right, bottom, left: Define the position of an element in relation to its nearest positioned ancestor.
```
.box {
  position: absolute;
  top: 20px;
  left: 30px;
}
```
Display & Visibility
- display: Defines how an element is displayed (e.g., block, inline, flex, grid).
- visibility: Specifies whether an element is visible or not.
```
.hidden {
  visibility: hidden;
}
```

6. CSS Layout Techniques

There are several techniques to control the layout of elements on a web page:

Flexbox: A layout model that allows you to create flexible and responsive layouts with ease. Flexbox distributes space along a single axis.
```
.container {
  display: flex;
  justify-content: space-between;
}
```
CSS Grid: A more advanced layout system that allows for two-dimensional layouts (both rows and columns).
```
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
```

7. CSS Responsiveness

Creating responsive designs ensures your web page adapts to different screen sizes, such as desktop, tablet, or mobile. Use media queries to apply different styles based on the device’s screen width.

@media (max-width: 600px) {
  p {
    font-size: 14px;
  }
}

This will change the font size of paragraphs to 14px when the screen width is 600px or less.

8. Conclusion

CSS is a powerful tool for controlling the appearance of a website. With the basics of CSS, you can start styling your web pages and creating beautiful, responsive designs. As you progress, you’ll learn more advanced topics like animations, transitions, and CSS preprocessors (e.g., SASS).

2. Inline, Internal, and External CSS

In CSS, there are three main ways to apply styles to an HTML document: Inline, Internal, and External. Each method has its specific use cases depending on the needs of the website.

1. Inline CSS

Inline CSS is used when you apply styles directly to an individual HTML element using the style attribute. This method is useful when you want to style a single element without affecting others.

Example:

<p style="color: red; font-size: 20px;">This is an inline styled paragraph.</p>

Pros: Quick and easy for small changes.
Cons: Not efficient for large projects, as it requires repeating styles for each element.

2. Internal CSS

Internal CSS is defined inside the <style> tag within the <head> section of the HTML document. This method is useful when you want to style elements within a single page, without affecting other pages.

Example:

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is an internally styled paragraph.</p>
</body>

Pros: Easy to apply styles within one page.
Cons: Doesn’t work well for multiple pages; repeating styles across pages would require copying the same styles into each HTML document.

3. External CSS

External CSS is written in a separate .css file and linked to the HTML document using the <link> tag in the <head> section. This is the most common and efficient way of styling large websites, as it separates the content (HTML) from the styling (CSS).

Example:

HTML:

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This is an externally styled paragraph.</p>
</body>

styles.css:

p {
  color: green;
  font-size: 22px;
}

Pros: Efficient and scalable for large websites, as styles are centralized.
Cons: Requires an extra HTTP request to load the CSS file.

3. Selectors, Properties, and Values

CSS uses a combination of selectors, properties, and values to style HTML elements.

1. Selectors

A selector is used to target the HTML element(s) you want to style. Some common types of selectors include:

Element Selector: Targets elements based on their type.
```
h1 {
  color: blue;
}
```
Class Selector: Targets elements with a specific class attribute. Prefixed with a dot (.).
```
.important {
  font-weight: bold;
}
```
ID Selector: Targets an element with a specific id attribute. Prefixed with a hash (#).
```
#header {
  background-color: gray;
}
```
Universal Selector: Targets all elements on the page.
```
* {
  margin: 0;
}
```
Attribute Selector: Targets elements based on their attributes.
```
input[type="text"] {
  background-color: yellow;
}
```

2. Properties

A property defines what aspect of an element you want to style. Common properties include:

color: Sets the text color.
font-size: Sets the font size.
background-color: Sets the background color of an element.
border: Sets the border of an element.
margin: Adds space outside an element.
padding: Adds space inside an element.

3. Values

A value defines how the property is applied. It can be a specific color, size, length, or keyword.

For example:

h1 {
  color: red; /* value = 'red' */
  font-size: 24px; /* value = '24px' */
  margin: 10px; /* value = '10px' */
}

4. Styling Text: Colors, Fonts, Sizes

Here’s a closer look at how to style text using colors, fonts, and sizes.

1. Styling Colors

CSS allows you to specify colors in different formats: by name, RGB, HEX, or HSL.

a. Color by Name

p {
  color: red;
}

b. Color using HEX

HEX values are a way to define colors using six digits, starting with a hash (#), followed by three pairs of hexadecimal digits representing the red, green, and blue (RGB) components.

p {
  color: #ff5733; /* orange-red */
}

c. Color using RGB

RGB stands for Red, Green, Blue. Each value can range from 0 to 255, where 0 means no color and 255 means full intensity.

p {
  color: rgb(255, 0, 0); /* Red */
}

d. Color using HSL

HSL stands for Hue, Saturation, Lightness. The hue is a degree on the color wheel, saturation is a percentage, and lightness is a percentage.

p {
  color: hsl(0, 100%, 50%); /* Red */
}

2. Styling Fonts

CSS allows you to change the font of your text using the font-family property. You can specify multiple fonts to create a fallback system in case the preferred font is unavailable.

p {
  font-family: "Arial", sans-serif;
}

Common Font Properties:

font-size: Specifies the size of the text. You can use values like px, em, %, etc.
```
p {
  font-size: 16px;
}
```
font-weight: Specifies the thickness of the text (e.g., normal, bold, lighter).
```
p {
  font-weight: bold;
}
```
font-style: Specifies whether the font is normal, italic, or oblique.
```
p {
  font-style: italic;
}
```

3. Styling Text Sizes

Text size can be adjusted using the font-size property. Here are different ways to specify the size:

a. Pixels (px)

px is the most common unit for font size, providing precise control over text size.

h1 {
  font-size: 32px;
}

b. Em (em)

em is a relative unit. It is based on the font size of the parent element.

p {
  font-size: 1.5em; /* 1.5 times the size of the parent element's font size */
}

c. Percentage (%)

Percentages are relative to the parent element’s font size.

h1 {
  font-size: 120%; /* 120% of the parent element's font size */
}

4. Combining Text Styling

You can combine multiple text styling properties together for more refined control.

h1 {
  font-family: "Arial", sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: #333;
}

By mastering these basic CSS concepts, you’ll be able to style your text effectively and make your website visually appealing. CSS is all about flexibility and creativity, so experimenting with different properties and values will allow you to create unique designs!

Exercise Files

css basics.mp4

Size: 22.75 MB