CSS, or Cascading Style Sheets, is one of the most important things in web development because it allows you to control how your HTML documents are presented. In simpler words, you can separate your content from your style to really develop the look, usability, and accessibility of a website. The rest of this section will dive in to some basics of CSS: how to add styles to an HTML, CSS selectors, the box model, and actually creating responsive designs with media queries.
13.1 Appending Styles to HTML
It is very easy to add CSS into the HTML files. There are several ways to do that and they are all depending on the size and the type of your project.
Inline CSS
Instead, inline styles add a style attribute directly to an HTML element. While this might be a fast and convenient way to get small things done, it’s better avoided when dealing with larger projects as it also lumps together style with content, making the code harder to maintain.
<p style="color: blue; font-size: 16px;">This text is styled with inline CSS.</p>
Internal CSS
Internal CSS Every bit of your internal CSS is declared within the <style> element within the section of your HTML document. This is useful if you are only styling one page, but again it does tend to make HTMLs very messy in larger projects.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This text is styled with internal CSS.</p>
</body>
</html>
External CSS
External CSS is the most scalable and maintainable method, where the CSS rules are stored in a separate file (.css) and linked to the HTML document. This approach allows you to apply the same styles across multiple pages, promoting code reuse.
<!-- Link to external stylesheet -->
<link rel="stylesheet" href="styles.css">
In the external styles.css file:
p {
color: red;
font-size: 20px;
}
Interactive Activity:
Task: Create a page using inline, internal and external CSS. Contrast their pros and cons. Test adding various style definitions and discuss which method you would feel most comfortable maintaining in larger projects.
13.2 Basic CSS Selectors and Properties
The HTML elements to be styled are chosen using CSS selectors. Properties define what aspect of the element you will style-color, font-size, or layout.
There are three types of CSS selectors:
- Element Selector: Selects all the elements of a certain type.
p {
color: blue;
}
- Class Selector: Style elements that possess a certain class attribute.
.highlight {
background-color: yellow;
}
- ID Selector: Style an element based on a unique ID.
#main-heading {
font-size: 24px;
}
- Universal Selector: Selects everything on a page.
* {
margin: 0;
padding: 0;
}
- Descendant Selector: Selects elements inside other elements.
div p {
color: purple;
}
Common CSS Properties:
- Color: Specifies the text color.
color: #333;
- Background: Sets an element’s background-color or background-image.
background-color: #f0f0f0;
- Font: Controls the style, size, and family of the font.
font-family: Arial, sans-serif;
font-size: 16px;
- Margin and Padding: Adds space around all elements.
margin: 10px;
padding: 20px;
Interactive Activity:
Task: Choose different CSS selectors, namely element, class, ID, and descendant. Apply several properties like colors, fonts, margins, and padding. Test and observe how different selectors work together and overwrite each other with the principles of specificity.
13.3 CSS Box Model
The box model is the core theory in layout design. Each HTML element is basically considered a rectangular box, and the box model defines how elements are rendered in terms of size and spacing.
Parts of the Box Model:
- Content: The actual content inside the element (text, images, etc.).
- Defined by
widthandheightproperties.
- Padding: Space between content and the border of the element. Padding is transparent and makes the element larger in size.
padding: 10px;
- Border: A line that surrounds the padding if there is any. The border can be specified in CSS about size, style and color.
border: 2px solid black;
- Margin: The distance between the border, if used, to other elements. The margin is transparent.
margin: 20px;
Box Model Example:
<div style="width: 200px; padding: 20px; border: 5px solid black; margin: 30px;">
This is a box.
</div>
In this example, the total width of the box is calculated as:
Total Width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
= 200px + 20px + 20px + 5px + 5px + 30px + 30px
= 310px
Box Sizing Property:
By default, width and height apply to the content box only. If you want padding and border to be included in the width and height calculation, use box-sizing: border-box;.
div {
box-sizing: border-box;
}
Interactive Activity:
Task: Create various kinds of different html elements such as div, section. Test the box model by changing the content, padding, border and margin. Use the browser developer tools to inspect the computed box model for each element, and see how that changes layout based on the CSS applied.
13.4 Responsive Design with Media Queries
Modern web design forces you to pay attention to how your website looks not just on computers, but on more compact devices such as cellular phones. Media queries are used in order to apply different styles depending on the size of the screen, or indeed some other feature of the device.
How Media Queries Work:
Media queries are styles in CSS; they apply the styles based on certain conditions such as the width of the browser window. This is crucial in creating liquid and responsive design for any screen.
/* Default styles (for desktop) */
body {
font-size: 16px;
}
/* Styles for screens smaller than 768px (tablets) */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
/* Styles for screens smaller than 480px (mobile) */
@media screen and (max-width: 480px) {
body {
font-size: 12px;
}
}
Breakpoints:
Break points refer to the size at which a particular change in layout needs to be made depending upon the size of the screen. The major points are as follows:
- First is at 1200px large desktops.
- The second one for tablets in the landscape mode at 992px.
- Third, it is for tablets in the portrait mode at 768px.
- And the last is for smartphones at 480px.
Responsive Images:
Images can also be made responsive by setting the width to a percentage, or you could use the max-width property to make sure that they do not overflow their containers.
img {
max-width: 100%;
height: auto;
}
Interactive Activity:
Task: Design a responsive webpage. The layout changes when the page is opened on a variety of screen sizes. It uses flexible grid layout with percent widths, images that scale responsively, and utilizes media queries; then test it on various devices or by resizing your browser.
Quizz Time:
Conclusion
Now, once you have mastered all these basic concepts in CSS-adding styles, using selectors, understanding the box model, and building responsive designs-you've learned enough to build visually pleasing and flexible web pages. CSS now makes it all possible by offering every possible approach in designing web pages, as shown with these concepts, which will allow for layouts that fit any device and bring out the best user experience for the viewer.