Introduction to CSS
What is CSS?
CSS, which stands for Cascading Style Sheets, is a language that helps us make web pages look pretty and organized. Itâs like giving our web pages a special outfit to wear!
Just like how we have rules for grammar when we write sentences, CSS also has its own set of rules called syntax. These rules tell the computer how to understand and apply the styles we want to add to our web pages.
CSS syntax is made up of three important parts: selectors, properties, and values.
- Selectors: Selectors are like names or labels we give to HTML elements.
- Properties: Properties are like the things we want to change about our web page.
- Values: Values are like the choices we make for each property.
To put it all together, hereâs an example of CSS syntax:
selector {
property: value;
}Letâs say we want to make all the headings in our web page red. We would write CSS like this:
h1 {
color: red;
}This tells the computer to select all the âh1â elements and change their color property to red.
Remember, CSS syntax is like following a set of rules to tell the computer how to style our web pages. By using selectors, properties, and values, we can create beautiful and personalized designs for our websites!
style tag
The <style> tag is used to add CSS code to an HTML file. It is placed inside the <head> section of an HTML document, and any CSS code written inside it will apply to the HTML elements specified in the code.
Hereâs an example:
<!DOCTYPE html>
<html>
<head>
<title>My CSS Example</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>This is a paragraph of text.</p>
</body>
</html>In this example, the CSS code inside the <style> tags specifies that the font size of all <h1> tags should be 36px and their color should be blue. The code also specifies that the font family of all <p> tags should be Arial and their font size should be 16px.
By using the <style> tag to add CSS code to an HTML document, we can change the appearance of elements on the webpage, such as their font size, font family, color, and more.
Selectors
In CSS, selectors are like special names or labels we use to pick and choose which parts of a web page we want to style. Imagine you have a big group of friends, and you want to invite only a few of them to your party. Selectors help you do just that!
Element selectors are like calling out a specific type of HTML element. They target a whole group of elements with the same name. For example, This CSS rule targets all the <h1> elements on the web page and changes their color to blue.
h1 {
color: blue;
}Activity: Using An Element Selector
Use an element selector to target all the paragraphs and set their color property to red.
Class selectors are like giving a special tag or nickname to a specific group of HTML elements. You can choose any name you want! Letâs say you have a group of paragraphs that you want to style differently from the others. You can add a class attribute to those paragraphs, like âclass=âspecial-paragraphsââ. Then, in your CSS, you can use â.special-paragraphsâ as a selector to target only those paragraphs. For example, The paragraph with the class âhighlightâ is selected, and its background color is set to yellow. The regular paragraph is not affected.
<p class="highlight">This paragraph is special.</p>
<p>Regular paragraph.</p>.highlight {
background-color: yellow;
}Activity: Using An Class Selector
Use a class selector to target the paragraphs with the class âspecialâ and set their âbackground-colorâ property to red
ID selectors are like giving a unique name to one specific HTML element. Itâs like saying, âHey, you! Iâm talking to you, and only you!â IDs are special because they should only be used once on a page. Letâs say you have a special heading at the top of your web page that you want to style differently. You can give it an ID, like âid=âspecial-headingââ, and then in your CSS, you can use â#special-headingâ as a selector. For example, The heading with the ID âmain-headingâ is targeted, and its font size is set to 24 pixels. The other paragraph remains unaffected.
<h2 id="main-heading">Welcome to My Website</h2>
<p>This is the content of my web page.</p>
#main-heading {
font-size: 24px;
}
Activity: Using An ID Selector
Use an ID selector to target the heading with the ID âmain-headingâ and set its color property to blue
By using these different types of selectors, we can be really specific about which elements we want to style. Itâs like having a set of magical glasses that help us see and pick out exactly what we want on our web pages.
Properties
CSS properties are like special instructions that tell the computer how to change the appearance or behavior of elements on a web page. Itâs like giving specific commands to make things look cool and fun!
Just like we have different tools in an art kit to create different effects, CSS properties help us modify different aspects of elements in web design.
Common Colors
| Color Name | CSS Value |
|---|---|
| Red | red |
| Blue | blue |
| Green | green |
| Yellow | yellow |
| Black | black |
| White | white |
| Orange | orange |
| Pink | pink |
| Purple | purple |
| Brown | brown |
| Gray | gray |
| Cyan | cyan |
| Magenta | magenta |
| Silver | silver |
| Gold | gold |
Common Border Styles
| Border Style | CSS Value |
|---|---|
| None | none |
| Solid | solid |
| Dashed | dashed |
| Dotted | dotted |
| Double | double |
| Groove | groove |
| Ridge | ridge |
| Inset | inset |
| Outset | outset |
| Hidden | hidden |
Common Font Sizes
| Font Size | CSS Value |
|---|---|
| 12px | 12px |
| 14px | 14px |
| 16px | 16px |
| 18px | 18px |
| 20px | 20px |
| 24px | 24px |
| 28px | 28px |
| 32px | 32px |
| 36px | 36px |
| 40px | 40px |
| 48px | 48px |
| 56px | 56px |
| 64px | 64px |
| 72px | 72px |
| 96px | 96px |
Here are some common CSS properties and their explanations:
The color property determines the color of text or other elements. Itâs like choosing the color of a marker or a paintbrush. For example, this sets the text color of all <h1> headings to red.
h1 {
color: red;
}Activity: Using the color property
Set the text color of the element to blue:
<p>This is a <span>highlighted</span> word.</p>
The font-size property controls the size of the text. Itâs like adjusting the size of the letters on a sign or in a book. We can make the text bigger or smaller by using values like â12pxâ or â20pxâ. This example sets the font size of all paragraphs (<p>) to 16 pixels.
p {
font-size: 16px;
}Activity: Using the font size property
Increase the font size of the
heading to 24 pixels:
<h2>Welcome to our website</h2>
The background-color property changes the color of the background behind an element. Itâs like painting the background of a picture. We can use colors like âyellowâ or âgreenâ to create different backgrounds. This example sets the background color of the entire web page to yellow.
body {
background-color: yellow;
}Activity: Using the background color property
Apply a red background color and white text color to the following
element:<div>This is a colored div</div>
The width and height properties control the size of an element. Itâs like stretching or shrinking a box. We can set the width and height using values like â200pxâ or â50%â. This example sets the width of elements with class âboxâ to 200 pixels and the height to 150 pixels.
.box {
width: 200px;
height: 150px;
}Activity: Using the width and height properties
Set the width of the following image to 300 pixels and the height to 200 pixels:
<img src="image.jpg" alt="A beautiful image">
The border property adds a border around an element. Itâs like drawing a frame around a picture. We can set the thickness, style, and color of the border to create different effects. This example adds a 1-pixel black solid border to elements with class âcontainerâ.
.container {
border: 1px solid black;
}Activity: Using the border property
Add a border of 1 pixel, dotted style, and gray color to the following
element:<table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table>The padding property adds space inside the border of an element. Itâs like adding extra cushioning around an object. We can adjust the amount of padding to create spacing between elements. This example adds 10 pixels of padding to all elements with class âcontentâ.
.content { padding: 10px; }Activity: Using the padding property
Apply a padding of 20 pixels to the following
element:<div>This is a padded div</div>The margin property adds space outside the border of an element. Itâs like creating a gap between objects. We can adjust the margin to control the spacing between elements on a web page. This example adds a 20-pixel margin around all elements with class âelementâ.
.element { margin: 20px; }Activity: Using the margin property
Set the left margin of the following paragraph to 40 pixels:
<p>This is a paragraph with some text</p>These are just a few examples of CSS properties, but there are many more to explore! By using different properties and values, we can customize and design our web pages in creative ways.
Putting It All Together
Using the
<!DOCTYPE html> <html> <head> <title>Styling Assessment</title> </head> <body> <h1>Welcome to CSS Styling Assessment</h1> <p>This is a paragraph.</p> <div class="box"> <p>This is a box.</p> </div> <p class="highlight">This paragraph should be highlighted.</p> </body> </html>
- Set the background color of the element to light blue.
- Set the text color of the
element to dark green.
- Set the font size of the
elements to 18 pixels.
- Add a 2-pixel solid black border to the .box element.
- Set the background color of the .highlight class to yellow.
Vocabulary Review
Terms Definitions css a language used to add style and formatting to websites selector help us pick which parts of the web page we want to style properties tell the computer what aspect we want to style <style>tagelement used to add CSS code to an HTML file values determine how we want the property to look Element selectors target a whole group of elements with the same name Class selectors giving a special tag or nickname to a specific group of HTML elements ID selectors giving a unique name to one specific HTML element color property determines the color of text or other elements font-size property controls the size of the text background-color property changes the color of the background behind an element width and height properties control the size of an element border property adds a border around an element padding property adds space inside the border of an element margin property adds space outside the border of an element