Hi there! I’m Dani, and I work as a curriculum writer at Code.org. During my college days, I found a way to mix my love for sports and computer science by joining a robotics team. We even got to compete internationally, which took me to amazing places like Istanbul and Mexico. It’s incredible how technology can bring together different interests and fields!
As you’ve been creating your websites, you’ve used HTML to give them structure. You’ve learned how to set up headings, lists, paragraphs, and images to make your site look organized. But just having a structure isn’t enough; you also want to add some style to make your content pop.
Imagine a website about fitness. It could have a sleek and simple look or a fun and quirky vibe, and each style would give users a different experience. Web developers use a language called CSS, which stands for Cascading Style Sheets, to control the style of a webpage. CSS lets developers create specific style rules to apply to HTML elements on the page.
Let’s dive into how to use CSS to create style rules for a simple fitness webpage. Suppose we want to make all the paragraph text purple. To do this, we write CSS code that targets all paragraph elements. We start with the tag name “p,” followed by curly braces. The “p” is known as the selector, which tells us which element the style rule will apply to.
Next, we decide what we want to change about the paragraph. In this case, we want to change the text color. This part of the rule is called a property, and color is just one of many properties we can adjust. After the property, we put a colon. Then, we specify the value we want for that property. To make the text purple, we write “purple” after the property and end with a semicolon to show the end of the style rule.
The CSS code we just wrote is called a “Rule Set” because it defines a set of rules for the selected element. We can add more property-value pairs to the same selector to further style our webpage’s paragraph elements. For example, if we want these paragraphs to be both purple and large, we can add the font-size property to control the text size and specify a numerical value for the desired font size.
CSS offers a wide range of style rules, including fonts, positioning, size, and colors. The more style rules you learn, the better you can make your webpage tell the story you want. So, get creative and experiment with different styles to make your website unique and engaging!
Try changing the color of all paragraph text on your webpage. Use CSS to make the text any color you like. Experiment with different colors and see how they change the look and feel of your site. Share your favorite color combination with the class!
Use CSS to adjust the font size of your paragraph text. Make the text larger or smaller and observe how it affects readability and design. Discuss with your classmates which font sizes work best for different types of content.
Develop a style guide for a fictional fitness website. Decide on colors, fonts, and other style elements that fit the theme. Use CSS to apply these styles to a sample webpage. Present your style guide to the class and explain your choices.
Explore a popular website and identify different CSS selectors used for styling. Note how different elements are styled and try to replicate similar styles on your own webpage using CSS. Share your findings with the class.
Create a simple webpage with a theme of your choice, such as sports, music, or travel. Use CSS to style the page according to your theme. Focus on using colors, fonts, and layout to convey the theme effectively. Present your webpage to the class and explain your design choices.
I’m Dani, and I’m a curriculum writer at Code.org. In college, I combined my interests in sports and computer science by working on a robotics team, where we competed internationally. This experience allowed me to travel to places like Istanbul and Mexico, and I love how technology connects various fields and interests.
As you’ve been building your websites, you’ve learned to use HTML to give them structure. We’ve covered how to define headings, lists, paragraphs, and images to make your website look the way you want. However, just providing structure isn’t enough; you also want to add style to bring your content to life.
For example, a website about fitness can have either a sleek and simple style or a quirky and eclectic one, and each would create a different experience for users. Web developers control the style of a webpage using a language called CSS, which stands for Cascading Style Sheets. CSS allows developers to define a specific set of style rules to apply to HTML elements on the page.
Let’s explore how to use CSS to create style rules for a simple fitness webpage. First, we’ll write CSS to turn all paragraph text purple. To apply a set of rules to all paragraph elements, we write the tag name “p,” followed by an opening and closing curly brace. The “p” here is referred to as the selector, indicating the type of element the style rule will apply to.
Next, we specify what we want to change about the paragraph. In this case, we want to change the color of the text. This part of the rule is called a property, and color is just one of many properties we can modify. A property is followed by a colon. Finally, we specify the value we want for that property. To make the paragraph purple, we add the word “purple” after the property and conclude with a semicolon to indicate the end of the style rule.
The CSS we just wrote is called a “Rule Set” because it specifies a set of rules for the selected element. We can add multiple property-value pairs to the same selector to further control the style of our webpage’s paragraph elements. For instance, if we want these paragraphs to be purple and large, we can add the font-size property to control the text size and specify a numerical value for the desired font size.
CSS allows for a wide range of style rules, including fonts, positioning, size, and colors. The more style rules you learn, the better you can make your webpage convey the story you want.
Web – The part of the internet that consists of pages and sites that can be accessed using a browser. – Many students use the web to research information for their school projects.
Development – The process of creating and building software or applications. – Learning programming languages is essential for software development.
CSS – A style sheet language used to describe the presentation of a document written in HTML or XML. – By using CSS, you can change the font and color of text on a webpage.
HTML – The standard markup language used to create web pages. – HTML is used to structure content on the web, such as headings, paragraphs, and links.
Style – A set of rules that defines how a document is presented visually. – The style of a webpage can be modified using CSS to make it more appealing.
Rules – Instructions in CSS that determine how elements are displayed on a webpage. – CSS rules can specify the font size and background color of a webpage.
Property – A characteristic of an HTML element that can be changed using CSS. – The ‘color’ property in CSS is used to change the text color of an element.
Color – A CSS property used to set the color of text or backgrounds on a webpage. – You can use the color property to make the text on your website blue.
Selector – A pattern used in CSS to select the elements you want to style. – A class selector in CSS can be used to apply styles to multiple elements with the same class.
Elements – Individual components of a webpage, such as headings, paragraphs, and images. – HTML elements like
and
