Understanding Integrals in Calculus
Learn about integrals in calculus with detailed explanations and examples using LaTeX mathematical notation.
September 5th, 2024
By: Ismail M. BOUSSEKINE
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
CSS can be used to define colors, fonts, layout, and many other things on your website. It allows you to separate the content of your website from its design, making it easier to maintain and update. It can be
CSS is a powerful tool that allows you to create beautiful and responsive websites. In this workshop, we will cover the basics of CSS and show you how to style your web pages, It will be the continuation of the HTML workshop.
CSS supports various units of measurement for specifying lengths, including:
px
(pixels), cm
(centimeters), mm
(millimeters), in
(inches), pt
(points), pc
(picas)em
(relative to the font-size of the element usually 1em
=16px
), rem
(relative to the font-size of the root element), %
(percentage), vw
(viewport width) and vh
(viewport height).Example:
CSS allows you to specify colors using different formats:
red
, blue
, green
, etc.#RRGGBB
or #RGB
or #ffffff
(white) Try itrgb(255, 0, 0)
Try itrgba(255, 0, 0, 0.5)
(includes alpha for transparency)hsl(0, 100%, 50%)
(the first value is the hue in degrees, the second is the saturation as a percentage, and the third is the lightness as a percentage) Try ithsla(0, 100%, 50%, 0.5)
(includes alpha for transparency)Example:
CSS selectors are used to select the HTML elements you want to style. Common selectors include:
element
.class
#id
[attribute=value]
:pseudo-class
::pseudo-element
element element
element > element
Selectors have different levels of specificity, which determines which styles are applied when multiple rules match the same element. Specificity is calculated based on the number of each type of selector in the rule:
>
and ~
combinators: doesnt affect specificity*:not()
* *:nth-child()*
, *:nth-of-type()*
: doesnt affect specificityExample:
padding is the space between the content and the border of an element. You can set the padding of an element using the padding
property in CSS. The padding property can have one, two, three, or four values.
value can be in px, em, rem, %, or auto.
Margin is the space outside the border of an element. You can set the margin of an element using the margin
property in CSS. The margin property can have one, two, three, or four values.
Border is the line that surrounds the content and padding of an element. You can set the border of an element using the border
property in CSS. The border property can have three values: width, style, and color.
Possible values for border-style are: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Possible values for border-width are: thin | medium | thick | value(px, em, rem, %)
Outline is similar to border but it is outside the border. You can set the outline of an element using the outline
property in CSS. The outline property can have three values: width, style, and color.
Please bare in mind:
An inline element does not start on a new line and only takes up as much width as necessary. You can set an element to be inline using the display
property in CSS.
Tags that are inline
by default :
<span>
, <a>
, <strong>
,<em>
, <img>
, <input>
, <label>
, <code>
...
A block element starts on a new line and takes up the full width available. You can set an element to be block using the display
property in CSS.
The diffrence between inline and block is that inline elements do not start on a new line and only take up as much width as necessary, while block elements start on a new line and take up the full width available.
Tags that are block
by default: <div>
, <p>
, <h1>
to <h6>
, <ul>
, <ol>
, <li>
, <table>
...
An inline-block element is placed as an inline element on the same line as adjacent content but it can have a width and height. You can set an element to be inline-block using the display
property in CSS.
the diffrence between inline and inline-block is that inline-block elements are placed as inline elements on the same line as adjacent content but they can have a width and height.
background is the area behind the content and padding of an element. You can set the background of an element using the background
property in CSS.
You can also set the background image, repeat, position, and size using the background-image
, background-repeat
, background-position
, and background-size
properties.
You can use shorthand to set all the background properties at once.
Text is the content of an element. You can set the text of an element using the color
, font-family
, font-size
, font-weight
, text-align
, and text-decoration
properties in CSS.
You can use shorthand to set all the text (only font-*) properties at once.
CSS allows you to add shadow effects to elements using the box-shadow
and text-shadow
properties.
h-offset
: Horizontal offset of the shadow.v-offset
: Vertical offset of the shadow.blur-radius
: The blur radius of the shadow.spread-radius
: The spread radius of the shadow.color
: The color of the shadow.CSS transitions allow you to change property values smoothly (over a given duration).
background-color
, color
, width
, height
, opacity
, transform
, etc.ease
, linear
, ease-in
, ease-out
, ease-in-out
, cubic-bezier(n,n,n,n)
.Example:
You can specify multiple transitions using commas:
Positioning and layout are crucial aspects of CSS that allow you to control the placement and arrangement of elements on a web page. There are several positioning methods available in CSS, including static, relative, absolute, fixed, and sticky positioning.
A fixed position element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. You can set an element to be fixed using the position
property in CSS.
A sticky position element toggles between relative and fixed, depending on the user's scroll position. It is positioned relative until a given offset position is met in the viewport, then it "sticks" in place (like position:fixed).
An absolute position element is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
A relative position element is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
Relative and absolute positioning can be used together to create complex layouts.
This will position the .item
element at the top-left corner of the .container
element.
The z-index property specifies the stack order of an element. An element with a higher z-index value will be displayed on top of an element with a lower z-index value.
So if you have two elements that overlap, you can use the z-index property to control which one is displayed on top.
Flexbox is a layout model that allows you to design complex layouts with ease. It provides a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic.
Flexbox properties include flex-direction
, flex-wrap
, justify-content
, align-items
, and more, which provide a powerful set of tools for creating responsive layouts.
justify-content
: Aligns items horizontally.align-items
: Aligns items vertically.align-content
: Aligns items when there is extra space.gap
: Space between items.flex-wrap
: Wraps items to the next line.Congratulations! You have completed the CSS workshop. You now have a solid understanding of CSS and how to style your web pages. Keep practicing and experimenting with different designs to improve your skills. Thank you for joining us, and we hope to see you in future workshops. Happy coding!.
Learn about integrals in calculus with detailed explanations and examples using LaTeX mathematical notation.
September 5th, 2024
GDSC ENSTA Workshop on HTML for beginners. Learn the basics of HTML and how to create a simple webpage.
November 10th, 2024
This article will guide you on how to choose your linux distribution based on your needs and use case, It will also provide a list of the best linux distributions out there.
September 13th, 2024