CSS tutorial (CSS Border-radius)

CSS border-property:- The css property sets the rounded borders and provides the rounded corners around an element, tag, or div. It defines the radius of the corners of an element.

It is shorthand for border top-left-radius, border-top-right, border-bottom- right-radius and border-bottom-left-radius. It gives the rounded shape to the corners of the border of an element. We can specify the border for all four corners of the box in a single declaration using the border-radius. The values of this property can be defined in percentage or length units.If the bottom-left value is omitted, then it will be same as the top-right. If the value of bottom-right is eliminated, then it will be same as the top-left. Similarly, if top-right is eliminated, then it will be the same as top-left.

Let’s see what happens when we provide a single value, two values, three values, and four values to this property.

  • If we provide a single value (such as border-radius: 30px;) to this property, it will set all corners to the same value.
  • When we specify two values (such as border-radius: 20% 10% 😉, then the first value will be used for the top-left and bottom-right corners, and the second value will be used for the top-right and bottom-left corners.
  • When we use three values (such as border-radius: 10% 30% 20%;) then the first value will be used for the top-left corner, the second value will be applied on top-right, and bottom-left corners and the third value will be applied to the bottom-right corner.
  • Similarly, when this property has four values (border-radius: 10% 30% 20% 40%;) then the first value will be the radius of top-left, the second value will be used for the top-right, the third value will be applied on bottom-right, and the fourth value is used for bottom-left.

example:-

Border-radius for specific corners:-

It sets the border radius for the top-left corner.

Example:- border-top-right-radius

It sets the border-radius for the top-right corner.

Example- border-bottom-right-radius

It sets the border-radius for the bottom-right corner.

Example- border-bottom-left-radius

It sets the border-radius for the bottom-left corner.

We can specify seprate horizontal and vertical values by using the slash(/) symbol. The values before the slash (/) is used for the horizontal radius and the values after the slash(/) are for the vertical radius.

There is an example given below using the slash(/) symbol.

Example:-

Tagged : / /

Introduction to CSS(Cascading Style Sheets) Part-1:-

CSS is the language we use to style the web pages. CSS stands for Cascading Styles Sheets. It describes how HTML elements are displayed on the screen. It can control the layout of multiple web pages all at once.

CSS Syntax:-

CSS selector

The selector points the HTML elemet you want to style.

The declaration block contains one or more declarations seprated bs semicolons.

Each declaration includes a css property name and value, seprated by a colons.

Multiple CSS declarations are seprated with semicolons, and declarations block are surrounded by curly braces.

Advantages of CSS:-

  1. Time saving:-We can write css once and then reuse same sheet in multiple HTML pages. It saves lots of time.
  2. Faster load pages:- If we use CSS, we do not need to write HTML tag attributes everytime. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
  3. Easy maintenence:- To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
  4. Multiple device compatiblity:- Style sheets allow content to be optimized for more than one type of device.
  5. Global web standards:- Now HTML attributes are being deprecated and it is bieng recommended to use CSS.

Ways of inserting CSS:-

  1. External style sheets
  2. Internal style sheets/Embedded Style sheets
  3. Inline css

External Style Sheets:-

An external style sheet is a separate document that contains only CSS rules. An external style sheet helps to change the look of an entire website by changing just one css file. It should not contain any HTML Tags. It has .css extension.

Example:-

p { color: red; font-size: 24px;}

h1{ color: blue; font-size: 24em;}

1. Open notepad++ or any other Editor or IDE

2. Write CSS Code

3. Save with .css extension for example geekyshows.css

How to link Web Page to an External Style Sheet:-

The href attribute with <link> element inside the <head> tag is used to link web page to an external style sheet.

<html>

  <head>

    <title>Welcome to Geekyshows</title>

    <link rel=“stylesheet” href=“geekyshows.css”>

  </head>

  <body>

  <h1>I am Heading</h1>

  <p>I am first Paragraph.</p>

  <p>I am second Paragraph</p>

  </body>

</html>

Internal Style Sheets:-

Internal Style sheet is a set of style that is created as a part of HTML document. An internal style sheet may be used if one single page has a unique style.

Internal Style sheets are created using <style> element, which is added inside the <head> element of the HTML document.

Example:-

<html>

  <head>

    <title>Hello CSS</title>

    <style type=“text/css”>

    p { color: red; font-size: 24px;}

  h1{ color: blue; font-size: 24em;}

    </style>

  </head>

  <body>

  <h1>I am Heading</h1>

  <p>I am first Paragraph.</p>

  <p>I am second Paragraph</p>

  </body>

</html>

Inline Styles:-

Inline style is useful when we need to define specific style for individual elements present on a web page. The style attribute in a specific Tag or element, is used to create inline style. The style attribute can contain any CSS property between double quotes.

Ex:-

For paragraph:-

<p style=“color: red; font-size: 22px;”> I am first paragraph</p>

<p> I am second paragraph</p>

For Heading: –

<h1 style=“color: red; font-size: 22px;”> I am Heading</h1>

Tagged : / /

Some important CSS property for uses in your responsive bootstrap 4 pages

How do you change the direction of flex in CSS?

The flex-direction property accepts 4 different values:

PropertyDescription
row (default)same as text direction.
row-reverseopposite to text direction.
columnsame as row but top to bottom.
column-reversesame as row-reverse top to bottom.

What are the background properties?

All CSS Background Properties
Property Description

PropertyDescription
background-imageSets the background image for an element
background-originSpecifies where the background image(s) is/are positioned
background-positionSets the starting position of a background image
background-repeatSets how a background image will be repeated

How do you change position in CSS?

You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.

PropertyDescription
Move LeftUse a negative value for left.
Move RightUse a positive value for left.
Move UpUse a negative value for top
Move DownUse a positive value for top.

What is Z-index in CSS?

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
If you want to create a custom stacking order, you can use the z-index property on a positioned element. The z-index property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis.

How do I fix Z-index in CSS?

To sum up, most issues with z-index can be solved by following these two guidelines:
Check that the elements have their position set and z-index numbers in the correct order.
Make sure that you don’t have parent elements limiting the z-index level of their children.

How do you use sticky position in CSS?

CSS Demo: position

To see the effect of sticky positioning, select the position: sticky option and scroll this container. The element will scroll along with its container, until it is at the top of the container (or reaches the offset specified in top ), and will then stop scrolling, so it stays visible.

How do you flex vertically?

Vertical alignment using align-self

PropertyDescription
flex-startalign to the top of the container.
flex-endalign to the bottom of the container.
centeralign at the vertical center of the container.
baselinedisplay at the baseline of the container.
stretchitems are stretched to fit the container.
Tagged : / / / /