CSS, And Its Application.
Hello people! In my last post, I talked about form tag and its types. I'm happy to say that I have moved on to the next stage, which is the use of CSS. I said earlier in my first html related post, that there are 3 major more like programming languages behind every successful website/Web page's frontend which is the HTML, CSS, and one last one which processes user input and interaction with the website, well I think java script is the most used.
So I just moved a step higher (css) so in my subsequent web development posts, I will be showing my html, and css codes.
My first CSS class consisted of lots of definitions than coding lol...and I will be sharing them right away.
Let me Start by defining CSS again.
CSS stands for cascading style sheets. Just like the name implies, it's basically for styling our already made html code. Can you see why the html is very important?🙂
The CSS syntax is based on 2 major things.
I) The selectors:
They are used to select/point the elements in our html code that we wish to style.
CSS selectors can still be subdivided into;
a) Simple selectors;
This selectors select elements just based on their names, Id, class, etc.
b) Combinator selectors;
This particular selectors are used to select/ point to 2 select 2 or more elements with relationship.
c) Pseudo class selectors;
These are used to select a group, based on a certain state.
d) Pseudo elements:
They are used to select a particular part of an element.
e) Attribute selection:
Just like the name, they are used to select elements, based on an attribute.
II) The Declaration :
This container is the one that carries our command and this is usually separated by semicolons.
The ID, and class selectors, all fall under simple selectors, and actually they are very easy to use at least for my level, and those are majorly what I will be using until further notice😅....the ID selectors selects elements in our html, based on the id we have given those elements earlier in our html, while the class selectors, select elements, based on The class we have given those elements earlier.
One thing I have come to notice, in most programming languages. Is the pre-code...I mean the code which we are to call, before actually writing ours. In html, the shortcut for that is Inputting the "!" Character, and clicking enter.
But for CSS, I'm yet to know the shortcut for that. But the pre-code for CSS, is this:
This is used to select all html elements on the code page.
I also got to know, that we can either have external css, or internal css, although I don't really know much about the internal one for now, I know the external has to do with having an external sheet of css, which can and must be linked in our html, for it to have any effect on our html code.
We usually link it right in the <head> section, like this👇:
Please note: your "href" must be properly sourced to the right style sheet, meaning you have to take note of the name you used to save the style sheet, and the name you are trying to link to your html.
In all programming languages, there is always a way to comment. In HTML, we comment by writing our text inside this:
<!--Your text-->
While in css, it's slightly easier:
/* Your text*/
What is css if it cannot support color codes which is part of styling??
Css actually supports about 140 standard color names🔥
CSS consists of different color classes. We have the RGB(I think this is very common), HSL, and hex.
RGB:
Here colors can be specified as RGB, by using the RGB prefix.
Eg: RGB(255,0,0)
Yep the commas in between the numbers are very important.
For an advanced css stylist, you might want to add an a to RGB, to give RGBA...The a stands for alpha channel, or opacity whose value ranges from 0.0 - 1.0.
Eg: RGBA(255,0,0, 0.6).
HSL:
Just like RGB, colors can also be classified as HSL colors when the HSL, or HSLA pre-text is used, and is usually in the form:
HSL(hue value, saturation value, light value).
The last being hex: I presume this stands for hexadecimal, because unlike RGB, and HSL, we make use of hexadecimal numbers usually written in 6s or 3s, with an "#" symbol right before the numbers.
This numbers range from #000000- #ffffff.
The 3 format can be used too knowing that #ffffff = #fff, and #ffcc99 = #fc9, etc.
Colors can be placed on text, using this👇
and even on the background, using this👇
This is the web page before adding red colour to the texts:
This is the Web page, after adding red colour to the texts:
This was all for that class and there was no assignment this Time, but I believe very soon I will start to implement what I have learnt so far on css😋.
All images used here are mine
Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!
Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).
Thanks for including @stemsocial as a beneficiary, which gives you stronger support.
CSS always get boring to me though
Ahh!! Funny enough I enjoy it...maybe because I just started lol😂 but I believe studying it I. Group is always fun though.
Post manually reviewed and approved for an Ecency boost. 😊
Thank you!🙏
Yay! 🤗
Your content has been boosted with Ecency Points, by @timix648.
Use Ecency daily to boost your growth on platform!
Support Ecency
Vote for new Proposal
Delegate HP and earn more
Excellent to see your progress.
CSS syntax is easy to learn. In my experience, what's hard is having an outline of what you want your page to look like and applying the right attributes to It quickly. That's why I use Bootstrap.
🤗🤗
Yeah I read about it seems like it has pre designed layouts for faster and easier design...I will eventually turn to use it, but for now I feel I need to know the basics first hence the reason why I'm still doing it manually 😁.
Thanks for stopping by again!
This is very impressive! Timmy, Seeing your advancement in web development is cool. I've always wanted to learn coding.
Thank you very much
Give it a try...it's worth it🙂🙂
Will you guide me through
Hehe I'm a newbie myself 😂 but if you have basic knowledge of html,and css, then I can put you through the best way I can