css inline

<link rel="stylesheet" type="text/css" href="style.css">

View another examples Add Own solution

4.3

Sourabh Chiploonkar 105 points

                                    /******************* BASIC BLOCK POSITIONING **********************/

/******************** Static Position  *************************/
/*All elements are static in their position by default. Which means 
that, all elements are organized just like they would if your code 
didn't have any CSS and were just pure HTML */

tag_name {
  position: static;
}

/******************** Relative Position *************************/
/*It allow us to position this element relative to how it would have
been positioned had it been static. You can use the coordinate 
properties to guide this element (by giving some margins to the block), 
relative to what was the standard layout. This new position will not 
influence the distribution of other elements (the others will keep 
the standard layout, as if your element leaves a &quot;shadow&quot; of where it 
was supposed to be). Therefore, some overlaps and lack of coordination 
can occur when you move your element*/

tag_name {
  position: relative;
  left: 30px;
  right: 10px;
  bottom: 2px;
  top: 4px;
  
  z-index: 1;  /* It decides which element will show on top of the 
                  other. The first to show, is the one with the 
                  greatest index */
}

/******************** Absolute Position *************************/
/* With this property, we are able to position the element relative 
to the &lt;body&gt; or relative to it's parent, IF the parent is itself isn't 
&quot;static&quot;. Using the coordination properties, we do not increase or 
decrease the margins in relation to the standard position, but rather, 
we are increasing or decreasing the distance in relation to the &quot;walls&quot; 
of the block that contains this element, for example, a parent &lt;div&gt; 
that contains a &lt;h1&gt; element. The name &quot;absolut&quot;, comes from the cases 
where the parent is the &lt;body&gt; element. When you use this property, 
you are taking the element away from the natural flow of your document, 
so, the other elements position will not take into account your absolute 
element*/

tag_name {
  position: absolute;
  left: 30px;
  right: 10px;
  bottom: 2px;
  top: 4px;  
  
  z-index: 1;  /* It decides which element will show on top of the 
                  other. The first to show, is the one with the 
                  greatest index */
}

/* For exemple: */

div{
  position: relative;
}

h1 {
  position: absolute;      /* In relation to the div element*/
  left: 30px;
  top: 4px;
}

/******************** Fixed Position *************************/
/*As soon as the element is fixed in a certain position, relative 
to it's parent, then, whenever we scroll down the webpage, the element 
maintains its fixed position on the screen. This property will also 
make the other html elements, ignore the position of this element 
during their layout (it takes it away from the natural flow of the 
document). */

tag_name {
  position: fixed;
  left: 30px;
  right: 10px;
  bottom: 2px;
  top: 4px;
  
  z-index: 2;  /* It decides which element will show on top of the 
                  other. The first to show, is the one with the 
                  greatest index */
}

/******************** Sticky Position *************************/
/* This property will stick the element to the screen when you 
reach its scroll position */

tag_name {
  position: -webkit-sticky;   /* For Safari */
  position: sticky;
  left: 20px;
  right: 60px;
  bottom: 5px;
  top: 13px;
  
}

/******************* NOTES ABOUT THE Z-INDEX **********************/
/* By default, the z-index of an element is zero, so if you change the 
z-index to something above or below that value, you are putting that 
element above or below the ones you didn't change.
Another important thing to be aware of is that the z-index only worked 
for elements that have a position different from the standard. This 
means that, for elements with Static position, this won't work.
So, you can only make two elements interact in the z plane if they both 
have a define position as: Relative, Absolute, Fixed, ... */

tag_name_1 {
  position: absolute;
  z-index: -1;
  
}

tag_name_2 {
  position: relative;      /* tag_name_1 will be below the tag_name_2 */
}

Thank you! 10

4.3 (10 Votes)

Joel Berger 80 points

                                    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;mystyle.css&quot;&gt;

Thank you! 2

4 (2 Votes)

Joe Black 100 points

                                    Three ways to add CSS to the body of html:
	1)External CSS
	2)Internal CSS
	3)Inline CSS

1) Externally:  
    Type your css code in a file. Remember you file name.
	Then,
&lt;head&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;FileName.css&quot; &gt;
&lt;/head&gt;

2) Internally:
	Type your cSS in the html file itself. (It is not preffered until
	little CSS code is to be added). This can be done by style tag.
	Example:
	&lt;head&gt;
	&lt;style&gt;
	h1 {
      text-color:red;
      text-size: 0.8em;
    }
    &lt;/style&gt;
	&lt;/head&gt;

3) Inline:
	This method is not used by developers as it is very lengthy and
	maintaining code becomes difficult.
	Example:
   &lt;h1 style=&quot;color:blue;text-align:center;&quot;&gt;Header file&lt;/h1&gt;

Thank you! 1

5 (1 Votes)

3.5

Rimp 95 points

                                    &lt;div class=&quot;inline&quot;&gt;1&lt;br /&gt;2&lt;br /&gt;3&lt;/div&gt;
&lt;div class=&quot;inline&quot;&gt;1&lt;br /&gt;2&lt;br /&gt;3&lt;/div&gt;
&lt;div class=&quot;inline&quot;&gt;1&lt;br /&gt;2&lt;br /&gt;3&lt;/div&gt;
&lt;br class=&quot;clearBoth&quot; /&gt;&lt;!-- you may or may not need this --&gt;

Thank you! 4

3.5 (4 Votes)

Xzhu 95 points

                                    &lt;p style=&quot;color:red&quot;&gt;This text is red&lt;/p&gt;

Thank you! 7

4 (7 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category CSS

CSS 2022-03-27 22:50:16 make text bigger html5
CSS 2022-03-27 21:40:08 move list item to left css
CSS 2022-03-27 21:35:05 reduce image size css
CSS 2022-03-27 21:30:21 css image background center horizontally in div
CSS 2022-03-27 21:05:02 css button styles
CSS 2022-03-27 18:50:09 compass font awesome
CSS 2022-03-27 18:50:06 modal in materialize css
CSS 2022-03-27 17:55:12 box round corner css
CSS 2022-03-27 17:45:12 jquery add css
CSS 2022-03-27 17:45:01 css image fit in div with aspect ratio

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

css inline

Welcome Back!

Create a Free Account