CSS Tutorial

Cascading Style Sheets (CSS) is a stylesheet language used for describing the look and formatting of a document written in HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS allows you to control the style and layout of multiple web pages at once, making it easier to maintain a consistent look and feel across your website. With CSS, you can set colors, font styles, sizes, and more for your website’s content, giving you greater control over its appearance. Do you have any specific questions about CSS?

CSS RULES

A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations that specify the style for the selected element.

Here’s an example of a CSS rule:

In this example, p is the selector, which selects all the <p> elements in the HTML document. The declaration block consists of two declarations, which specify that the text color of the <p> elements should be red and the font size should be 16 pixels.

Each declaration consists of a property and a value. In the first declaration, color is the property and red is the value. In the second declaration, font-size is the property and 16px is the value.

CSS rules can also include multiple selectors, like this:

This rule selects all <h1>, <h2>, and <h3> elements, and sets their text color to blue.

Do you have any other questions about CSS rules?

 

INLINE STYLES

An inline style is a style that is applied directly to an HTML element using the style attribute in the HTML markup. Here’s an example of an inline style applied to a div element:

Inline styles are usually used to apply styles to a single element, and they have the highest specificity among all types of styles (inline, external, and internal). This means that an inline style will take precedence over any other styles that might be applied to the same element, either from an external stylesheet or from an internal style element.

In general, it is considered a best practice to avoid using inline styles as much as possible, and to use external or internal stylesheets instead. This makes it easier to maintain your styles, as you can define your styles in a single place and apply them to multiple elements on your page. However, there may be cases where inline styles are necessary, for example, if you need to override a style for a specific element on a specific page.

EXTERNAL STYLESHEET

An external stylesheet is a separate file that contains your CSS styles. To use an external stylesheet, you need to link to it in your HTML file using the <link> element.

Here’s an example of how to link to an external stylesheet in your HTML file:

The rel attribute specifies the relationship between the HTML file and the stylesheet, and the href attribute specifies the location of the stylesheet file.

Using an external stylesheet has several advantages:

• It separates the content (HTML) from the presentation (CSS), making it easier to maintain and update your styles.
• It allows you to reuse the same styles across multiple pages on your website.
• It can improve the performance of your website, as the browser can cache the external stylesheet and use it for multiple pages, rather than having to download and parse the same styles for every page.

CSS colors:

There are several ways to specify colors in CSS. Here are a few examples:

1. Hexadecimal values: Hexadecimal values are six-digit codes that represent a specific color. They are usually written as #RRGGBB, where RR, GG, and BB are hexadecimal values that represent the red, green, and blue components of the color, respectively. For example, #ff0000 represents the color red, #00ff00 represents the color green, and #0000ff represents the color blue.
2. RGB values: RGB (Red, Green, Blue) values are three-digit codes that represent a specific color. They are usually written as rgb(R, G, B), where R, G, and B are values between 0 and 255 that represent the red, green, and blue components of the color, respectively. For example, rgb(255, 0, 0) represents the color red, rgb(0, 255, 0) represents the color green, and rgb(0, 0, 255) represents the color blue.
3. Predefined color names: CSS includes a list of predefined color names that you can use directly in your stylesheets. For example, you can use red, green, blue, purple, pink, etc. These color names are case-insensitive.
4. HSL values: HSL (Hue, Saturation, Lightness) values are three-digit codes that represent a specific color. They are usually written as hsl(H, S, L), where H is a value between 0 and 360 that represents the hue of the color, S is a value between 0% and 100% that represents the saturation of the color, and L is a value between 0% and 100% that represents the lightness of the color.

CSS Font Stack

CSS SELECTORS:

A VERY IMPORTANT PART OF CSS!

CSS selectors are patterns that are used to select elements in an

HTML document in order to apply styles to them. There are several different types of selectors available in CSS, including:

