CSS Comments
CSS comments are used to add explanatory notes or disable certain styles without
affecting the functionality of the stylesheet.
Comments are not rendered in the browser and are meant for developers' reference only.
There are two ways to write CSS comments:
1. Single-line Comments: Single-line comments start with /* and end with */.
For example:
/* This is a single-line comment */
2. Multi-line Comments: Multi-line comments begin with /* and end with */, allowing
for comments spanning multiple lines.
For example:
/* This is a multi-line comment.
It can span across multiple lines.
*/
Comments are useful for documenting code, explaining style choices, or temporarily
disabling styles during development and debugging.
Method to insert style sheets in HTML document
There are three most common ways of inserting/ adding a style sheet:-
1. External CSS
2. Internal CSS
3. Inline CSS
Inline Style
Inline CSS involves applying CSS directly within HTML elements using the style
attribute. This method is suitable for applying unique styles to individual elements.
Syntax:
<element style=”CSS property: value;”>
Example:
<p style="color: blue; font-size: 16px;">Paragraph with Inline CSS</p>
Internal Style sheets
Internal CSS involves placing CSS code within the section of the HTML document.
This method is useful for applying styles to specific pages.
<html>
<Head>
<style>
P{
Color:red;
}
</style>
</head>
<body>
<p>hi ethio coding academy</p>
</body>
<html/>
External Stylesheet
External stylesheets are created in separate CSS files and linked to HTML documents
using the tag.
This method involves creating a separate CSS file (e.g., [Link]) and linking it to the
HTML document using the element in the section.
Syntax:
<link rel=” ” type=”text/css” href=” ”>
Precedence of CSS method /Cascading Order
HIGH PRIORITY
INLINE CSS
INTERNAL CSS
EXTERNAL CSS
LOW PRIORITY
CSS Properties
Typography: Font family, font size, font weight, font style, text alignment, text
decoration, line height, letter spacing, text transform, etc.
Colors and Backgrounds: Text color, background color, background image, background
position, background repeat, etc.
Layout and Box Model: Width, height, margin, padding, border, display type, position,
float, clear, etc.
Visual Effects: Box shadow, border radius, opacity, transitions, transforms, etc.
Flexbox and Grid Layout: Properties for creating flexible and grid-based layouts.
Media Queries: Properties for defining styles based on the characteristics of the device
displaying the web page, such as screen size, resolution, etc.
The CSS Box Model is a fundamental concept in web design that describes the
structure of an HTML element. It consists of four main components:
Content: The actual content of the element, such as text, images, or other HTML
elements.
Padding: The space between the content and the element's border. Padding helps to
create space inside the element and separates the content from the border.
Border: The border surrounds the padding and content of the element. It can have
different styles (solid, dashed, etc.), widths, and colors, and it acts as a boundary between
the padding and the margin.
Margin: The space outside the border of the element. Margins create space between the
element's border and other elements on the page, providing separation between elements.
CSS positioning and layout Properties
Position Property
static: Default. Elements are positioned according to the normal flow of the document.
relative: Positioned relative to its normal position.
absolute: Positioned relative to the nearest positioned ancestor.
fixed: Positioned relative to the viewport.
sticky: A hybrid of relative and fixed, depending on the scroll position.
Display Property
block: The element is displayed as a block.
inline: The element is displayed as an inline element.
inline-block: The element is displayed as an inline-level block container.
none: The element is not displayed.
Float and Clear Properties
float: Floats an element to the left or right.
clear: Specifies whether an element should be next to floating elements or be moved
down (none, left, right, both).
Flexbox
display: flex: Creates a flex container.
Properties like flex-direction, justify-content, align-items, flex-wrap control the flex
layout.
Grid
display: grid: Creates a grid container.
Properties like grid-template-columns, grid-template-rows, grid-area, grid-gap control the
grid layout.