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.
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
