Responsive Header With Contact Info HTML | CSS (Quick Tutorial)

Responsive Header With Contact Info HTML | CSS (Quick Tutorial) - How to create a home page | landing page header that is responsive and shows some basic contact information as well as branding. Learn how to quickly create a header that looks good on all devices and shows all of your necessary business info.

#html #css

What is GEEK

Buddha Community

Responsive Header With Contact Info HTML | CSS (Quick Tutorial)
anita maity

anita maity

1621077133

Responsive Footer Design using HTML, CSS & Bootstrap

Hello Readers, welcome to my other blog, today in this blog I’m going to create a Responsive Footer by using HTML & CSS only. Earlier I have shared How to create a Responsive Navigation Menu and now it’s time to create a footer section.

As you can see on the image which is given on the webpage. There are various important topics there like About us, Our services and subscribes, some social media icons, and a contact section for easy connection. I want to tell you that it is fully responsive. Responsive means this program is fit in all screen devices like tablet, small screen laptop, or mobile devices.

Live Demo


#responsive footer html css template #footer design in html #simple footer html css code #simple responsive footer codepen #responsive footer code in html and css #responsive footer html css codepen

Understanding CSS's !important declaration

!important in CSS is a special notation that we can apply to a CSS declaration to override other conflicting rules for the matching selector.

When we work on web projects, it is natural that we have some style declarations that other styles overrule.

This is not an issue for an experienced developer who understands the core mechanism of CSS. However, it can be difficult for beginners to understand why the style declarations they expect are not applied by the browser.

So, instead of them focusing on resolving the issue naturally, they tend to go for the quick fix by adding the !important declaration to enforce the style they expect. While this approach might work for that moment, it can also initiate another complex problem.

In this guide, we will review the following, including how to use !important and when we should use it:

  • The CSS core mechanism
  • Understanding the !important declaration before we use it
  • :is() and other related pseudo-class functions
  • When exactly can we use !importantdeclaration?
    • Utility classes
    • The style rules we cannot override

Enough said, let’s dive in.

The CSS core mechanism

Understanding the core principles of CSS will naturally enable us to know when it’s obvious to use the !important declaration. In this section, we will walk through some of these mechanisms.

Consider the HTML and CSS code below, what color do you think the heading text will be?

First, the HTML:

<h2 class="mytitle">This is heading text</h2>

Then, the CSS:

h2 {
  color: blue;
}
h2 {
  color: green;
}

The text will render green! This is basic CSS fundamental. With the CSS cascade algorithm, the ordering of CSS rules matters. In this case, the declaration that comes last in the source code wins.

Normally, this is logical. In the first place, we should not repeat the same selector as we did above. CSS does not want repetition, so it uses the last declaration rule.

However, there are cases whereby we create generic styles for the root elements, like the h2, and then add classes to style specific elements. Let’s consider the following example as well, starting with the HTML:

<h2>This is heading text</h2>
<h2 class="mytitle">This is heading text</h2>

Then, let’s see the CSS:

.mytitle {
  color: blue;
}
h2 {
  color: green;
}

In the above code, the first h2 element has no class applied, so it is obvious that it gets the green color of the h2 selector.

However, the second h2 element uses the rule for the class selector, .mytitle, even when the element selector rule comes last in the CSS code. The reason for that is that the class selector has a higher specificity when compared to the element selector.

In other words, the weight applied to the declaration in a class selector is more than element selector’s weight.

Similarly, the declaration in an ID selector is more than that of the class selector. In this case, the red color in the code below takes precedence:

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

Followed by the CSS:

.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

Furthermore, an inline style attribute takes precedence over the ID selector, starting with the HTML:

<h2 id="maintitle" style="color: black;" class="mytitle">This is heading text</h2> 

 

Then followed by the CSS:

.mytitle {/*...*/}

#maintitle {/*...*/}

h2 {/*...*/}

This is the ideal priority flow in CSS and must be maintained to avoid anomalies. The !important declaration most of the time comes when we are oblivious of these basic rules.

