Sub-topic 2.2: Implementing Basic CSS for Personal Website/Portfolio Styling
Once you have a clear understanding of your personal brand and target audience, the next step is to translate that into a compelling online presence. Your personal website or portfolio is often the first impression potential clients, employers, or collaborators will have of you. Basic CSS (Cascading Style Sheets) is the fundamental language for controlling the visual presentation of your website, allowing you to customize colors, fonts, layouts, and overall aesthetics to align with your brand identity.
Understanding CSS Fundamentals
CSS works by selecting HTML elements and applying styles to them. A CSS rule consists of a selector and a declaration block. The selector targets the HTML element(s) you want to style, and the declaration block contains one or more declarations, each consisting of a CSS property and its value, separated by a colon and ending with a semicolon.
CSS selectors target HTML elements to apply styles.
Selectors are like addresses for your HTML content, telling CSS which elements to style. Common selectors include element names (like p for paragraph), class names (like .highlight), and IDs (like #main-title).
There are several types of CSS selectors:
- Element Selectors: Target all instances of a specific HTML element (e.g.,
h1,p,div). - Class Selectors: Target elements with a specific
classattribute (e.g.,.button,.card). Classes can be applied to multiple elements. - ID Selectors: Target a single element with a specific
idattribute (e.g.,#header,#footer). IDs must be unique within a page. - Attribute Selectors: Target elements based on their attributes (e.g.,
[type='text']). - Pseudo-classes: Target elements based on their state (e.g.,
:hoverfor when a mouse is over an element,:focusfor when an element is selected).
Element selectors, class selectors, and ID selectors.
Key CSS Properties for Branding
Several CSS properties are crucial for translating your brand's visual identity into your website. These include properties for typography, color, and layout.
| CSS Property | Purpose | Branding Application |
|---|---|---|
| <code>color</code> | Sets the text color. | Use your brand's primary and secondary colors for headings, body text, and links. |
| <code>font-family</code> | Specifies the font for text. | Choose fonts that align with your brand's personality (e.g., serif for traditional, sans-serif for modern). |
| <code>font-size</code> | Sets the size of the font. | Ensure readability and hierarchy; larger for headings, smaller for body text. |
| <code>background-color</code> | Sets the background color of an element. | Use brand colors for sections, buttons, or the entire page background. |
| <code>margin</code> | Creates space around an element. | Controls spacing between elements for a clean, organized look. |
| <code>padding</code> | Creates space within an element, between the content and the border. | Adds breathing room around text or images within their containers. |
| <code>border</code> | Sets the border of an element. | Can be used for subtle visual separation or to highlight specific sections. |
Visualizing the Box Model: Understanding how margin, border, padding, and content interact is fundamental to layout. The content is the actual text or image. padding is the space between the content and the border. The border is the line around the padding. margin is the space outside the border, separating the element from others. This model dictates how elements occupy space on your page and how they relate to each other, directly impacting the visual harmony and professionalism of your brand's online presence.
Text-based content
Library pages focus on text content
Applying CSS to Your Portfolio
You can apply CSS in three main ways: inline styles (directly in HTML tags), internal stylesheets (within