Hello, budding programmers!
A website without styling is like a tree without leaves—it’s useful, but it doesn’t appear as attractive as it could be. That’s where CSS, short for Cascading Style Sheets, steps in. Creating websites is not just about surrounding content with HTML tags; it’s also about making it pleasing to the eye, easier to read, and user-friendly, which is what CSS is all about. CSS is used widely in the real world to create visually appealing and user-friendly websites like Facebook, Google, and even this learning platform.
Today, we will learn the basics of CSS and how to apply it to our HTML to-do list that we've built in the previous lessons. By the end of this lesson, you'll be able to make your to-do list not just functional, but also attractive!
CSS gives life to your HTML pages—it stores rule sets that decide how your HTML elements should look. Just like HTML, CSS is not a programming language; it's a stylesheet language that describes the look and formatting of an HTML document.
CSS is cascading because styles come "trickling down" from top to bottom. If more than one style applies to an HTML element, the style closest to that element will take priority. This is also known as the rule of "specificity." Think of it like house painting rules: You might say all new houses should be painted red, unless they have a porch, in which case they should be yellow. Furthermore, if the house has the number 14, it should be green. This hierarchy can be understood as red<yellow<green, with the most specific rule (green) taking precedence.
Inline CSS involves adding style rules directly into an HTML element’s style attribute. It’s handy for small, one-off styling needs, but isn’t always the best choice because it doesn’t promote code reuse.
HTML, XML1<!-- Inline CSS --> 2<p style="color: blue;">This is a blue paragraph.</p>
When we talk about internal CSS, we’re referring to style rules that are placed inside a <style> tag within the <head> section of an HTML document. Internal CSS is a better choice when you need to style multiple elements or the entire page.
HTML, XML1<!-- Internal CSS --> 2<head> 3 <style> 4 p { 5 color: blue; 6 } 7 </style> 8</head> 9<body> 10 <p>This is a blue paragraph.</p> 11 <p>This is another blue paragraph.</p> 12</body>
Remember, for our lessons, we want to focus on understanding these concepts without relying on external stylesheets, so stick to inline and internal CSS!
A CSS rule-set consists of a selector and a declaration block. The selector points to the HTML element you want to style, while the declaration block (enclosed in curly braces {}) declares one or more declarations separated by semicolons ;.
Each declaration includes a CSS property name and a corresponding value, separated by a colon :.
HTML, XML1<style> 2 /* CSS syntax */ 3 p { 4 color: red; 5 font-size: 16px; 6 } 7</style>
In CSS, the order of specificity determines which style rules take precedence when multiple styles apply to the same element. The order of specificity is as follows:
- ID Selectors (
#): ID selectors have the highest specificity. They are unique to a single element, making them the most specific. - Class Selectors (
.): Class selectors are more specific than element selectors but less specific than ID selectors. They can be applied to multiple elements on the page. - Element Selectors: Element selectors have the lowest specificity. They apply styles to all instances of the specified element type throughout the document.
When multiple styles apply to the same element, the one with the highest specificity will take precedence.
HTML, XML1<head> 2 <style> 3 p { 4 color: red; /* (General) element selector */ 5 } 6 7 .myClass { 8 color: blue; /* (Specific) class selector */ 9 } 10 11 #myID { 12 color: green; /* (Even more specific) ID selector */ 13 } 14 </style> 15</head> 16<body> 17 <p>This paragraph will be red.</p> 18 <p class="myClass">This paragraph will be blue.</p> 19 <p id="myID" class="myClass">This paragraph will be green.</p> 20</body>
In the example, the paragraph with the id of myID will be green because the ID selector has the highest specificity, overriding the class selector and the element selector. The paragraph with the class myClass will be blue due to the class selector, which overrides the element selector. The regular paragraph will be red due to the element selector.
Now that we've understood the basic syntax and categories of CSS, let's delve deeper into specific styling properties that allow you to finely tune the look of your web elements.
CSS offers a multitude of properties that can be applied to manipulate the appearance of HTML elements. Some commonly used properties include:
color: Changes the color of the text.font-size: Adjusts the size of the text.background-color: Alters the background color of the element.text-align: Sets the horizontal alignment of the text.list-style-type: Specifies the type of bullet points or numbering for list items.font-family: Defines the font to be used for the text.padding: Adds space inside an element, creating a buffer around its content.margin: Adds space outside an element, creating separation from other elements.border-radius: Rounds the corners of an element for a softer appearance.
HTML, XML1<style> 2 p { 3 color: white; 4 font-size: 24px; 5 background-color: black; 6 text-align: center; 7 } 8</style> 9<p>This is a styled paragraph.</p>
Each CSS property has a set of possible values, which depends on the type of property. For instance, the color property can be set to any valid color name like blue, red, or hexadecimal color codes like #FF5733, #C85E0A, etc.
As you might have noticed, the advantage of using CSS is that the properties are usually named in clear, plain English, making them easy to understand and use!
Now, let's apply what we have learned to our simple to-do list from the previous lessons. Let’s make our list items look more attractive and readable.
HTML, XML1<style> 2 ul { 3 list-style-type: none; 4 padding: 0; 5 } 6 7 li { 8 padding: 10px; 9 margin-bottom: 10px; 10 background-color: #efefef; 11 color: #333; 12 font-family: Arial, sans-serif; 13 } 14</style> 15 16<ul> 17 <li>Buy groceries</li> 18 <li>Complete homework</li> 19</ul>
In this example, we've set our list to have no bullets (list-style-type: none) and added some padding and margins to the list items to space them out nicely. We also changed the list items' background color and text color and changed the font to Arial for a clean and organized look. We used sans-serif as the fallback font to ensure it is used if Arial is not available on the machine.
Congratulations! We dove into the world of CSS today, where we examined the basics, introduction to inline and internal styles, syntax, selectors, and some commonly used CSS properties. We followed it up with a practical demonstration on our to-do list, making it look quite appealing!
CSS is used widely in the real world to create visually appealing and user-friendly websites - even this learning platform! Responsive design is crucial in today's multi-device world. CSS allows us to create layouts that adjust beautifully across various screen sizes using media queries.
Next, we'll move to the hands-on practice exercises, where you'll be tasked with decorating your own to-do list with the magic of CSS. These exercises are designed to reinforce your learning, so give them a try, experiment with different styles and colors, and have fun! Happy coding!