The inline style attribute and each of the selectors have values that browsers assign to them. That way, it knows which one has higher or lower priority. Think of this value as a number of four single digits with the style attribute assigned the strongest weight value of 1000.

This follows the ID with a value of 0100, then class with 0010, and finally the element selector with 0001.

Sometimes we can combine selectors targeting specific elements, as seen in the example below:

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

 

Followed by the CSS:

h2.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

The specificity of the h2.mytitle selector in the CSS above is the addition of h2 and .mytitle. That is, 0001 + 0010 = 0011. This total value, however, is less than that of the #maintitle ID that is 0100.

So, the browser uses the declaration in the ID selector to override other conflicting rules. In a case of equal weight, the last rule declaration wins.

Now that we know which rules are most relevant and why the browser applies them, it will become naturally obvious whether or not to use this !important declaration.

Understanding the !important declaration before we use it

Before we consider using the !important notation, we must ensure that we follow the specificity rule and use the CSS cascade.

In the code below, we have the h2 and h3 elements styled to be a red color:

<h2 class="mytitle">This is heading II text</h2>
<h3 class="mytitle">This is heading III text</h3>

Then, .mytitle in CSS:

.mytitle {
  color: red;
}

But, let’s say at some point, we want to give the h3 element a blue color. Adding a style rule like the one below would not change the color because the class has more weight and it’s more specific than the element selector, as we’ve learned:

.mytitle {...}
h3 {
  color: blue;
}

However, using the !important on the lesser weight makes the browser enforce that declaration over other conflicting rules:

.mytitle {...}
h3 {
  color: blue !important;
}

This is because the !important notation increases the weight of the declaration in the cascade order of precedence. What this means is that we’ve disrupted the normal priority flow. Hence, bad practice, and can lead to difficulties in code maintenance and debugging.

If at some other point, we want to override the above important rule, we can apply another !important notation on a declaration with higher specificity (or the same if it is lower down in the source). It can then lead to something like this:

h3 {
  color: blue !important;
}

/* several lines of rules */

.mytitle {
  color: green !important;
}

This is bad and should be avoided. Instead, we should check if:

  1. Rearranging the rule or rewriting the selectors can solve the cascading issue
  2. Increasing the specificity of the target element can solve the issue

Well, let’s find out. Back to our style rules, we can enforce a blue color on the h3 element by increasing the specificity score.

As seen below, we can combine selectors until their specificity score supersedes the conflicting rule. The h3.mytitle selector gives a specificity score of 0011, which is more than the .mytitle of 0010 score:

.mytitle {...}
h3.mytitle {
  color: blue;
}

As we can see, instead of using the !important declaration to enforce a rule, we focus on increasing the specificity score.

:is() and other related pseudo-class functions

Sometimes, we may trace issues to a pseudo-class function. So, knowing how it works can save us a lot of stress. Let’s see another example.

Imagine we are working on a project and see the following code:

<h1 id="header">
  heading <span>span it</span>
  <a href="#">link it</a>
</h1>
<p class="paragraph">
  paragraph <span>span it</span>
  <a href="">link it</a>
</p>

Using the following CSS rules gives us the output after:

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

Output Heading Span It Link It

Now, let’s say we want to give the span and the link text in the paragraph another color of blue. We can do this by adding the following rule:

.paragraph span,
.paragraph a {
  color: blue;
}

The earlier rule will override the blue color despite being further down the line:

Blue Color

As a quick fix, we can enforce our blue color by using the !important notation like so:

