Introduction to CSS
What is CSS?
CSS stands for Cascading Style Sheets. It’s used to control the appearance and layout of web pages. CSS works by targeting HTML elements and applying styles like colors, fonts, margins, and more.
Basic CSS Syntax:
- CSS syntax consists of selectors and declarations:
- Selector: Specifies which HTML elements to style.
- Declaration: The style you want to apply, consisting of a property and a value.
Explanation
- h1 is the selector (it targets all <h1> elements ).
- color, font-size, and text-align are properties, and blue, 24px, and center are their values.
Linking CSS to HTML
Three Ways to Add CSS
- Inline CSS: Add styles directly inside HTML tags.
- Example: <h1 style=”color: red ; “>hello world</h1>.
- Internal CSS: Write CSS inside a <style> tag in the HTML document’s <head>.
- Example:
- External CSS: Link to an external stylesheet using the <link> tag inside the <head> .
- Example:
Link an external CSS file to your HTML document.
Steps:
- Create a new CSS file called styles.css.
- Link it to the HTML document using the <link> tag.
- Add some basic styles in the styles.css file (e.g., change the background color of the page).
CSS Selectors
Types of CSS Selectors
- Element Selector: Targets all elements of a specific type (e.g., all <p> tags).
- Example: p { color: red; }
- Class Selector: Targets elements with a specific class. The class selector is written with a dot (.).
- Example: .highlight { background-color: yellow; }
- ID Selector: Targets a specific element with an ID. The ID selector is written with a hash (#).
- Example: #main-title { font-size: 24px; }
- Universal Selector: Targets all elements on the page (*).
- Example: * { margin: 0; padding: 0; }
- Grouping Selectors: Apply the same styles to multiple selectors by separating them with a comma.
- Example: h1, h2, p { color: black; }
Styling Text and Fonts
Typography in CSS
- Font family: Sets the font for text. You can use system fonts or import custom fonts (like Google Fonts).
- Font size: Defines the size of the text (e.g., 16px, 1.5em).
- Font weight: Sets the thickness of the font (e.g., bold, normal, 100).
- Text align: Controls the alignment of text (e.g., left, right, center).
- Text color: Changes the text color using names, HEX, RGB, or HSL values.
Styling Backgrounds and Borders
Backgrounds
- You can style the background using colors or images.
- The background-color property is used to set a background color.
- The background-image property allows you to add an image in the background.
Borders
- The border property defines a border around an element. You can specify border width, style, and color.
Very helpful tutorial
Wow, wonderful blog layout! How lengthy have you ever been blogging for?
you maje running a blog look easy. The full look of your site is excellent, let alone thee content!