1. Element selectors: Element selectors select elements based on their tag names. For example, the p selector selects all p elements in the document.
2. Class selectors: Class selectors select elements based on their class attributes. For example, the .warning selector selects all elements with a class of “warning”.
3. ID selectors: ID selectors select elements based on their id attribute. For example, the #main selector selects the element with an id of “main”.
4. Attribute selectors: Attribute selectors select elements based on their attributes and attribute values. For example, the [href] selector selects all elements with a href attribute, and the [href='https://www.example.com'] selector selects all elements with a href attribute equal to “https://www.example.com“.
5. Pseudo-class selectors: Pseudo-class selectors select elements based on their state or position. For example, the :hover selector selects elements when the user hovers over them with the mouse, and the :first-child selector selects the first child element of its parent.

There are many other types of selectors available in CSS, and

 

you can also combine selectors to create more complex patterns. For example, you can use the p.warning selector to select all p elements with a class of “warning”, or the #main ul li selector to select all li elements that are children of ul elements that are descendants of an element with an id of “main”.

CSS RULES:

A CSS rule is a statement that defines how a specific set of elements should be styled. A rule consists of a selector and a declaration block. The selector determines which elements the rule applies to, and the declaration block contains one or more declarations that specify the styles to be applied to the elements.

Here’s an example of a simple CSS rule:

This rule applies to all p elements in the document, and it sets the color of the text to red, the font size to 14px, and the font weight to bold.

You can use different types of selectors to target specific elements in your document. For example, you can use an element selector to apply a style to all elements of a certain type, a class selector to apply a style to a specific class of elements, or an ID selector to apply a style to a specific element.

You can also use multiple selectors to apply a style to multiple elements at once. For example, the following rule applies the same styles to both p and h1 elements:

UNIVERSAL SELECTOR:

he universal selector is a CSS selector that matches any element in an HTML document. It is represented by the * character.

Here’s an example of how to use the universal selector:

This rule sets the margin, padding, and box-sizing properties of all elements in the document to their default values.

The universal selector has the lowest specificity among all CSS selectors, so it should be used with caution. It is generally considered a good practice to use more specific selectors whenever possible, as they are more efficient and easier to maintain.

However, there may be cases where the universal selector is useful. For example, you might use it to reset the default styles of all elements on a page or to apply a style to all elements of a certain type that are nested inside another element.

SELECTOR LIST:

A selector list is a group of selectors that are separated by commas. It is used to apply the same styles to multiple elements in an HTML document.

Here’s an example of a selector list:

This rule applies the same styles (color, font size, and font weight) to all p, h1, h2, and h3 elements in the document.

Selector lists are a useful way to apply the same styles to multiple elements without having to repeat the same declarations multiple times. They can also be used to apply styles to elements that are nested inside other elements, or to apply styles to elements that have a specific attribute or attribute value.

DESCENDANT SELECTOR :

A descendant selector is a CSS selector that selects elements that are descendants of a specific ancestor element. It consists of two or more selectors separated by a space.

Here’s an example of a descendant selector:

This rule applies the styles (color, font size, and font weight) to all p elements that are descendants of an element with an id of “main”. In other words, it selects all p elements that are nested inside an element with an id of “main”.

Descendant selectors are a useful way to apply styles to elements that are nested inside other elements. They are particularly useful when combined with other selectors, such as class or attribute selectors, to create more complex patterns.

It’s important to note that descendant selectors have a lower specificity than direct child selectors (which use the > character to select only direct children of an element), so they should be used with caution.

PSEUDO-CLASSES:

A pseudo-class is a CSS selector that selects elements based on their state or position in the document. It is used to add special effects to elements, such as hover, active, or focus states.

Pseudo-classes are used in conjunction with regular selectors, and they are indicated by a colon (:) followed by the name of the pseudo-class.

Here are a few examples of common pseudo-classes:

• :hover selects elements when the user hovers over them with the mouse.
• :active selects elements that are being activated (usually by a mouse click).
• :focus selects elements that have focus (usually by tabbing to them or clicking on them).
• :first-child selects the first child element of its parent.
• :last-child selects the last child element of its parent.
• :nth-child(n) selects the nth child element of its parent (where n is a positive integer).

Here’s an example of how to use a pseudo-class:

This rule applies the styles (color and text decoration) to all a elements when the user hovers over them with the mouse.

There are many other pseudo-classes available in CSS, and you can use them to add a wide range of interactive effects to your web pages.