:is(#header, p) span,
:is(#header, p) a {...}

.paragraph span,
.paragraph a {
  color: blue !important;
}

But, as you may guess, that is bad practice, so we must not be quick to use the !important notation. Instead, we can start by analyzing how every selector works. The :is() is used in the code is a pseudo-class function for writing mega selectors in a more compressed form.

So, here is the following rule in the above code:

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

Which is equivalent to the following:

#header span,
p span,
#header a,
p a {
  color: red;
}

So, why is .paragraph span and .paragraph a not overriding the color despite having a specificity score of 0011, which is higher than 0002 of the p span and p a.

Well, every selector in the :is() uses the highest specificity in the list of arguments. In that case, both the #header and the p in the :is(#header, p) uses the specificity score of the #header, which is 0100. Thus, the browser sticks to its value because it has a higher specificity.

Thus, anytime we see this type of conflict, we are better off not using the pseudo-class function and sticking to its equivalent like the following:

#header span,
p span,
#header a,
p a {
  color: red;
}

Now, we should be able to see the expected result without using the !important notation that disrupts cascade order.

Result With Important Notation

You can see for yourself on CodeSandbox.

When exactly can we use !important declaration?

Below are a few occasions where using the !important notation is recommended.

Utility classes

Assuming we want to style all buttons on a page to look the same, we can write a CSS rule that can be reused across a page. Let’s take a look at the following markup and style below:

<p>Subscribe button : <a class="btn" href="#">Subscribe</a></p>

<section class="content">
  <p>
    This <a href="#" class="btn">button</a> style is affected by a higher
    specificity value .
  </p>
  A link here: <a href="#">Dont click</a>
</section>

Followed by the CSS:

.btn {
  display: inline-block;
  background: #99f2f5;
  padding: 8px 10px;
  border: 1px solid #99f2f5;
  border-radius: 4px;
  color: black;
  font-weight: normal;
  text-decoration: none;
}

.content a {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
}

In the above code, we can see that the button link within the section element is targeted by both selectors in the CSS. And, we learned that for conflicting rules, the browser will use the most specific rule. As we expect, .content a has a score of 0011 while .btn has a score of 0010.

The page will look like this:

Example Of Subscribe Page

In this case, we can enforce the .btn rule by adding the !important notation to the conflicting declarations like this:

.btn {
  /* ... */
  color: black !important;
  font-weight: normal !important;
  text-decoration: none !important;
}

The page now looks as we expect:

New Subscribe Page

See for yourself on CodeSandbox.

The style rules we cannot override

This mostly happens when we don’t have total control over the working code. Sometimes, when we work with a content management system like WordPress, we may find that an inline CSS style in our WordPress theme is overruling our custom style.

In this case, the !important declaration is handy to override the theme inline style.

Conclusion

The !important declaration is never meant to be used as we desire. We must only use it if absolutely necessary, such as a situation where we have less control over the code or very extreme cases in our own code.

Whether or not we use it depends on how we understand the core CSS mechanism, and in this tutorial, we covered that as well.

I hope you enjoyed reading this post. If you have questions or contributions, share your thought in the comment section and remember to share this tutorial around the web.

Source: https://blog.logrocket.com/understanding-css-important-declaration/

#css 

wp codevo

wp codevo

1608041337

RESPONSIVE Personal PORTFOLIO Website HTML CSS And JAVASCRIPT

https://youtu.be/J8g9gyzhEoM

#responsive website using html5 and css3 #portfolio website #one page personal website html css #portfolio website design in html css #css responsive website design #responsive website html css

Alisha  Larkin

Alisha Larkin

1617789060

HTML Tutorial For Beginners

The prospect of learning HTML can seem confusing at first: where to begin, what to learn, the best ways to learn — it can be difficult to get started. In this article, we’ll explore the best ways for learning HTML to assist you on your programming journey.

What is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents meant to be displayed in a web browser. Along with Cascading Style Sheets (CSS) and JavaScript, HTML completes the trio of essential tools used in creating modern web documents.

HTML provides the structure of a webpage, from the header and footer sections to paragraphs of text, videos, and images. CSS allows you to set the visual properties of different HTML elements, like changing colors, setting the order of blocks on the screen, and defining which elements to display. JavaScript automates changes to HTML and CSS, for example, making the font larger in a paragraph when a user clicks a button on the page.

#html #html-css #html-fundamentals #learning-html #html-css-basics #html-templates

Comprender La Declaración !important De CSS

!importanten CSS es una notación especial que podemos aplicar a una declaración de CSS para anular otras reglas en conflicto para el selector coincidente.

Cuando trabajamos en proyectos web, es natural que tengamos algunas declaraciones de estilo que anulan otros estilos.

Este no es un problema para un desarrollador experimentado que comprende el mecanismo central de CSS. Sin embargo, puede ser difícil para los principiantes entender por qué el navegador no aplica las declaraciones de estilo que esperan.

Entonces, en lugar de enfocarse en resolver el problema de forma natural, tienden a buscar la solución rápida agregando la !importantdeclaración para hacer cumplir el estilo que esperan. Si bien este enfoque podría funcionar en ese momento, también puede iniciar otro problema complejo.

En esta guía, revisaremos lo siguiente, incluido cómo usarlo !importanty cuándo debemos usarlo:

  • El mecanismo central de CSS
  • Comprender la !importantdeclaración antes de usarla
  • :is()y otras funciones de pseudoclase relacionadas
  • ¿Cuándo exactamente podemos usar la !importantdeclaración?
    • Clases de utilidad
    • Las reglas de estilo que no podemos anular

Suficiente dicho, vamos a sumergirnos.

El mecanismo central de CSS

Comprender los principios básicos de CSS naturalmente nos permitirá saber cuándo es obvio usar la !importantdeclaración. En esta sección, analizaremos algunos de estos mecanismos.

Considere el código HTML y CSS a continuación, ¿de qué color cree que será el texto del encabezado?

Primero, el HTML:

<h2 class="mytitle">This is heading text</h2>

Entonces, el CSS:

h2 {
  color: blue;
}
h2 {
  color: green;
}

¡El texto se volverá verde! Esto es CSS básico fundamental. Con el algoritmo de cascada de CSS , el orden de las reglas de CSS importa. En este caso, gana la última declaración en el código fuente.

Normalmente, esto es lógico. En primer lugar, no debemos repetir el mismo selector que hicimos anteriormente. CSS no quiere repetición, por lo que usa la última regla de declaración.

Sin embargo, hay casos en los que creamos estilos genéricos para los elementos raíz, como el h2, y luego agregamos clases para diseñar elementos específicos. Consideremos también el siguiente ejemplo, comenzando con el HTML:

<h2>This is heading text</h2>
<h2 class="mytitle">This is heading text</h2>

Entonces, veamos el CSS:

.mytitle {
  color: blue;
}
h2 {
  color: green;
}

En el código anterior, el primer h2elemento no tiene clase aplicada, por lo que es obvio que obtiene el color verde del h2selector.

Sin embargo, el segundo h2elemento usa la regla para el selector de clase .mytitle, incluso cuando la regla del selector de elementos viene en último lugar en el código CSS. La razón de esto es que el selector de clase tiene una mayor especificidad en comparación con el selector de elementos.

En otras palabras, el peso aplicado a la declaración en un selector de clase es mayor que el peso del selector de elementos.

De manera similar, la declaración en un selector de ID es más que la del selector de clase. En este caso, el color rojo en el siguiente código tiene prioridad:

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

Seguido por el CSS:

.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

Además, un styleatributo en línea tiene prioridad sobre el selector de ID, comenzando con el HTML:

<h2 id="maintitle" style="color: black;" class="mytitle">This is heading text</h2> 

 

Luego seguido por el CSS:

.mytitle {/*...*/}

#maintitle {/*...*/}

h2 {/*...*/}

Este es el flujo de prioridad ideal en CSS y debe mantenerse para evitar anomalías. La !importantdeclaración la mayoría de las veces llega cuando nos olvidamos de estas reglas básicas.

El atributo de estilo en línea y cada uno de los selectores tienen valores que les asignan los navegadores. De esa manera, sabe cuál tiene mayor o menor prioridad. Piense en este valor como un número de cuatro dígitos individuales con el styleatributo asignado al valor de ponderación más fuerte de 1000.

Esto sigue al ID con un valor de 0100, luego a la clase con 0010, y finalmente al selector de elementos con 0001.

A veces podemos combinar selectores dirigidos a elementos específicos, como se ve en el siguiente ejemplo:

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

 

Seguido por el CSS:

h2.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

La especificidad del h2.mytitleselector en el CSS anterior es la adición de h2y .mytitle. Es decir, 0001 + 0010 = 0011. Este valor total, sin embargo, es menor que el del #maintitleID que es 0100.

Entonces, el navegador usa la declaración en el selector de ID para anular otras reglas en conflicto. En un caso de igual peso, gana la declaración de la última regla.

Ahora que sabemos qué reglas son las más relevantes y por qué el navegador las aplica, será obvio si usar o no esta !importantdeclaración.

Comprender la !importantdeclaración antes de usarla

Antes de considerar el uso de la !importantnotación, debemos asegurarnos de que seguimos la regla de especificidad y usamos la cascada CSS.

En el siguiente código, tenemos los elementos h2y h3diseñados para ser un redcolor:

<h2 class="mytitle">This is heading II text</h2>
<h3 class="mytitle">This is heading III text</h3>

Luego, .mytitleen CSS:

.mytitle {
  color: red;
}

Pero digamos que en algún momento queremos darle un color al h3elemento . blueAgregar una regla de estilo como la siguiente no cambiaría el color porque la clase tiene más peso y es más específica que el selector de elementos, como hemos aprendido:

.mytitle {...}
h3 {
  color: blue;
}

Sin embargo, usar !importanton the lesserweight hace que el navegador aplique esa declaración sobre otras reglas en conflicto:

.mytitle {...}
h3 {
  color: blue !important;
}

Esto se debe a que la !importantnotación aumenta el peso de la declaración en el orden de precedencia en cascada. Lo que esto significa es que hemos interrumpido el flujo de prioridad normal. Por lo tanto, es una mala práctica y puede generar dificultades en el mantenimiento y la depuración del código.

Si en algún otro punto, queremos anular la regla importante anterior, podemos aplicar otra !importantnotación en una declaración con mayor especificidad (o lo mismo si está más abajo en la fuente). Entonces puede conducir a algo como esto:

h3 {
  color: blue !important;
}

/* several lines of rules */

.mytitle {
  color: green !important;
}

Esto es malo y debe evitarse. En su lugar, debemos comprobar si:

  1. Reorganizar la regla o reescribir los selectores puede resolver el problema en cascada
  2. El aumento de la especificidad del elemento de destino puede resolver el problema

Bueno, averigüémoslo. Volviendo a nuestras reglas de estilo, podemos imponer un bluecolor en el h3elemento aumentando la puntuación de especificidad.

Como se ve a continuación, podemos combinar selectores hasta que su puntaje de especificidad reemplace la regla en conflicto. El h3.mytitleselector otorga una puntuación de especificidad de 0011, que es mayor que la puntuación .mytitlede :0010

.mytitle {...}
h3.mytitle {
  color: blue;
}

Como podemos ver, en lugar de usar la !importantdeclaración para hacer cumplir una regla, nos enfocamos en aumentar el puntaje de especificidad.

:is()y otras funciones de pseudoclase relacionadas

A veces, podemos rastrear problemas hasta una función de pseudoclase. Entonces, saber cómo funciona puede ahorrarnos mucho estrés. Veamos otro ejemplo.

Imagina que estamos trabajando en un proyecto y vemos el siguiente código:

<h1 id="header">
  heading <span>span it</span>
  <a href="#">link it</a>
</h1>
<p class="paragraph">
  paragraph <span>span it</span>
  <a href="">link it</a>
</p>

El uso de las siguientes reglas CSS nos da el resultado después:

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

Ahora, digamos que queremos darle al spany al texto del enlace en el párrafo otro color de blue. Podemos hacer esto agregando la siguiente regla:

.paragraph span,
.paragraph a {
  color: blue;
}

La regla anterior anulará el bluecolor a pesar de estar más abajo en la línea:

Como una solución rápida, podemos hacer cumplir nuestro bluecolor usando la !importantnotación de esta manera:

:is(#header, p) span,
:is(#header, p) a {...}

.paragraph span,
.paragraph a {
  color: blue !important;
}

Pero, como puede suponer, esa es una mala práctica, por lo que no debemos apresurarnos a usar la !importantnotación. En cambio, podemos comenzar analizando cómo funciona cada selector. La :is()que se usa en el código es una función de pseudoclase para escribir megaselectores en una forma más comprimida.

Entonces, aquí está la siguiente regla en el código anterior:

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

Lo cual es equivalente a lo siguiente:

#header span,
p span,
#header a,
p a {
  color: red;
}

Entonces, ¿por qué .paragraph spany .paragraph ano anula el color a pesar de tener un puntaje de especificidad de 0011, que es más alto que 0002el de p spany p a.

Bueno, cada selector en :is()usa la especificidad más alta en la lista de argumentos. En ese caso, tanto the #headercomo the pin the :is(#header, p)usan la puntuación de especificidad de #header, que es 0100. Por lo tanto, el navegador mantiene su valor porque tiene una mayor especificidad.

Por lo tanto, cada vez que vemos este tipo de conflicto, es mejor no usar la función de pseudoclase y apegarnos a su equivalente como el siguiente:

#header span,
p span,
#header a,
p a {
  color: red;
}

Ahora, deberíamos poder ver el resultado esperado sin usar la !importantnotación que interrumpe el orden en cascada.

Puedes verlo por ti mismo en CodeSandbox .

¿Cuándo exactamente podemos usar la !importantdeclaración?

A continuación se presentan algunas ocasiones en las !importantque se recomienda usar la notación.

Clases de utilidad

Suponiendo que queremos diseñar todos los botones de una página para que tengan el mismo aspecto, podemos escribir una regla CSS que se puede reutilizar en una página. Echemos un vistazo al siguiente marcado y estilo a continuación:

<p>Subscribe button : <a class="btn" href="#">Subscribe</a></p>

<section class="content">
  <p>
    This <a href="#" class="btn">button</a> style is affected by a higher
    specificity value .
  </p>
  A link here: <a href="#">Dont click</a>
</section>

Seguido por el CSS:

.btn {
  display: inline-block;
  background: #99f2f5;
  padding: 8px 10px;
  border: 1px solid #99f2f5;
  border-radius: 4px;
  color: black;
  font-weight: normal;
  text-decoration: none;
}

.content a {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
}

En el código anterior, podemos ver que el enlace del botón dentro del sectionelemento está dirigido por ambos selectores en el CSS. Y aprendimos que para las reglas en conflicto, el navegador usará la regla más específica. Como esperábamos, .content atiene una puntuación de 0011while .btntiene una puntuación de 0010.

La página se verá así:

En este caso, podemos hacer cumplir la .btnregla agregando la !importantnotación a las declaraciones en conflicto como esta:

.btn {
  /* ... */
  color: black !important;
  font-weight: normal !important;
  text-decoration: none !important;
}

La página ahora se ve como esperamos:

Compruébelo usted mismo en CodeSandbox .

Las reglas de estilo que no podemos anular

Esto sucede principalmente cuando no tenemos control total sobre el código de trabajo. A veces, cuando trabajamos con un sistema de administración de contenido como WordPress, podemos encontrar que un estilo CSS en línea en nuestro tema de WordPress anula nuestro estilo personalizado.

En este caso, la !importantdeclaración es útil para anular el estilo en línea del tema.

Conclusión

La !importantdeclaración nunca está destinada a ser utilizada como deseamos. Solo debemos usarlo si es absolutamente necesario, como una situación en la que tenemos menos control sobre el código o casos muy extremos en nuestro propio código.

Si lo usamos o no depende de cómo entendamos el mecanismo central de CSS, y en este tutorial también cubrimos eso.

Espero que hayas disfrutado leyendo esta publicación. Si tiene preguntas o contribuciones, comparta su opinión en la sección de comentarios y recuerde compartir este tutorial en la web.

Fuente: https://blog.logrocket.com/understanding-css-important-declaration/

#css