CSS for beginners

Good afternoon everyone, super excited to be taking this course! it’s great to meett all of you! I’m a bit new to HTML and CSS. I have my first question while taking first part of the HTML course.

In the course mosh talks about adding multiple CSS declerations, in this case I have the image as one, and the text as another. I noticed mosh put both declerations in the same style tab. This threw me off as they are two different declerations.

When you are styling elements using CSS, does all your CSS go into that styke sheet, or shiould you have seperate style sheets for each decleartion you make?

Appreciate any all feedback here, I am EAGER to learn! See code below for the the two elements.

img { width: 100px; border-radius: 50px; float: left; margin-left: 10px; } p { font-weight: bold; }

Hi,

The course explains how any rule takes precedence over the other.
Until now I thought that it works like this.

  • The closer to the tag, the most precedence (this is OK).
  • CSS files are read in sequence and the last declaration overwrites the previous. (this one I have a small doubt. I have a feeling this is not what was explained in the course but I may be wrong and it is actually OK). I just did a quick search and it seems OK.

Tried for myself to confirm:

image
For the rest it is up to you.
That said I believe in separating style-sheets into smaller chunks for better maintainability.

When I used to do Angular I actually had one stylesheet per section and one for variables using the @import into CSS.

Hope this helps

Thanks so much for the response! When you say “separating style-sheets into smaller chunks”

Your saying every element your styling should have it’s own tag, is that what you are saying?

Try to think of the elements you are trying to style as clusters. There can be seperate files for basic layout, grids, typography etc. I think that is what UniqueNospaceShort means.
No worries, you’ll get the hang of it, if you do a couple of excercises.

HTML file is parsed top to bottom. Any styling you apply in the html file (inline styling or style tag in header method) that comes after the link to the css file will have the highest specificity and will override the css file. This makes sense because it is applied after the css file was parsed.

When it comes to specificity when all rules are contained in an external stylesheet then a lot of factors come into play to determine what is the most specific rule. If two rules share the same level of specificity then the last one parsed will be applied.

I agree with keeping separate stylesheets for larger projects. I personally stick to layout, colors, and typography.

1 Like

Am new to HTML/CSS plz help me out

1 Like

What is it you are struggling with? @Yomi

1 Like

Am a beginner in HTML am actually working on small program,like Working on local website by using html, but am stuck right now

1 Like

Hey @Yomi ,

It’s extremely helpful if you explain to us where excatly you need help :slight_smile: Add your code here, wiuth the question.

Also, I tell everyone this, you are learning an entire language, this is not an overnight process. You are not “stuck” If you beleive you are stuck, you will be stuck.

You are just not understanding something, we all started somewhere. How can we help?

Wellcome to my website

we sell any kind of home deco home is unique, which is why we offer a curated selection of furniture to suit a variety of tastes and preferences. Whether you're drawn to the timeless charm of traditional design isn't just about transactions; it's about helping our customers create the homes of their dreams. With quality craftsmanship, tailored selection, functional elegance, and personalized service, we're committed to helping you unlock the essence of home through the transformative power of furniture.

we deals with different kind of home deco, Bed, cotton,diff kind of light,chairs, center table and and many more

contact information

if you have any questions or inquiries feel free to call us

  • Email: <a href ="[oriyomiadisa18@gmail.com](mailto:oriyomiadisa18@gmail.com)" "info@ [example.com](http://example.com)"
  • phone: <a href="09082477371" "(+234) 9083477371"
  • Adress:<a href="babatunde plaza airport road ikeja lagos, Lagos state Nigeria"

So when I run the code it does not show the address

@Yomi I am not sure what all this is, What exactly are you trying to do here?

Is like building a local website

@Yomi I understand that part, what are you trying to excatltly, are you trying to create a hyper link to your site, can you post your code below?

Wellcome to my website

we sell any kind of home deco home is unique, which is why we offer a curated selection of furniture to suit a variety of tastes and preferences. Whether you're drawn to the timeless charm of traditional design isn't just about transactions; it's about helping our customers create the homes of their dreams. With quality craftsmanship, tailored selection, functional elegance, and personalized service, we're committed to helping you unlock the essence of home through the transformative power of furniture.

we deals with different kind of home deco, Bed, cotton,diff kind of light,chairs, center table and and many more

contact information

if you have any questions or inquiries feel free to call us

  • Email: <a href ="[oriyomiadisa18@gmail.com](mailto:oriyomiadisa18@gmail.com)" "info@ [example.com](http://example.com)"
  • phone: <a href="09082477371" "(+234) 9083477371"
  • Adress:<a href="babatunde plaza airport road ikeja lagos, Lagos state Nigeria"

Am still going to create hyper link but this code let me show the result

Wellcome to my website- https://www.homepage.com

we sell any kind of home deco home is unique, which is why we offer a curated selection of furniture to suit a variety of tastes and preferences. Whether you’re drawn to the timeless charm of traditional design isn’t just about transactions; it’s about helping our customers create the homes of their dreams. With quality craftsmanship, tailored selection, functional elegance, and personalized service, we’re committed to helping you unlock the essence of home through the transformative power of furniture.

we deals with different kind of home deco, Bed, cotton,diff kind of light,chairs, center table and and many more

contact information

if you have any questions or inquiries feel free to call us

  • Email:

@Yomi

It sounds like you just trying to create a hyper link. If this is the case see the code below

If you add this to the “body” of your site, the link should be clickabkle, this worked for me

Hope this helps!