PSEUDO-ELEMENTS:

A pseudo-element is a CSS selector that selects a specific part of an element. It is used to style parts of an element that cannot be selected using regular selectors, such as the first line or the first letter of an element.

Pseudo-elements are used in conjunction with regular selectors, and they are indicated by a double colon (::) followed by the name of the pseudo-element.

Here are a few examples of common pseudo-elements:

• ::before inserts content before an element.
• ::after inserts content after an element.
• ::first-line styles the first line of an element.
• ::first-letter styles the first letter of an element.

Here’s an example of how to use a pseudo-element:

This rule applies the styles (font size and color) to the first letter of all p elements.

There are many other pseudo-elements available in CSS, and you can use them to add a wide range of stylistic effects to your web pages.

The CASCADE

The cascade refers to the way that CSS styles are applied to an HTML document. When multiple styles are applied to the same element, the cascade determines which styles take precedence and are ultimately applied to the element.

There are three factors that determine the precedence of a style:

1. Specificity: Styles with higher specificity take precedence over styles with lower specificity. For example, an inline style (applied directly to an element using the style attribute) has higher specificity than a style applied to an element using a class selector.
2. Importance: Styles marked as !important take precedence over normal styles, regardless of specificity.
3. Source order: If two styles have the same specificity and importance, the style that appears later in the stylesheet takes precedence.

Here’s an example of how the cascade works:

In this example, the p element has four different styles applied to it:

1. Style 1 sets the color to red.
2. Style 2 sets the color to yellow.
3. Style 3 sets the color to orange and is marked as !important.
4. Style 4 is an inline style that sets the color to green.

According to the cascade, the inline style (style 4) has the highest specificity, so it takes precedence over the other styles. The final result is that the text is green.

 

THE BOX MODEL:

The box model is a way to represent the layout of an HTML element on a webpage. It consists of the following elements:

1. Content: This is the content of the element, such as text or images.
2. Padding: This is the space inside the element, between the content and the border.
3. Border: This is a line around the element that separates the element from other elements on the page.
4. Margin: This is the space outside the element, between the border and the next element.

Here is an example of the box model in action:

In this example, the element has a margin around it, a border around the padding, and padding around the content. You can control the size of each of these elements using CSS, and you can use them to create complex and attractive layouts for your webpage.

 

BORDER PROPERTIES:

• Border width:

Control the thickness of the border.

• Border color: 

Control the color of the border.

• Border style:

it is used to control the line style-dashed, solid, etc.

INDIVIDUAL PROPERTIES:

• Padding-left
• Padding-right
• Padding-top
• Padding-bottom

SHORTHAND PROPERTIES:

Set all four sides at once.

PADDING SHORTHAND PROPERTIES:

Apply to all four sides:

padding: 10px;

Vertically | horizontally

padding: 5px 10px;

top | horizontally |bottom

padding: 1px 2px 2px;

top | horzontally| bottom | vertically

padding: 5px 1px 0 2px;

INDIVIDUAL PROPERTIES:

• Margin-left
• Margin-right
• Margin-top
• Margin-bottom

SHORTHAND PROPERTIES:

Set all four sides at once.

PADDING SHORTHAND PROPERTIES:

Apply to all four sides:

padding: 10px;

Vertically | horizontally

padding: 5px 10px;

top | horizontally |bottom

padding: 1px 2px 2px;

top | horzontally| bottom | vertically

padding: 5px 1px 0 2px;

 

Display Properties:

INLINE:

Width and height are ignored. Margin and padding push elements away horizontally but not vertically.

BLOCK:

Block elements break the flow of documents. Widht, height, margin, and padding are respected.

INLINE-BLOCK:

Behaved like an inline element except for the width. Height, margin, and padding are respected.

CSS UNITS:

 

here are several units that you can use in CSS to specify lengths, sizes, and other values. Here are some of the most common units:

