Muhammad Sufiyan's Blog

Week 6: Advanced CSS (Batch 12)

Muhammad Sufiyan's photo
Muhammad Sufiyan
·

6 min read

In Week 6, we delved deeper into CSS by exploring chapters 12, 13, 14, and 15 from Jon Duckett's "HTML and CSS: Design and Build Websites." Below is an in-depth and comprehensive documentation of the key concepts covered, along with detailed examples.

Chapter 12: Text

Key Concepts:

  1. Font Properties:

    • font-family: Specifies the font for an element.

    • font-size: Sets the size of the font.

    • font-weight: Defines the thickness of the text (e.g., normal, bold).

    • font-style: Sets the style of the text (e.g., normal, italic).

    • font-variant: Displays text in a small-caps font.

Example:

p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  font-variant: small-caps;
}

  1. Text Properties:

    • color: Sets the color of the text.

    • text-align: Aligns the text horizontally (left, right, center, justify).

    • text-decoration: Adds decoration to text (none, underline, overline, line-through).

    • line-height: Sets the space between lines of text.

    • letter-spacing: Adjusts the space between characters.

    • text-transform: Controls the capitalization of text (uppercase, lowercase, capitalize).

    • text-shadow: Adds shadow to the text.

Example:

h1 {
  color: #333;
  text-align: center;
  text-decoration: underline;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px #aaa;
}

  1. Text Indentation and Spacing:

    • text-indent: Indents the first line of text in an element.

    • word-spacing: Adjusts the space between words.

    • white-space: Specifies how white space inside an element is handled.

Example:

p {
  text-indent: 30px;
  word-spacing: 2px;
  white-space: nowrap;
}

Chapter 13: Boxes

Key Concepts:

  1. Box Model:

    • width and height: Set the dimensions of the content area.

    • padding: Space inside the element, between the content and the border.

    • border: Adds a border around the element.

    • margin: Space outside the element, creating distance between it and other elements.

    • box-sizing: Defines how the width and height of an element are calculated (content-box, border-box).

Example:

div {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 2px solid #000;
  margin: 10px;
  box-sizing: border-box;
}

  1. Display Property:

    • display: Specifies the display behavior of an element (block, inline, inline-block, none).

Example:

span {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: #f2f2f2;
}

  1. Visibility and Overflow:

    • visibility: Specifies whether an element is visible or hidden.

    • overflow: Controls what happens to content that overflows an element's box (visible, hidden, scroll, auto).

Example:

div {
  visibility: hidden;
}
.container {
  width: 200px;
  height: 100px;
  overflow: scroll;
}

Chapter 14: Lists, Tables, and Forms

Key Concepts:

  1. Lists:

    • Types of Lists:

      • ul (unordered list): List items with bullet points.

      • ol (ordered list): List items with numbers.

      • li (list item): Items within ul or ol.

Example:

ul {
  list-style-type: disc;
  list-style-position: inside;
}
ol {
  list-style-type: decimal;
  list-style-position: outside;
}
li {
  margin: 5px 0;
  padding-left: 10px;
}

  1. Tables:

    • Table Structure:

      • table: Defines the table.

      • tr (table row): Defines a row in the table.

      • td (table data): Defines a cell in the table.

      • th (table header): Defines a header cell in the table.

    • Styling Tables:

      • border-collapse: Collapses the table borders into a single border.

      • border-spacing: Sets the space between the borders of adjacent cells.

      • table-layout: Defines the algorithm used to lay out the table cells, rows, and columns.

Example:

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #000;
  padding: 10px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}

  1. Forms:

    • Form Elements:

      • input: Defines an input field (text, password, email, number, etc.).

      • textarea: Defines a multi-line input field.

      • label: Defines a label for an input element.

      • select and option: Define a drop-down list.

      • button: Defines a clickable button.

    • Styling Forms:

      • field-set: Groups related elements within a form.

      • legend: Adds a caption for a fieldset.

      • input[type="text"], input[type="password"], etc.: Style specific input types.

Example:

form {
  display: flex;
  flex-direction: column;
  width: 300px;
}
input, textarea, select, button {
  margin: 10px 0;
  padding: 10px;
  font-size: 16px;
}
fieldset {
  border: 1px solid #000;
  padding: 10px;
}
legend {
  font-weight: bold;
}

Chapter 15: Layout

Key Concepts:

  1. Positioning Elements:

    • static: Default position; elements are positioned according to the normal flow of the document.

    • relative: Positioned relative to its normal position.

    • absolute: Positioned relative to the nearest positioned ancestor.

    • fixed: Positioned relative to the browser window.

    • sticky: Toggles between relative and fixed, depending on the scroll position.

Example:

.relative {
  position: relative;
  top: 10px;
  left: 10px;
}
.absolute {
  position: absolute;
  top: 50px;
  left: 50px;
}
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
.sticky {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
}

  1. Float and Clear:

    • float: Allows elements to float to the left or right of their container.

    • clear: Specifies which sides of an element other floating elements are not allowed.

Example:

.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
}
.clear {
  clear: both;
}

  1. Flexbox:

    • A layout module that allows for the design of flexible and efficient layouts.

    • display: flex: Defines a flex container.

    • flex-direction: Defines the direction of the flex items (row, column).

    • justify-content: Defines the alignment along the main axis.

    • align-items: Defines the alignment along the cross axis.

    • flex-wrap: Specifies whether the flex items should wrap or not.

Example:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
}

Summary

This week's focus was on understanding advanced aspects of CSS to create more complex and visually appealing web pages. The students learned how to style text, manipulate the box model, create structured

lists, tables, and forms, and manage layouts using various positioning techniques, and Flexbox.

Practical Exercises

  1. Styling a Facebook kind Social Media Posts Page:

    • Create an HTML page for social media posts and style it using the text properties learned.

    • Include headers, paragraphs, and links, and apply different font properties and text decorations.

  2. Designing a Post Card:

    • Use the box model properties to design a post card.

    • Add padding, margin, borders, and background colors to make it visually appealing.

  3. Creating a Attractive Signup Login Form:

    • Create a form with different input types and style it using the form properties.

    • Ensure the form is attractive and looks good.

  4. Building a Flexbox Layout:

    • Create a webpage layout using Flexbox.

    • Arrange elements in rows and columns, and practice aligning and justifying content.

for inspiration and example
https://facebookreacttt.web.app/

Feel free to experiment with these concepts and examples to reinforce your understanding of advanced CSS. Happy coding!

HTML5CSS