CSS Basics and Selectors

Introduction

Welcome to the CSS!

In this lab, we'll step into the shoes of Alex, a budding web developer tasked with creating an engaging and stylish website for a new pet service. The goal is to showcase the services offered, introduce the team, and provide an easy way for potential clients to get in touch. The scene is set in a bustling city where pet ownership is on the rise, and the demand for quality pet care services is soaring. Alex's mission is to design a website that stands out in this competitive market by using fundamental CSS techniques and selectors to create a visually appealing and user-friendly experience.

Next we will go through 5 labs to complete the CSS for "Pet's House".

Skills Graph

CSS Selectors

We open a web page, press F12 on the keyboard to open the developer tools, we can see two parts, Elements and Styles.

If you have studied HTML, you should know that elements are the different HTML tags used for the layout of the page, while styles are the CSS of the page.

We can use CSS to change the colour, size, shape, etc. of HTML elements, as well as to animate them.

Knowing the usefulness of CSS, then we need to think about a problem, the page so many elements, how do we add a specific style to the specified location of the element?

We can use CSS selectors to select the elements we want to style, and then use the CSS property to specify the style we want to apply.

Let's start with the most basic CSS selector.

A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector.

There are many types of CSS selectors, and the most basic ones are:

• Type selectors
• Class selectors
• ID selectors
• Descendant Selector
• Universal Selector

Type selectors

If you need to set a uniform style for a certain type of tag on a page, you should use a tag selector, where the keyword of the tag selector is named after the tag.

For example, if you want to set the font color of all <p> tags on a page to red, you would use the following CSS rule:

Class selectors

When defining a class selector, you must define it with a period and a class name, and when using that class selector, you must add the attribute class="class-name" to the tag of the element that uses that class selector (without the period) to indicate that the tag uses the specified class selector.

For example, if you want to set the font size of an HTML element with class="text-paragraph" to 50 pixels, you would use the following CSS rule:

ID selectors

The id selector specifies a particular style for HTML elements marked with a particular id.

When defining an id selector, you must define the selector with a "#" sign and an id name, and when using the id selector, you must add the attribute id="id name" (without the "#" sign) to the HTML tag element to specify the id of that HTML element, which is unique in the HTML document.

For example, if you want to set the font color of an HTML element with id="list-option" to blue, you would use the following CSS rule:

Descendant Selector

The descendant selector selects all elements of a tag within the tag, including children and other descendants.

When using descendant selectors, the name of the parent tag and the name of the descendant tag must be separated by a space to identify the descendant elements within a tag.

For example, we set the text colour aqua for <span>, a child of the <div> element.

Universal Selector

The universal selector selects all elements in an HTML document.When using universal selectors, you must use a "*" sign to.

For example, let's set the text size to 50 pixels for all elements.

Now that we know how to use selectors, let's learn how to use different style attributes.

Background Color and Text Color

As you can see, different parts of the page have different background colours. In CSS, you can set the background colour of an element using background-color.

In the Pet website, the background colours in the header, about section, contact section, footer are rgb(233, 174, 87) and rgb(239, 206, 157), and the font colour in the about section, contact section, footer is #fff, so we need to set the background and font colours below.

• background-color is used to set the background colour.

• color is used to set the font colour.

header {
  background-color: rgb(233, 174, 87);
}
.story-sect {
  background-color: rgb(233, 174, 87);
  color: #fff;
}
.contact-section {
  background-color: rgb(233, 174, 87);
  color: #fff;
}
footer {
  color: #fff;
  background-color: rgb(239, 206, 157);
}

Height and Width

Now you can see that some of the elements are too big, such as the logo, and we use height to set the height of the element and width to set the width of the element.

.logo-section {
  width: 10%;
}
.logo {
  max-width: 60%;
}

.box-feature {
  width: 60%;
  max-height: auto;
}

.box-feature img {
  width: 100%;
}
.service {
  width: 100%;
  color: black;
}
.service img {
  max-width: 100%;
  max-height: auto;
}

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.

The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

List Style

The default style of an unordered list is that each list item has a period, we use the list-type property to remove the period before the list item.

ul {
  list-style: none;
}

Text Property

Text Decoration

The a element is underlined by default, and we use the text-decoration property to remove the underline.

a {
  color: grey;
  text-decoration: none;
}

Text Transform

The nav, footer, and title of each area on a pet page are all in uppercase, and we use the text-transform property to change the case of the text.

The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

h2 {
  text-transform: uppercase;
}
header {
  background-color: rgb(233, 174, 87);
  text-transform: uppercase;
}
footer {
  color: #fff;
  background-color: rgb(239, 206, 157);
  text-transform: uppercase;
}

Text Size

We use font-size to change the size of the text, as you can see the size of the text is different from the size of the pet page.

body {
  font-size: 1.2vw;
}
h1 {
  font-size: 4em;
}
h2 {
  font-size: 2.8vw;
  text-transform: uppercase;
}

When setting the font size, we use different units. There are usually five types of units, as follows:

Text Align

In the pet page, to center the title text, we can use the text-align property to set the position of the text display.

h1 {
  text-align: center;
  font-size: 4em;
}
section h2 {
  text-align: center;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
}
.section-text h2 {
  text-align: center;
}
.samples {
  text-align: center;
}
form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
}
footer span {
  text-align: center;
}

Text Weight

The font-weight property is used to set the weight of the text.

body {
  font-weight: 400;
  font-size: 1.2vw;
}
form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
}

Letter Spacing

On the pet page, we can observe that there is a certain amount of space between characters. By using the letter-spacing property, we can set the spacing between text characters.

The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text.

body {
  letter-spacing: 2px;
  font-weight: 400;
  font-size: 1.2vw;
}
form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
}

Summary

In this lab, you embarked on the journey of creating a website for "Pet's House" with Alex. You set up the project workspace, applied fundamental CSS styles, and experimented with various CSS selectors to enhance the website's navigation. Through these steps, you've gained hands-on experience with CSS basics and selectors, crucial skills for any aspiring web developer. This lab laid the foundation for more advanced web development concepts and techniques that you'll explore in future projects