• Pixels (px): This is a fixed unit that represents the number of pixels on the screen. It is often used to specify the size of elements and fonts.
• Ems (em): This is a relative unit that represents the font size of the element. An em is equal to the font size of the element, so if the font size is 16px, 1em is equal to 16px.
• Percentages (%): This is a relative unit that represents a percentage of the parent element. For example, if an element has a width of 100%, it will take up the full width of its parent element.
• Points (pt): This is a fixed unit that represents the size of a font in points. One point is equal to 1/72 of an inch.
• Viewport units (vw, vh, vmin, vmax): These are relative units that represent a percentage of the viewport size. The viewport is the visible area of the webpage. For example, 1vw is equal to 1% of the viewport width, and 1vh is equal to 1% of the viewport height.

You can use these units to specify the size and layout of elements on your webpage. For example, you can use pixels to specify the size of an element in pixels, or you can use ems to specify the size of an element in relation to the font size. You can also use percentages to specify the size of an element in relation to the parent element, or you can use viewport units to specify the size of an element in relation to the viewport.

 

Opacity + Alpha Channel:

Opacity is a property that allows you to control the transparency of an element in CSS. The opacity property is specified as a value between 0 and 1, where 0 is completely transparent and 1 is completely opaque.

Here is an example of how to use the opacity property in CSS:

You can also use the rgba function to specify the transparency of a color using the alpha channel. The alpha channel is a value between 0 and 1 that represents the transparency of a color.

Here is an example of how to use the rgba function to specify a transparent color:

In this example, the rgba function is used to specify a red color with an alpha value of 0.5, which makes it 50% transparent.

Overall, the opacity and alpha channel properties are useful for creating transparent elements and adding a layer of transparency to your webpage.

CSS POSITION:

The position property in CSS allows you to specify the positioning of an element on a webpage. There are several possible values for the position property:

• Static: This is the default value, which means that the element is positioned according to the normal flow of the document.
• Relative: This value allows you to specify an offset from the normal position of the element. You can use the top, right, bottom, and left properties to specify the offset.

In this example, the element will be positioned 20 pixels from the top and 30 pixels from the left of its normal position.

• Absolute: This value positions the element relative to its nearest positioned ancestor, or to the initial containing block if there is no positioned ancestor. You can use the top, right, bottom, and left properties to specify the position of the element.

In this example, the element will be positioned 50 pixels from the top and 0 pixels from the right of its nearest positioned ancestor.

• Fixed: This value positions the element relative to the viewport, which means it will stay in the same position on the page even when the page is scrolled. You can use the top, right, bottom, and left properties to specify the position of the element.

In this example, the element will be positioned at the bottom-left corner of the viewport and will stay there even when the page is scrolled.

Overall, the position property is a powerful tool for controlling the layout of elements on a webpage, and it is often used in conjunction with the top, right, bottom, and left properties to fine-tune the position of elements.

 

CSS-COLOR COMBINATIONS:

 

There are many ways to combine colors in CSS to create a wide range of visual effects. Here are a few examples:

• Monochromatic: This is a color scheme that consists of different shades and tints of a single color. To create a monochromatic color scheme, you can use the hsl function to adjust the hue, saturation, and lightness of a color.

In this example, the hsl function is used to create three shades of red by adjusting the lightness value.

• Complementary: This is a color scheme that consists of two colors that are opposite each other on the color wheel. Complementary colors can create a high contrast effect when used together.

In this example, red and cyan are complementary colors, because they are opposite each other on the color wheel.

• Analogous: This is a color scheme that consists of three colors that are adjacent to each other on the color wheel. Analogous colors can create a harmonious and cohesive effect when used together.

TRANSITIONS:

 

Transitions in CSS allow you to smoothly change the value of a property over a period of time, rather than changing it abruptly. This can create a more seamless and smooth visual effect when properties such as the size, position, or color of an element change.

To create a transition, you can use the transition property in CSS. The transition property takes two or three values: the property to be transitioned, the duration of the transition, and (optionally) the type of transition effect.

Here is an example of how to use the transition property:

In this example, the transition property is used to specify a 2-second transition for the width property, with an ease-in-out effect. This means that when the width property of the my-element element changes, it will transition smoothly over a period of 2 seconds, with a gradual acceleration at the start and end of the transition.

You can also use the transition-property, transition-duration, and transition-timing-function properties to specify the individual values of the transition.

