Geek Answers Handbook

Naming convention

I start by learning CSS.

Looking through the w3schools tutorial.

I realized that some of the examples start with

.awesome-text-box{}

Is there any difference between

 .awesome-text-box {} and awesome-text-box{}

without a point?

What does the point designation mean

 p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; }

p refers to

?

+7
html css
source share
6 answers

A point in css for what is called a class.

They can be called almost anything, for example, in your CSS you would create a class and add a style for it (in this case I am doing background black);

 .my-first-class { background-color: #000; ... }

and apply this class to the HTML element, you should do the following

 <body class="my-first-class"> ... </body>

this would mean that the body of the page turns black.

Now you can create classes for CSS style or directly reference HTML elements, for example (CSS again);

 body { background-color: #000; }

will directly refer to the <body> element on the page and do the same again.

The main difference between the two is that CSS classes are reusable. For comparison, the link to the HTML tag directly affects all the tags on the page (the same), for example (again CSS);

 body { background-color: #000; } .my-first-class { background-color: #FFF; }

and now for some HTML;

 <body> <p class="my-first-class">This is the first line</p> <p class="my-first-class">This is the second line</p> </body>

This will create a black page with two white boxes with text inside them (try it!)

Now for your last part of the question about p.one {...} CSS.

This is a link to the <p> tag that class="one" , <p class="one">...</p> added to it

This CSS will only work with the <p> with the added one class (as mentioned above).

Additionally for experts ...

There is another type of selector and it is called an identifier (and I personally don’t use them when styling CSS, but some people like it too, and I don’t know why ...)

As a class, you can have an HTML element identifier; <p id="my-first-id"></p>

and add to that the CSS style you would put (in CSS);

 #my-first-id { ... }

and will stylize all elements with an added identifier.

Hope this helped answer all the parts, ask again if you need an even better explanation :)

+15
source share

The dot indicates that the selector is a class. Therefore, it will select the elements on your page as such:

 .awesome-text-box { } <div class="awesome-text-box"></div>

If the dot does not indicate the name of the element. For example:

 div { } <div></div>

In another example that you specified, dot notation uses chaining , where you can select an element with multiple conditions. In your example:

 p.one { } // Will find <p class="one"></p> // However it will not find <div class="one"></div>

While I'm here, I can give you a list of other common selectors:

  • #awesome-text-box => <div id="awesome-text-box"></div> => ID
  • .btn.btn-style-1 => <span class="btn btn-style-1"></span> => Class Chains
  • p > span => <p><span></span></p> => Child
  • p span => <p><a><span></span></a><span></span> => Offspring (something below)
  • p + span => <p></p><span></span> => Sibling
+7
source share

A '.' refers to the class, and "#" refers to the identifier. When not a single '.' or "#", CSS will apply the style to the HTML object. Thus, for p.one and p. Two, CSS will be applied to the .one and .two classes that exist in the p object.

More detailed example:

 <p class = "one">This text will have the CSS of "p .one"</p> <p class = "two">This text will have the CSS of "p .two"</p>
0
source share

. means class. You can call this CSS class using HTML

Example

 <span class="awesome-text-box"> ABCD </span>

and P means the <p> in HTML, which you can call

 <p class="one"> ABCD </p>

Ref -

http://www.w3schools.com/css/css_selectors.asp

0
source share

Point notation for a class and without a point that will not work. A selector name such as div, p does not need dot notation. And use hash (#) for the selector with id.

Ex -

 <div id="foo">foo bar</div> <div class="bar">foo bar</div> #foo{} /* selects foo with id foo */ .bar{} /* selects foo with class bar */ div{} /* selects the div */
0
source share

Here . - class selector. This means applying style to all elements of the awesome-text-box class, i.e.

 <div class="awesome-text-box"></div>

while without a dot, this is the tag name, as you mention in the second example p Here p is the tag:

 <p>Some text</p>

Like p.one apply a style to all p tags that one . i.e,

 <p class="one">Some text</p>
0
source share

More articles:


All Articles