Overall, transitions can add a layer of visual polish to your webpage and can make it more engaging and interactive for users.

TRANSITION:

Property name | Duration | Timing | Timing function | Delay

TRANSFORM:

 

The transform property in CSS allows you to apply a transformation to an element, such as scaling, rotating, or translating it. This can be useful for creating visual effects or for adjusting the layout of elements on a webpage.

Here are some examples of transformations that you can apply using the transform property:

• Scaling: You can use the scale function to change the size of an element. The scale function takes a single value that represents the scaling factor, where a value of 1 is the original size, and a value greater than 1 increases the size, and a value less than 1 decreases the size.

• Rotating: You can use the rotate function to rotate an element around a given point. The rotate function takes a single value that represents the angle of rotation in degrees.

• Translating: You can use the translate function to move an element along the x-axis or y-axis. The translate function takes two values that represent the distance to move along the x-axis and y-axis, respectively.

You can also combine multiple transformations using the transform property, by separating the functions with a space.

Overall, the transform property is a powerful tool for creating visual effects and for adjusting the layout of elements on a webpage.

 

BACKGROUND:

The background property in CSS allows you to control the background of an element. You can use the background property to specify a background color, background image, or both.

Here are some examples of how to use the background property:

• Background color: You can use the background-color property to specify a background color for an element.

• Background image: You can use the background-image property to specify a background image for an element.

• Multiple backgrounds: You can use the background property to specify multiple backgrounds for an element. The backgrounds will be layered on top of each other, with the first background listed being at the bottom and the last background listed being at the top.

In this example, the element has a red background color, with a background image of image.jpg layered on top of it. The no-repeat value specifies that the image should not repeat, and the center center value specifies that the image should be centered within the element.

Overall, the background property is a powerful tool for controlling the appearance of the background of an element. You can use it to create simple or complex backgrounds, and to add visual interest and depth to your webpage.

INTRODUCTION TO CSS FLEXBOX:

THE FLEXBOX MODEL:

Flexbox is a layout module in CSS that allows you to easily align and distribute elements within a container. It is particularly useful for creating flexible and responsive layouts that adjust to the size and orientation of the screen.

To use flexbox, you need to create a flex container by setting the display property of an element to flex or inline-flex. Then, you can use the various flexbox properties to control the layout of the child elements within the container.

Here are some examples of flexbox properties:

• flex-direction: This property controls the direction of the flex items within the container. The possible values are row, row-reverse, column, and column-reverse.
• justify-content: This property controls the alignment of the flex items along the main axis (horizontal axis for row and row-reverse, vertical axis for column and column-reverse). The possible values are flex-start, flex-end, center, space-between, and space-around.
• align-items: This property controls the alignment of the flex items along the cross axis (vertical axis for row and row-reverse, horizontal axis for column and column-reverse). The possible values are flex-start, flex-end, center, baseline, and stretch.

Here is an example of how to use flexbox to create a simple layout:

In this example, the container element is a flex container with its flex items arranged in a row, with space between the items and aligned to the center along the cross-axis.

Overall, flexbox is a powerful tool for creating flexible and responsive layouts that adapt to different screen sizes and orientations. It can help you create complex layouts with ease and can improve the usability of your webpage.

MEDIA QUERIES:

Media queries are a feature in CSS that allow you to apply styles based on the characteristics of the device or viewport. They are often used to create responsive designs that adapt to different screen sizes and orientations.

To use media queries, you need to specify a media type and one or more media features, and then include a block of styles that will be applied if the media features match the current device or viewport.

Here is an example of a simple media query:

In this example, the media query will apply the styles in the block if the width of the viewport is less than or equal to 500 pixels.

You can specify multiple media features in a media query by separating them with a comma.

In this example, the media query will apply the styles in the block if the width of the viewport is less than or equal to 500 pixels and the height of the viewport is greater than or equal to 300 pixels.

Overall, media queries are a useful tool for creating responsive designs that adapt to different devices and viewports. They allow you to apply styles based on the characteristics of the device or viewport and can help you create a more seamless and consistent user experience.

 

 

That’s it…

Home

CSS reference